Explore JavaScript Beginners Guide to Coding JavaScript | Laurence Svekis | Skillshare

Explore JavaScript Beginners Guide to Coding JavaScript

Laurence Svekis, Web technology Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
20 Lessons (2h 20m)
    • 1. BSjavascript

    • 2. Introduction to JavaScript Course

    • 3. 2 Introduction to Course resources

    • 4. 3 JavaScript placed within HTML where and how

    • 5. 4 Get Elements update HTML via the DOM

    • 6. 5 JavaScript Document Object Model

    • 7. 6 JavaScript Comments

    • 8. 7 Variables interactive JavaScript

    • 9. 8 Variables output to HTML

    • 10. 10 JavaScript Arithmetic Operators

    • 11. 11 JavaScript Operators

    • 12. 13 JavaScript Conditional Statements and Switch Statements

    • 13. 15 JavaScript Loops

    • 14. 17 JavaScript Introduction to Functions

    • 15. 19 Making your HTML page interactive and Dynamic with JavaScript

    • 16. 20 JavaScript Event Listeners

    • 17. 22 JavaScript Arrays

    • 18. 24 JavaScript Objects explained

    • 19. 26 JavaScript Math Function

    • 20. 28 JavaScript Date Conclusion


About This Class

Learn how to write JavaScript and bring your web pages to life.  JavaScript is everywhere and learning JavaScript is an in demand skill to have.

JavaScript is one of the core technologies used on the web.  Image web users coming to your website and being able to interact with your content.  This is JavaScript.  Customize your web users experience!

  • Explore what you can do with the DOM (Document Object Model).  Power of the DOM Document object model. The DOM gives you the ability to make your content interactive.
  • Find out about commenting and how to write JavaScript code.
  • Variables are at the very center of programming, they give you a container to hold information that can easily be accessed and manipulated. 
  • Outputting content for web users to consume.  Learn how you can output content to you web page for all of your web visitors to see.   Customized content ready to wow you visitors. Alerts and other interactive objects for web users.
  • Operators with variables and how programming works.  All about operators and what you can do with them.
    Arithmetic operators, conditional operators and more
  • Conditional statements, for TRUE and FALSE checks.  Check to see if the condition is met and let JavaScript respond.
  • Loops within JavaScript saving time and doing more.  Save time loop your code, repeat and repeat again. Repetitive actions simplified with loops.
  • Explore what you can do with functions.  Blocks of code that can easily be called and executed within your code.
  • Event listeners that can be used to create interaction on your website.   The ultimate connection between users and your code.  Their action and your code can react to it.
  • Hold more data with Arrays and Objects.  Multiple values within one variable.  JavaScript comes ready with so many things that can be done with the data within the array.
  • Math, Date and a whole lot more

This course is taught by an instructor with over 18 years of web development experience.  

I’m here to help you learn about JavaScript and ready to answer any questions you may have.

When you are ready start coding JavaScript today.


1. BSjavascript: learn how to write JavaScript and bring your Web peaches toe life. JavaScript is everywhere. Learning JavaScript is an in demand skill toe. JavaScript is one of the core technologies used on the Web today. Imagine Web users coming to your website and being able to interact with your content. This is JavaScript. Customize your Web users experience. Explore what you could do with the dawn document object model. Use the power of the dawn to make content interactive. Find out more about commenting and writing your job. Record how variables are used in their very center off program. So how they can be manipulated and accessed out. Putting content for Web users to consume. Learn more about the content out. Putting it into your Web browsers. See it customizing that content to really wow your visitors alerts and interactive objects that are used within Web programming operators with variables and how programming works. Conditional statements for true or false cheques and a whole lot more loops within JavaScript. Save you time. Also explore functions, which are blocks of code that can easily be executed within your court. Then event listeners. They give you that interactive capability, listening for certain auctions and allowing you to provide reactions to your Web users pulled even more data with the rays and objects. JavaScript gives you a lot of power that you could do with a raise built in functionality within JavaScript, such as math, date and a whole lot more. This course is taught by instructor with over 18 years of Web development experience. I'm here to help you learn more about JavaScript and ready to answer any questions you may have. So when you're ready, let's start courting JavaScript today. 2. Introduction to JavaScript Course: welcome to our introductory course to JavaScript, where we're going to explore all the amazing functionality and things that JavaScript has to offer. My name is Lawrence, and I'm gonna be your instructor for this course. And I'm so excited to have this opportunity to present Javascript to you today. I've been working with JavaScript for a lot of years, developing websites and all kinds of really cool applications using JavaScript. And I'm here to help you learn more about JavaScript. And I'm also ready to answer any questions that you may have in regards to JavaScript. This course is designed to give you the foundation a starting point for learning about javascript. It's going to demonstrate some of the really amazing functionality that you could do with JavaScript. This course is designed to get you started writing code quickly. I entered demonstrate how I'm set up and how you, too can set up your local computer in order to write and create some javascript code. So I got to show you where to place that JavaScript within your Web page within your HTML code. Also, we're gonna be introducing the dom, So the dawn is super powerful and an important part of creating interaction within your Web pages. It gives you the ability to access any element any one of your HTML elements and make things happen with it. And this is the dump, the document object model. So we're gonna be exploring what the dom is and how you too, can via JavaScript interact with the dawn and make things happen on your Web pages. We're also gonna look at commenting within our JavaScript code. So commenting is an important part of writing code because it gives you the ability to reference things within your code and also be able to go back at a later point and read those comments and understand that code better variables are at the very heart of what programming is. So variables give us stability, toe hold information, and then we can access and manipulate that information at a later point. Variables are super important, and within this course, we're gonna be covering off all of the fundamental concepts and how to use variables within your coding. Also, how toe output content onto your web page. Now, of course, JavaScript gives you the ability to manipulate that content and update that content on your Web page, and we're gonna show you how how to create those interactions directly with JavaScript and importing their user responses directly within your code and then using that, using those responses within your coat so you can, really while your visitors and customize their content and experience operators are another important part of coding understanding operators, and what's available is super important. There's everything from arithmetic operators to conditional operators and a whole lot more so we're gonna be covering operators as well. Within this course, then statements. Statements are another fundamental core concept of programming. You need to be able to look at something and judge whether it's true or false, and then take some type of action and create some kind of response for the user. And JavaScript gives you the ability to do this. Also, JavaScript and looping within JavaScript really gives you a lot of power because it gives you the ability to loop through pieces, a cold or certain actions. And it really simplifies the process of these repetitive actions, giving you the ability to run them multiple times as many times as you want and creating those outputs. Also, another fundamental core concept of programming are functions now. Functions give you the ability to run blocks of code, and you can execute these blocks of code at any time. And there's a whole lot more that you can do functions as well, such as passing in values into those functions, making calculations and sending back returning back responses. Also event listeners. So within the course, we're gonna be covering those event listeners and event listeners are part of the Dom, and they give you the ability to make any element within your HTML code interactive. It's the art. It's the ultimate connection between users and your code, their action within their code and then your reaction to their actions. This is what event listeners conduce for. Your Web pages, arrays and objects also give you another way. Toe hold multiple values and arrays and objects are really important. Containers within JavaScript and as well as a raise, have a whole bunch of built and functionality that you can do within JavaScript, and we're going to demonstrate some of the really cool things that you can do once your data is within an array and what you can do with it within JavaScript as well as objects. And in addition, we're also going to be looking at some of the built in functions that are ready to go within JavaScript toe help you get values and make your coding experience a whole lot easier and dinner. And that's with math date and a bunch of other really cool functionality that's already ready to go within JavaScript and gives you the ability. Just call to these functions, return back responses and integrate that within your code. So all of this and a whole lot more is included within this course. So when you're ready, let's jump right in, open up our editors and start creating some JavaScript. 3. 2 Introduction to Course resources: JavaScript, along with HTML and CSS are the three corner core technologies of the Internet today. That basically means that most modern websites today are using JavaScript within their source court and rendering out that code. All you need to do is have a browser, so it's along with HTML and CSS. It's a browser that actually renders at that code. So within this course, I'm gonna be showing you how to write JavaScript, and you're gonna be amazed at how easy it is to create JavaScript. Now, in order to write JavaScript, you're gonna need a few resources. And chances are you've already got these on your computer. So first of all, one of the main resources that we need in order to once we write the code to actually see the code running is a browser. So in this case, I'm using chrome as my browser, and I can see here when I go to a website, it renders out the code within the website and you can see source code of any website. And here you can see that there's a bunch of Js files. So these are all JavaScript files, and we've got thes opening script and closing script. So again, this is more JavaScript and as mentioned, almost every website is gonna have JavaScript. So here's some more JavaScript, and it's literally everywhere and used throughout the Internet. So in order to write JavaScript code, you can use any editor within this course I'm gonna be using Adam s. This is a free open source editor. It's available across other platforms as well. So I'm on a Windows machine. So that's why it's asked me to download the Windows version. So there's other platforms as well, including Max. So these air the download files for Max and so on. So, depending on what platform, and if you're even looking for an editor, then you can check out Adam. But again, chances are you already have an editor present on your computer. So any editor, anything that can write text, is ideal for writing JavaScript. And one of the reasons that I'm using Autumn is that it's got It's got a really good interface to use, and I've been doing quite a bit of my programming lately within Adam. So again, it doesn't matter what editor you you use. There's a number of them out there as well as system. It's file systems that are already on your system. As long as you can store the files as HTML files, that's all you need to do in order to run them within your browser and render out JavaScript. Now there's another option as well. So there's several online editors, such as Code pen Io Sys, another one that I used quite often. And the thing is that I like about code pen is that whatever you type within the courting area here gets displayed out on the right hand side so you can do HTML. You can do CSS and you can do JavaScript, and it just simply renders it it. So I'm just going to do some quick HTML code and we see that makes the line break, and we see the code and the display area all getting rendered out so we can see immediately what that code is doing and how we can use it. So I'm gonna be using this within this course as well, as well as creating files within Adam and in the next lesson, we're going to jump into actually started to write some JavaScript. So that's coming up in the next lesson. 4. 3 JavaScript placed within HTML where and how: in this lesson, let's start creating some JavaScript. So first of all, we need an HTML file to render out within our browser. So go ahead and create index dot html just like I've done over here. And basically we can just put some text in there and we're gonna open up in the browser. So I want to note that if you notice there that I'm going to local host and it's actually rendering out the code. Eso this just to note that I'm also running example server in the background and that gets inability to go to a local host. Eso. If you are interested in download example, it's over at Apache friends dot orig and again, it's not necessary to run JavaScript. It just makes it a nice and Niedere your l to go to, and I've got appointed to this Js directory. So whenever it runs, local host points to this route and I've got index as my root file, and that's why I'm rendering it that way. So I just want to note that that it is running in the background. That's it there. That's the control panel. So if you are downloading it and installing it. Then they're going to see something like that as well. And you can start. You can start your server. So first of all, let's create some JavaScript. Now, if you're familiar with HTML, it's a Siris of opening and closing tags. So we've got our HTML tag, and then we've got a closing HTML tag. We've got ahead. Tag, We've got a closing head tag. We've got a body tag and we've got a closing body tag. And if you're wondering, OK, why am I going through all of this? HTML is because there's a number of places where you can place JavaScript within your code , and sometimes you're going to see JavaScript up here at the top. So you see something like script and then closing script, and then you've got your JavaScript here in the middle, so this court in here is gonna be rendered it as JavaScript. So that's one option, and also you could do it. You could do it within your body area. It's often times people try to avoid having their code mixed in with their HTML. It's not really good practice, so either get into the practice of placing it at the top or placing it at the bottom. So just after all of your HTML content and you've got a bunch of stuff here, maybe eso blah, blah black. And then, after you finished off all of your HTML content just before you close off body, you can place your JavaScript in there as well. Now there are certain benefits and down sites to placing it. Eso some people will always place it at the top. One of the downsides Teoh place in the code at the top is that sometimes if the code takes longer to run through, then you might have some slowdown in your script. And the other thing, too, is to be aware of which we're going to talk about later on. If you're JavaScript is accessing content elements from your HTML. So if I've got a DIV there and if I'm tryingto access it with my JavaScript, if I'm trying to access what's called the Dom. So this is the document object model includes all of the elements within the page. Then you need to place it at the bottom, or you need to wait for all of the HTML code to render out and then access. It s o initiate it once the dom has loaded. So that's one of the reasons why a lot of times you'll find the code at the bottom as well , because a lot of times were interacting with the dom elements. And that's why we like to place it at the bottom so that all of the dom elements can be created now. Other times too, you might see javascript being linked to a script file. So this is gonna be the same thing as taping the JavaScript within your within your source code. But there are some benefits to linking out to a script file. So in order to link Teoh Java script, So I'm just gonna call this javascript dot Js So Js is the extension for JavaScript files and close off that script eso Now it's gonna look for a file called javascript J s. So I should create that and save this so I'm gonna save this one as Javascript GS s O. This is the same thing as having the script within the page. But the benefit of having separate file running your JavaScript is that you can actually link from multiple pages so I can use JavaScript. And if I've got the same javascript that I want to run on multiple pages, I can simply linked to it. And usually this is best practice. If you've got a website, it's It's always a good idea to create jobs, script files and then simply link out to them. If you do have some stuff that's on this page and only specifically for this page, then you can go out and place it within the script. So opening and closing script tags again. This is depending on what you're trying to accomplish with the JavaScript on what's contained within your source code. One way might work better than another, and if you are creating a large website, do try to link out to the file eso. It just makes it a lot neater and makes your source code a whole lot more readable. So I'm going to get rid of this one here a to the top because my preference is to use to keep the script tags at the bottom because I like the idea that also, if I'm linking out to Js files, same principles apply, so place them at the bottom just before you close off the body tag. And again, this is gives us the ability to interact with this div here within our HTML. And I am going to be showing you this in the upcoming lessons. I'm gonna be talking more about the dawn because there's a lot of power. It's super powerful and super useful in JavaScript. So again, keeping all of that code they're nice and neatly at the bottom before your body closes off is best practices you don't want to put you can. But you don't want to put things like your script tags here in the middle of your HTML, so this it doesn't look right, and it doesn't look nice. And really, it's It's not a good idea to keep it within this format because you want to be able to quickly access your script files. If you have any changes or errors to make or errors to troubleshoot, then it's always a good idea to have everything in one place. So I'm just giving you a sample off. What? Putting from JavaScript so mean type document, right? Hello. You can see that when I refresh this I've got that The content written there. So that's one way to output content in JavaScript. But again, there's much better ways of actually writing some some code or updating your HTML than placing your JavaScript in the middle. So I am going to get rid of that. I'm going to keep the the document rate and just refresh the page there. So now it's moved to the bottom, and in the next lesson, I'm gonna show you a better way of writing hello within your HTML than what we're doing right now. And just also wanted to note that this is the same thing that if I just saved that and I place it here and maybe we'll update it. So hello, world. And also add in some HTML there. So now when I refresh it, it's the same thing. It it renders out that code. So the way that the browser works is it reads through all of your HTML when it hits this JavaScript file. At this point, Line six. It takes in all of this JavaScript as if it were on the page render so runs through the cord, renders at whatever it needs to render out and then continues. So it would hit this script first, and then it would hit this script next So I can show you that when I refresh it. I've got that Hello there, So and renders it out in the order that it's presented within the HTML. So next lesson gonna look more into deeply into document and show you how we can do this a little bit more efficiently. So it's coming up in the next lesson. 5. 4 Get Elements update HTML via the DOM: So in this lesson, I'm gonna show you a better way how to how we can write out some code within our HTML. So, previously we had looked at that. We can take the script tags open and close and place it within our HTML and cabin render out there. But what actually happens if I've got a ton of html there and I'm placing some javascript in the middle there, So it's not gonna ever look really nice and neat, So, ideally, we do want to place the code at the bottom. But let's say, for instance, I want to place it if in this particular dip. So I want to update this contact content blah. And I wanted Teoh say something else. So let's give this one on I d. And so I just call it my e l e. And then down here at the bottom, what I'm gonna do is onion actually get or maybe we'll get rid of this one, and I'm gonna work off of that JavaScript file so we'll do a little bit of flipping back and forth. So first of all, let's identify that, uh, that value, So I'm going to give it, so I'm gonna use the document. Object. So again, this is the dawn, and it's really important to get familiar with the Dom and what it looks like and how it works. So let's do gets elements by i. D. And this is another really cool thing about JavaScript is that it's got a whole bunch of these built in functions that really allow us to create some really powerful and cool things toe happen. So in this one we're doing get element by i d. So essentially, it's going through the document object, which I am gonna explain coming up a swell, and it's getting element by i d. So it's looking through that full document. It's finding the element that has the i d my e l and I'm gonna do something else here. We're gonna do another built in method within JavaScript where we're going to do inner HTML . And within that inner HTML, this is wearing an odd hello world and get rid of this one here and just clean that up a little bit. And I know it's kind of run off the page there, but let's take a look within our browser and see what this looks like. So we see that we do have our hello world. It's actually changed that content there. So if I was to actually go to the source code there, there's no hello world there. So what's happened here when I do inspect elements? So this is Chrome browser gives me the ability to inspect elements we see. We've got the element that my e l e. And we see that it's updated with the new HTML placed within it. So what's happening here is that as we're going through the page, eso initially what happens when the browser runs into this index dot html? Page is, it renders out all of this. This the source code. It hits the JavaScript. The JavaScript tells it to look into the document so all of this information is contained within the document object looking for the element with my e l E, which is there, and it says inner HTML. And it updates what the Inter html is thus updating the visual code and also, at that point that working source code eso This is different than the source code, because this is the dynamic source code that's contained within the dawn, and that allows us to update content dynamically. And also, when we go to our source code, this looks a whole lot neater. Eso we don't have a bunch of JavaScript mixed in here, and at any time we can open up our JavaScript file. And if we want to make an update to our message here, we can always change the message. And the good thing about javascript, its dynamic. It's interactive, which I am going to be suing you in the upcoming lessons. So it makes it really easy to update messages and so on. So now when I go back out here, I refresh it. I've got a message updated. So I got totally new output here for the Web users. So you're probably wondering, Well, what is the dawn and what's contained within the dung? And this is one of the reasons why I like to use chrome. And again I went to inspect. You can do control, shift I or click anywhere it's blank or go up to your browser here and go to settings, and you can you can or more tools, and you can open it there as well. Eso there's number ways to open up this doubt developer tools And the really cool thing about developer tools is that it actually contains all of the dom information. So this is all of the information contained within the Dom. And as we can see here, we've got a whole ton of information and there's that inner HTML. So basically, for this particular element, it's pulling out all of the HTML that's contained within this particular element. And as we're looking for that entire page, everything contained within the DOM. That's what we've got. All of that inner text and inter html. And the difference between inter text and Inter html is that Inter text is the same content that's being output with no HTML. And when we shift up to enter HTML, we see the content with age two males. We see the dibs there. We screw that, see the script tags and everything. There s so all I've done is I've gone through and I've gone through all of the different child nodes, so we see that there's a bunch of child notes there and we can see that this is the one that we've selected. So it's a Div with the i d my e l e s. So it's not necessarily that it has to be that particular that has to be a div. So any element with an idea can pick that up as a child. Note. We can see that this one itself has some child nodes. But we go down here and we can see that the inner HTML and Inter text is with our new updated value. And this is basically how the Dom works. And there's really so much you can do with the dawn. If you go down a little bit more, you can see all of these on blur on click. So these air the event listeners in the dumb. So basically any element within the page, you can add event listeners. You can pick up information, you can update the information with JavaScript. And this is where javascript becomes so super powerful as the Dom because it gives us so much power gives us access to the entire object, and the object is where all of that information gets contained. Eso If you actually want to see more information about the object, we can use our console log and this guy actually gives us the ability to find out more information and Seymour detailed information about what's contained within the dog. So I'm gonna show you a little bit more about that in the upcoming lesson. 6. 5 JavaScript Document Object Model: So in the previous lesson, I showed you a really cool way to update content that's visible to the Web user via JavaScript, making all of our HTML elements inter interactive and dynamic. And this was all contained within the dawn. And we can access the Dom and to see actually more information about the dom we're going to use console eso. This is another way to debug your JavaScript and to find out more information about what's happening with your JavaScript we use. We use the console there to log out information into the console. You can use console log. So if I do console log Hello. And if I go back up to the page, I can see that I'm passing myself essentially a message here within the JavaScript. This is this console information isn't gonna be visible anywhere here in the output page. So the Web user is not going to know unless they actually go in your source code and see what actually information's being out here. I put here s so this is really good for debugging and passing values and variables and finding out more information about what's contained within certain variables and objects in JavaScript. Eso This is what we're gonna be using that for if we want to find out more information about the Dom eso Chrome really has a really good properties here. If I goto elements, I can see my properties. I can see all of these objects here, and I can kind of sift through this and sort out and find out all of that information that I want to find out. Here s Oh, I have the ability to traversed through the dom. I can update my style's so there's quite a lot that I could do within this console. So sometimes what you want to do is maybe you wanna output that document, object right within the console and just look through it that way you might not have access to the element, or you might want to just go through this way because this way, you actually have more control. So let me show you how we can use consul to output information that's contained within certain elements or within the dawn as a whole. So you can do console d r I, and we can do document. So notice that I don't half a document defined as anything, whereas hello. I've actually had a string value that I was out putting and have gone Consul D r I So this is gives me a consul directory view of the document. Object. So this document is no coincidence that I've written document down there as well because this is the object, and this is the main top level object here called the document, which contains a whole lot of information that we're just looking at. So when I refresh it, I see that on JavaScript Js line one. I'm out putting hello line to remote putting the whole document object. And this is gonna be really cool, because when I opened up the document object, there is everything that's contained within the page. So I've got that same ability to go down to child nodes. I can get all of that information. I can continue down child nodes. So I've got head, text, body and so on. So just a lot of information is contained within here and I can keep going down. So I've got all of my child. No, it's so if I was to go to documents and I went to html and then I went to. So if I went document HTML So let's see what actually happens here. If I go document html, let's do document body because we're in the documents. So we're not gonna pull out all the HTML so it's do document body refresh. It s a got document body there and we see we've got all of these child nodes. So let's do so if not document body and we can update the inter html there. So let's try something interesting here where we're gonna update that inner html of document body. So a document body, inner html. And that's right. God. So what do you think is gonna happen here s o notice that one. I selected this element. I updated its inner HTML. We got the content that I placed here. So now what we've done is we've seen we've got document. We've got body as one of the elements there, and we had an inner html for the body, so we had all of this content here. So what do you think is gonna happen now when I refresh it? And if you see that we're gon it truly is gone, and we also see that we throwing an error here because now we're trying to access an element that no longer exists, and this is where we're throwing an error. So this is another good example of where the console comes in useful. Because if I had this closed, I wouldn't know that I'm actually seeing that error or that I'm getting an air. So this is where Web developers and JavaScript developers that use the consul quite often because we're able to get a lot of information here contained within the console. So let's make one more update here, and let's say that we do. You get element by i D. And we want to output that into the console log instead of you get rid of that one there and would do console log. And I'll just show you what the difference between console log and Consul directory is. And let's open that up again. Refresh it and we see that when we do console log, then we don't have this nice, neat way of of traversing down and seeing all the element information. All I get is that source code for that particular element. So let's update this back to directory, and this is again really useful. If you have a whole bunch of Children child child nodes within this main note, you can traverse down there and make some updates and make selections as well. And I'm gonna show you more about that in the upcoming lessons. But for now, we've got our inner html there. So message updated because again remember how we're running through the code. It runs through the same way in javascript as it runs in HTML, where we're going from the top down. And once we hit our javascript so it's writes out Hello. It writes out the document body. It writes out that element, and then over here is we're actually we're updating the message. You're probably thinking, OK, well, that doesn't make sense, because we're updating the message down here, But we're logging that information up here, and what's actually happening is that javascript actually makes two passes. Eso the 1st 1 is ah passed through of all of the source code, seeing all the different variables and I objects that were interacting with. And then the 2nd 1 it it remembers that we've made this update and it updates it. There as well. So and it knows that we're making an update to this particular object. So it knows to write that update out here instead of passing that original one. And that's a more complex. That's a more complex topic within JavaScript. So it's also known as wasting eso. You do have the ability to hoist certain data in on that first run through that you can access within your script. Eso again. That's more complex, complex JavaScript. So we're going to stay away from the really complex stuff because this is a beginner's course, and we're going to just stick to the basics and just Styx so that you understand that we're able to run through the code and update the code within the document object. So that part was really cool. And again, the Dom is super powerful and again keeping in mind that just give you example here. So if I was to move my JavaScript up into the head just to show you what's gonna happen here when I reload it, we get some errors here because we haven't actually loaded that those JavaScript objects of the Dom actually hasn't loaded, and it's not ready to go. We get that first. Hello. Being output there, but we're missing the document. Object? We're missing the document Object missing the document Object Because I did moved it up to the top. So that's why order and where you're placing your javascript is important. And again, if you're looking to interact with the Dom and you don't want to throw any errors, make sure that you keep your JavaScript after all of the HTML elements have loaded in. So when you're trying to access them, make sure that they've already loaded in, and then you have full access to them. So the next lesson we're gonna look Atmore about commenting within JavaScript. So I know I've done that over here, and I'm gonna talk more about documenting and commenting in the upcoming lesson. 7. 6 JavaScript Comments: So I know we jumped right into the dawn and the document object model and showing you how we can interact with the document object and updating our HTML. And that was because JavaScript is so super exciting and there's so much power to it. So I really did want toe just illustrate you illustrate to you what it can do and how powerful it can be just to get you even mawr excited, what with working with JavaScript. And I usually find that when people actually see something changing on their website and they see how easy it is to do, then that's a great way to get people interested in learning more about JavaScript. So we're going to take a few steps back and we're going to go over some of the basics of writing JavaScript code and what makes for good documentation within your JavaScript code? So noticed that over here that when I did the two lines over here, it actually no longer Iran that code. So this is what we can do for commenting within javascript. Eso commenting is used Teoh basically to keep notes. Maybe that another developer reads when they're going through your script or something that you want to note that you want to remember for the next time when you're updating and you're looking at the script. And believe me that once you write a big script, you're gonna be really happy that you've commented it and that you've documented it well because jumping back into the script, it's you're not likely to remember all the different functionality if you placed it in a very large script. So commenting is very useful. So I'm just writing out here. So intro to the consuls. That's why I wrote that. Hello there and I can document this one so I can say something like slash slash put output . The I would put the Dom over here. I can talk about the element and so on. So what happens if you want to comment out more than just one line? There's a way to do that as well. So that's a slash and the Asterix. And when you want to open that back up to the code again, Slash and Asterix or I should say abstract slash. So this is opening it, and that's closing it and then here again you can rate you can write your code so document . And we can see that, uh, that they're smart enough to know that this is commented it. So it kind of grease it out. Their eso within here you can place information. So let's say, for instance, you want to add a feature, save this spot and or you were just making some notes about, uh, place to odd event or something like that. So that this way, when you're actually looking at your cold or if you close this up in a few months later down the line you open up this file, you can say, OK, well, this is why I've added in the space or reserved this space or this is something that I wanted to add into the course or my script. So that's why I've got that placeholder there. So always a good idea to make lots of commenting and documentation. And again, this does not show up within your browser. So when I refresh it, it doesn't render any of that out. You can, however, you can see it within the source codes of someone actually went to your JavaScript file. They can see all that information, but they can see the entire JavaScript code s. So that's one of the downsides of JavaScript is that everybody can actually see all of your source code, so it makes it really insecure, s a lot of the stuff that you're doing in job script. Make sure that you are under the understanding that, uh if somebody actually want to come in there, they could see all of your source code. So if you've got certain secret keys or any kind of content that you want to kept hidden, then make sure that you're not placing it within JavaScript. I try to do it within the server end of your application. So the next lesson we're gonna talk a little bit more about alerts and out putting content into our Web page that's coming up in the next lesson. 8. 7 Variables interactive JavaScript: in this lesson. We're gonna look at alerts and alert boxes, so these aren't very common anymore, but it's important to understand how they work. So they were originally the first way that a lot of JavaScript developers made contact and communicated with their audience. So someone to go to a web page and they'd see this little pop up box happening. So those air what's called an alert? So I made some updates to the HTML and just go put up. The JavaScript cleared out our previous code. So we're all ready to go and start working with fresh peace accord. So an alert really easy. It's Ah, it's an object again within the dom. So it's within the windows object, so it could be window alert, or it could just be alert. So anything without that window extension is just considered window so he could do a window alert or weaken due on alert s a window. The window object is actually bigger than the dawn. So maybe I should run through that really quickly. So when I go windows object and I'm going to do that alert to eso the alert is just gonna say hello, world Let's go back out, refresh our page and we see we've got Hello, world pops up. So this essentially is that alert box there Hello world And it waits for you to actually hit okay before it finishes loading the page So nothing has happened. It's not writing out that html until you actually click. OK, the finish rendering out that page. So just like the dawn, the window has a bunch of stuff in it. So it's got all of these objects that are contained within it. And again, you have access to all of this when you access the window object. And there's really just way too much stuff in there to kind of go through. But interestingly enough, I'm just gonna highlight a few of these here. So we do have Dom information here, and that's because the window is actually the whole thing and the dog document is within the window. So there's the dom or the document object model, and then this is the same thing that we're looking at in the last lesson. So I just want to point out that there is this Windows object that is the parent of the Dom and there. We've got the different functions. Eso the alert function is the one that we just used eso We see it there and we see that we've got a few other ones here as well. Eso we've got We've got another one called confirm eso this It works similar to alert. So I'm gonna open up that and I'm just going to write. Or maybe I could do a separate one. So comment that one out and I use confirmed and then in confirm we're going to say press button. And the reason I'm saying press a button is because different from the alert, we're gonna have the okay button there so we can okay, Or we can cancel. It s so those are the two different values that we can do with the confirm so we can cancel it. Or when I refresh it, we can we can OK it. So you're probably wondering Well, what's the difference? How can I actually tell if the user has pressed cancel or if they've pressed okay and there is a way to tell. So let's open up our editor and let me introduce you to variables. Variables are at the very core of what programming is all about. They allow you to provide a container toe, hold some type of information. So this is just gonna be so maybe I'll just call it BT end. So the variable is gonna be BT n and this again where console log becomes super useful. Because I wouldn't actually know what the value that's contained within B t. N is because I'm using it with the script and console law gives me away toe output it. So it wouldn't make sense that I would put it within my Web application because the Web user might not need to know what, uh what? The value of BT N is where As my me as a developer, I do need to know what the value of that is and how I can work with that. Let's go back out to our program. And now that we've made that update, we can see that we can cancel it and we get a false we get hit, okay? And we get a true So this is really interesting because this gives us ah boolean value, so either a true or false that we can work with and thus we can apply conditions to it and build out our program even more so I don't want to jump too far ahead of ourselves. But there is a way to make use of those values so I can say something like, if bt n, then I can. Or maybe what we'll do is I'm gonna create another variable. So I'm going to keep this one as my output variable. So this is gonna be blank for now. And once somebody hits the bt n, I'm gonna update the value of output and I'm going to say button trust and I also want to do something where I've got else. So this is another part of the condition where we can do that something actually happens, Or I can do something else. Where? Button. Or maybe we'll just write, cancel and really big letters. They're so that it's very visible and then in the output or in the console log instead of Bt and let's use output. So let's see what happens now. So when I refresh it and I hit OK, we see we've got button pressed and when I hit cancel it. We see we've got cancel. So this is the the basics of programming that we use thes variables and the values contained within these variables to further our script, to apply additional logic to it and to really start to build out our applications and notice that all of this is happening in the background. So the Web user would not be able to see any of this information. So we can literally just make our consul the whole window right now because we're not doing anything right now interacting with it. But I promise you were going to jump back into what we looked at in the earlier lessons about the Dom, and I'm gonna show you what we can do and how we can update content in the upcoming lessons . So for this one, it's just important to understand that we can take in information from the user's auctions , and we can output something different, and this can all be contained within variables. So essentially, we're capturing what the user has done in their action in a variable, and then we're using it later on within the code, so we're accessing it. The variables are just used as a way to contain caught two to contain some information that we can utilize leader on. So just to finish up this lesson, there's actually one other type of eso we've got alerts. We've got the confirm and we've got one more where we can do a prompt. So this is another really interesting one. So this is gonna be maybe we just call it prompt or something like that, and the built in function is prom prompt and then within here, Who are you and always close off your lines of code with the semi colon? So that's another thing that's important to note with JavaScript noticed that every time I finish a command a line of code, I finish it off with a semi colon. And now let's Consul log out. So what would we have to log out if we've got a prompt? We've got some information held within the prompt set up a variable. So do you think if we console logged out are variable that contains this information? Would we see what the user input? Let's check this out and see how that works. So first of all, let's go through that one and then we've got Who are you and I hit OK, and we see that once again we've captured that user interaction that user information in the variable and were ableto output it or were able to utilize it within our script so really powerful, and this is really the essence of JavaScript. So in the next lesson, we're going to dive deeper into variables as well as interacting with their HTML content. And wouldn't it be nice that we have that interaction with the user? And then maybe we would put something here within our HTML. So let's try that out and see how that works in the upcoming lesson. 9. 8 Variables output to HTML: in this lesson, we're gonna put together some of what we've learned in the previous lessons. We've also looked at variables and we've seen that we can hold information in a variable. So with a string format, when we're asking over here, we see that if we have a true or false value, it comes out to our false. That's a boolean type of variable Boolean scan on Lee have either or so true or false, so only two values for a Boolean eso. Maybe I can comment this So use are commenting Boolean. True or false, this one is gonna be a string and this could be any number of characters or digits. It could be anything. So a string can be literally anything. And lastly, there's one other type of variable that eso essentially in JavaScript. There's three really primitive primary types of data types. Eso that's bull leans, strings and numbers. So numbers. So maybe I can call it variable numb and numbers are only digits, so they can be defined as numeric values. They can have decimal points and so on. So those are actually gonna be defined down here so we can do something like 100 weaken Do 123 or something like that. And then if we have a value here, we can output that numb value here in the console log. And you're probably saying, Wait a minute, this one has quote surrounded And if we're out putting so for setting a value here, over here we had quotes around the string Eso Why don't we have quotes around this one and that on the answer is that for numbers, you don't actually need quotes around it. So number is a different format, a different type of variable. So we don't need quotes around it. And the same thing for the Buddha leans so boo bull value will call it and this one again we don't need. We don't need to have numbers around it or quote surrounded. We write it without the quotes around it. And that's how we define billions that so we define numbers. So it's only strings here that need that number that quote around it. Because if you have ah, just a bunch of letters there. If you do something like hello world Javascript is gonna totally not know what to do with this one because they're gonna look at it like this is another variable because our variables don't have quotes around it. And there's certain rules when it comes to variables that when you're naming variables that help JavaScript differentiated from actually content. And one of those rules is that we noticed that there's something in common with every variable we've set that it actually starts with a letter. So let's ah, let's quote out some information here and will run through the rules for creating a variable. So start with letter so it can't start with a number. So we can't have something like one numb because think about it this way, that if JavaScript once it encounters this, it's not going to know what to do with it, because it might think that it's a number. But then this isn't a number, and it just won't know what to do with it. So that's one of the rules. Start with the letter. The other rule is that the content that it contained within their so notice that we're pretty much able to call them whatever we want. We can actually even put numbers in there as well, so we can put numbers in there. We can do things like we can do Dollar sign, weaken due on underscore. So this is all valid. So within the name of it, we can use characters. We can use digits, we can use dollar sign. We can use underscore, and that's pretty much it. So don't, uh, characters. Or maybe I should just call this letters, letters, digits, dollar sign. And actually, it might not even need letters. You can do something with just one letter. So? So a string a variable name could be a simple as just one letter. Were one character there. Make sure that starting with the letter So that would mean that we're alphabetical there. Eso. Another thing is that the names can actually begin with a dollar sign or they can begin with an underscore. So start with letter, start with the dollar sign or start with an underscore. That's another thing that's important to note. Ah, lot of times you're going to see that depending on the name schema, where calling these variables something that just makes sense to the content that's being held in there. Another thing important to note with variables is that their case sensitive. So be and upper case. So this is maybe a good example. So lower case be an upper case be are actually true. Different variables. And maybe we need to put some more letters there because it just it wasn't accepting that as just a default. So you can't just do upper case one letter. You have to do multiple letters. Eso always keeping that in mind as well. But so it is case sensitive. So it matters. What What case you're using within your naming convention. And also, lastly, you got to make sure that your name naming at any of the reserved words So I can't have a variable cult false because again, this is just gonna throw everything off. And there are a number of reserved words. So always be careful when you're using these one word variables. So if I call it false d that I'm fine. But if I just call it false, I'm not fine. So make sure that you're naming convention, doesn't interfere or doesn't override any of the reserved words. So so a reserved words must be avoided. So there's the four basic rules of creating a variable identify air for your for your JavaScript. Now, I did promise that we want to do something a little bit different here. We're gonna actually combine some of the information that we had within the previous lesson . And maybe we want to output that that content out into our HTML. So let's jump back into here. I'm going to give it a Chuan and close off that each one and I'm going to give it an I d of I'm just gonna call that would put their jump back into our JavaScript. And do you remember how we did that? Where we got the elements and we were able to update the inner HTML? Let me show you another trick within javascript. Now that we've introduced variables, I can set a variable. I can call it outputs already. Have it out put here. So we're just gonna out, so just call it out, Put content. So again, it could be something long as well. So this output content variable is gonna hold the document where we're doing get element by i d. And then remember, we got to select that element name. So that was output. And then that's it. And so what do you think is going to get contained within this variable? So what I can do is console. Log that out. And now let's go back into our browser. Refresh it. So I know we gotta click a bunch of stuff there, so we see that we don't have anything defined for prompt because I didn't add anything in there, but we got that air there. But important to note that we do have that element information now sitting within that variable name, and now we can actually make use of it so we can do something like this and then remember, how did we output that HTML. Would you enter html? So now that this element that was contained as an object, we're using it in a variable. So output content now stores the same information that's contained within document. Get element by eat by I d output, and we can utilize it in a lot neater fashion where we can use prompt there. And now let's see what happens. Test and okay. And boom. See, we've got a test output. There were getting still that error in 11. It's trying to console log out prompt. And that's because I changed it to prompt one. So that was why we're throwing that error. So again, test output. We see we get the output. They're numb, is not defined. That's one of the problems. When I'm updating, updating the names of the variables on I'm not updating them all within the source code. We're getting a bunch of errors. That's where those air coming from. So again, let's try this again. And now we just put put a name there. So who are you? Updates the HTML and we see that within our consul as well. So this is really how we can start making our code even more interactive. And we can start doing a whole bunch of really cool stuff with JavaScript. And I'm gonna show you even more cool things that you can do with JavaScript coming up in the next lesson. 10. 10 JavaScript Arithmetic Operators: in this lesson, we're gonna look at working with variables and also operators. Now, what operators do is they actually allow us to do some calculations or look at some conditions again, depending on what our code is and how we want to interact with that coat. So let's take a look. And we're gonna open up code pen because I wanna have a way to actually output some of that content. Uh, I'm going to give it a div. Give it an I D. Of output and I want out. Put some of that content out here within my HTML view here. Eso let's save this and then go down to our JavaScript area. And the really neat thing about code pen is that you can actually see whenever you're out putting anything there, it shows up here on the right hand side. So let's first of all, let's set up our output variable. And do you remember how to do that again? That it was documents get elements by i d. And when we do get element by i d. We need to select that element name and you notice a swell. Sometimes I'm using single quotes, sometimes amusing, double quotes. It actually doesn't matter. You can use single or double. Sometimes it is best practice to use double quotes. So I'm gonna use double quotes for this example. I can console log out that output there if I wanted to, but and giving me a message here to see that. So I'm gonna go ahead and save that work. So now if I go to the consul there, I see that I've got that output there. So everything is connected and ready to go. And now I could just do output dot inner html and equal. Hello, world. We can see that it gets eight. Put there. So what's happening within code pen? It's rendering out the html here within the visible area. And then it's also it's it's ah, then rendering out the JavaScript and running that that code, there s Oh, this is gonna be ideal, actually, for try to make this Ah, a little bit smaller here, and I'm gonna show you more about operators so operators are so super useful. Eso First of all, let's take a quick look and we'll look at some very basic ones. So variable a and let's give this one A number variable B And give this one a number as well. And we'll do variable see equals a plus B. So what do you think If I do variable See is my out put here? What do you think happens? So when I save it or it actually beat me to it. It's already got the 15 out there so we see that we're able to do simple calculations using JavaScript. Eso Let's do another one here so we can change that to a minus sign. So we end up with negative five. So five minus 10 equals negative five. We can also do multiplication eso five times 10 is 50. We canoe even more complex formulas. So JavaScript is super smart, so we can divide it by 10 and we end up with five. So a times B So it's 50 divided by B is five. We can add in some numbers here as well, so he could do 555. So it takes this and does all the multiplication and the addition and then division. So we can really do quite a bit with with all the different the different operators that we have available. So these air our arithmetic operators. So these what we're using here? Arithmetic operators, eso plus minus multiplication division. There's one other one and this one's called module ISS, so it gives you the output of the remainder. So if we do that and module ISS B, we see we've got a remainder of five s, so basically it's doing a division and then it's giving us the remainder. There s O. This one also has some some uses as well. We can do things like we can dio c equals C plus one. So we incremental by one s Oh, this is short form. Instead of doing C equals C plus one, we can just do the two plus signs. Same thing s so these two are equivalent we can do Ah minus So we can do C minus one. So you see that the number changes to six eso. These are all arithmetic operators and they give us the ability to work out mathematical kelp calculations within JavaScript. So the next lesson where you look at some comparison operators and we did briefly look at conditions and with conditions, conditional statements you do need tohave these comparison operators, and this is where there's Boolean values come into effect as well. So let's take a closer look at these in the upcoming lesson. 11. 11 JavaScript Operators: in this lesson, we're gonna look at comparison operators. So what comparison operators do is they allow us to compare different values together. So if we have a comparison operator, if we have a and we do equals B, we see that we've got a value off false. That's our first comparison operator. But we know that a is not equal to be so. If we do a not equal to be, we get a value of true, we can also do a greater than be so we see that that's false because we know that is less than B. We know that we can add in the equal to as well, so it could be less than greater than equal to. And these are all different comparison operators that used on a regular basis and notice that the output is Boolean values. So these convey be Boolean values can only be the to true or false. So it's only the two values that get returned and we see that we get those words returned us. We've got A and B. There's also one other comparison operators, So let's do variable d and let's do something like this five now Do you think that A is gonna be less than or equal to deep and we just give it a second? It says true. So a is equal to deep eso. This is the interesting part about JavaScript is that we see that even though that this isn't defined as a number and this one is defined as a number because it doesn't matter that the two variables have different types, they're still equivalent. And this is because when we do this equal sign, we can add in ah, third equal sign to test to see if the type is the same. So the third equal sign is checking to see if the type is the same. So if you want to make sure that absolutely a is equal to be or to D, then we use the three equal signs to make sure we get that absolute check off that output. So next we want to look at another operator, and this is gonna be a really short form for a conditional operator. So it's another way to check to see if something is true or false, and output of values we're gonna do variable e bearing a change this output toe put the value of eat and we're gonna equal e. And this is another another operator. So this is known as the assignment operator and we've been using this quite a bit earlier as well. Toe sign values to different variables. That's assignment operator comparison, operator. And now we're going to do a conditional operator. Eso conditional operator allows us to set a value for a particular variable so we can do something where we've got this, uh, rounded bracket and we've got to values. So this could be true and not really true, Boolean. But we can do something like where we got false as well There. Eso basically what's happening here is if the condition is met so a is available, then it comes back true. And if the value of e is not there, then it comes back false. If the value of f we're gonna see fought or we're gonna throw an error because we don't have a value for f quite yet, if we change the value of B 20 and we do a value of B so we're evaluating to see if B is there and it contains the value of zero, so it's a null value. So it's coming back as false, and this also gives us the opportunity to introduce another type of operator. And this is the conditional operators. Eso these air used within conditional statements as well so we can do and so weaken do if b and A it's still coming up false. So we need to change and to or so be or a And now we see it's true because actually a exists B doesn't. So it's taken the first condition, which is true. Eso again. This is a string value, so it's not bullying. True, it's a string true, we can also do. Uh, if B is not there, then it's going to come back true because B is not there those air, the logical operators, they give us the ability to check to see if a certain condition is being met. So we've got different options there to make those comparisons. So I'm gonna go back, and I'm just going to do if B and a that's gonna come back false. And of course, this is a short form for conditional statements. Eso the good thing about using it within this type of format is that it's It's a quick and easy way to set a valid of value for that particular variable. But if you've got more code that you need to run within that condition, that it's best to actually use a conditional statement, so that's what we're gonna look at in the upcoming lesson. 12. 13 JavaScript Conditional Statements and Switch Statements: in this lesson, we're gonna look at conditional statements. And that's the if statement and briefly in the already a lesson we did already. Look at a short pan form for conditional statement where we saw If this if this condition is met, then we do something, and if it's not met them, we do something else. So we can actually do this within a conditional statement as well. And let's set one of those up. So let's take a look and maybe create some variables. So I'm switching back into the editor and I'm going to do a equals five and variable B equals 10. And now let's create a condition. So we're going to do if and if a is maybe equal to be, then we want something to happen. So first, maybe we're gonna do that. I would put So do output content. Inner HTML equals they are equal, so let's, uh, actually let's make them equal. So A and B are both five. Let's open up our browser, refresh the page open. Need to see that now, When we refresh it, we see they are equal because A and B is equal to five eso now Let's also do something. Well, what happens if we actually change it back to 15 or something like that? So let's refresh it and we see that nothing gets output. And here is where we can add mawr information to this conditional statement where we can do else and then we can do. Maybe output that content again. They are not equal. And let's go back out to the browser and refresh it, and we see they are not equal. If I update it back to five, we see they are equal. So essentially, that's how conditional statements work we can execute. I end. The benefit of this is we can actually execute a bunch of code so we can console log out and could do something like happy or some whatever we want. We can have a whole bunch of stuff happening within here within this condition so we can do that and that not and let's just show you so we can run a whole bunch of lines, a court ending on what happens with the condition and if the condition gets met. So what happens if maybe you want to do a new additional option there so we've got. If this condition is true, then this happens and else this happens. But what if we want to look at something else? We wanted to see if maybe else And we had another option here and we went else if and this is where we would have something else happening within a bunch of code here. So maybe here we can output and we can say they are less than each other. I know that probably doesn't make a whole lot of sense, but this just gives us another option here. So let's just let's go. A If a is less than B, then we're gonna have this coming. Eso Now let's update this to 10 and make a is less than B or a is less than B. Then be so just do it like that. That that would put now is going to say a is less than B. If a is less than B and make a quick update here, if they're equal, it's going to say they are equal. And if a and B. B s 15 or some other number that is larger, so a is less than B, which is true again So let's actually make this look eso that that statement is no longer true and we can see they are not equal. So that's the default one. So if it runs through the 1st 2 conditions, those 1st 2 conditions don't get met. It just runs the 3rd 1 What if you had a bunch of things that you are actually looking at? You could add in mawr else if statements, but you could also do something else, and you could use what's called a switch condition a switch statement. This works in a similar fashion to the if statement, but it actually cleans things up quite a bit. So let me show you how that works. Let's make some updates to this code here. We're gonna leave a as five, and we're gonna add in our switch statement, and the switch statement is gonna be based on the variable a we can use. We can use either integers or we can actually use string values. So maybe let's get rid of all bunch of stuff here, and I'm going to just use a switch statement. So we've got our switch statement here, and maybe this is not five, but it's equal to a. So now we're using this as the switch statement, and the first thing we need in the switch statement is a case, and the case basically checks the value of a of A is equal to a than let's let's create another variable here. Let's update this to be output and variable B is just gonna be blank. So let's set be. So if this if a is true, then B is going to be equal to a waas found and then down here a the bottom I'm gonna do output and then inner HTML equals B. So that way that what I've done here is I've given us the ability to set these variables instead of having to do this output. Inter html Here. Every time we meet a case, I can just set a variable and I can make updates set variable And then this will now become an you output. Let's take a look at how this works within the browser. So eight was found. Let's go open this up again and let's do another case. So what happens if a is actually equal to Tiu? Set eso we could add in another case and we can check to see if it's equal to be, and then we can do B equals v waas found and so on. So let's see what happens now. So refresh it. We end up with blank because this value for B never actually changes because none of these cases got met. So this is where we can add in a default. So the default is gonna be that be it is equal to not found, and we'll save that. And now let's look what happens. So I refresh it. I get the default of not found because it goes through. Casey doesn't find it case be and doesn't match up to Z, and then it just shows us the default. It overwrites. One original be value, is there? Maybe you could just leave that as blank. So this now is just saving us the trouble of actually doing this output Inter html holding a very letting the variable hold that output content that we want to use. So let's switch it back to a and I'm gonna show you one of the thing that you need to add into the case because we have a problem here switch a back to a and now let's see what happens. So we end up with not found still. So this is different from what was happening before. And what's actually happening here is that we're matching a and it's going not found. B was not found, and it's going to back to the default and not found because we're not actually breaking the switch statement. So we have to always include a break and another break here. So what this does is essentially, if case a isse found it sets this about it, runs this set of code and then it breaks the switch statement so it doesn't actually end up at the default, and we end up with the proper value that we're looking for. Within that switch statement, let's refresh it and we see a was found. So that works. So and the good thing about thes switch statements is you can really have quite a lot of them. You can really build out your code, you can do a whole bunch of really cool stuff, and this really saves a lot of time over the conditional statement because we only have to really have this one line of code and we're actually looking for a match. And until we find that match, then that's at that point when we write out that new update. So now we've got the was found and so on. So all it's doing is it's looking for the value of a So a is the value of a is D. It's going into the switch statement and it's waiting to see if the case matches. And if the case does match as it does in this line here, then it sets the value of B to this and then it breaks the switch statement so we don't end up at the default. And if none of these air true than the default just runs and it ends up with B equals not found and then just down here, we're out putting the value of B to the inner HTML. So in the next lesson, we're gonna look at looping in JavaScript, and that's another really cool function within JavaScript That's going to save you a lot of time on and provide a lot of really amazing functionality. So that's coming up in the next lesson. 13. 15 JavaScript Loops: in this lesson, we're gonna look at looping. And this is one of my favorite things about JavaScript and a lot of quoting languages. Used, looping, looping saves you time, Let's take a look at looping. So first of all, let's it a variable or just that X and will give it a value of 10. And for looping, we need actually to set starting place. And we also need Teoh set a condition for a finishing spot. This is different types of loops that you can set. So this is the while loop, and basically it's going to continue the loop while X is less than 10. So while that condition is true, it's going to continue to loop through. So whatever amount of time it takes toe loop through, it'll indefinitely continue toe loop through until it finalizes that run through. So out one and again, I'm just gonna maybe I could just call this holder and now I'm gonna add to Holder, and I'm gonna equal holder plus folder plus and let's ah, value of X. And let's give X so a equaling holder plus holder and then after the loop finishes, let's do output. Inner html and let's put the value of holder within that inner HTML. So can you see that there? Maybe there's something missing within our loop, so let's take a closer look. So we're setting extra value of 10. So we know that excess starting out at 10 and we're looping while X is less than 10. So right now, as it stands, our code will continue toe loop, and there's nothing that's gonna actually break our code because X will always be 10. And maybe we need to set backs 21 So now X is gonna be one. It's going to continue. Toe loop were not actually incremental X. So that's what we need to add in. We need to add in a way to increment X and going all the way back to one of the earlier lessons where we can increment X by one by doing the two plus signs that short for X equals X plus one. And this will increments X by one and eventually breaking out of our loop once it reaches a value that's equal to 10 than our Lupul break. And then we'll have ah value for Holder, which we can actually output within that inner HTML. And I did want to add in one more thing. I want out in some HTML there, so it outputs nice and neatly so there we go. So a loop and we looked all the way to nine, remembering again that X starts out as one and we're looping. We're continuing the loop until X is less than 10. So I told you that was really easy and pretty cool we can end up with If you want to write this out 100 times, we could so easily do that actually should be 100 and one s so that we can write it out all the way to 100. So let's do that and see how quickly it writes that eight. So there we go. 1 to 100 Uh, right now, it instantly via javascript. So did say that there's other types of loops, so there's also a do loop as well. So the principle the concept is the same just switches out the order. So always when you're creating loops, you gotta think you need these three components you need to set that initial value, and then you need tohave condition. and then you need tohave Maybe not necessarily increments, but you need tohave changing value. So you need to have this value changing constantly changing in order to eventually break out of the condition on then end the loop. So let's saw it take a look at how we can do a do loop. So a do loop again, A very similar idea to the wild loop. So we've got do and we're gonna have X incremental in here and then within here we're gonna do looks very similar and only thing at the end here, we're going to do a while. So we add the while here at the end. So the while is the condition, and some developers prefer this type of output as a police to this one. So I can actually comment this one out now and now let's go take a look at our output and maybe we don't need to go all the way to 101. That's maybe a little bit too extreme. So refresh the page 1 to 9. The same thing. Output is the same. And this one, But the difference between the while and the do loop sometimes developers like to separate at that condition. They like to have that changing value and then they like to have the code. They're separated. So not really a whole lot of difference. The output and the result is that exact same thing. And then there's one other type of loop, and this loop is super common. And actually my most common way that I usually do loops I usually use the for loop eso again the same thing we need to meet a bunch of these conditions and we've got our code that runs through there. And actually, I find that this one, sometimes it's a little bit neater. Eso again. We're doing that same thing where we're starting out with the default value for X, so I could just take that over here. So we're keeping everything all within one area are condition is next. So while X is less than 10 and then lastly we're gonna increment X. So this gives us the ability. Teoh, Really. It's pretty much self contained, much different than the other ones there, and I don't actually even need to set that initial value for X. Let's take a look and see how this outputs. So again we see it's the same thing, same output and just done in a different way, where we're using the four loop eso depending again on what your circumstances and how you're out putting your content. You may choose one over the other eso most the time you're going to see the while loops. And most commonly, I would say, are the four loops. And it's always meeting these three conditions that you need to have within your loop formula in order to get that going properly. In the next lesson, we're gonna look at super powerful part of JavaScript, and those are functions, so programming and functions go hand in hand and they allow you to build really amazing things. So those air, what we're going to be looking at in the next lesson are functions 14. 17 JavaScript Introduction to Functions: in this lesson, we're gonna be looking at one of my favorites, and that's functions. Functions essentially give you the ability to create some reusable code code snippets that you can easily call to so much like what we did with the variables where we had them holding a value functions can be thought of as a way to hold more than just a value but a set of court. So first of all, define a function. So this is my fun, and this is how we create a basic function. So now we've created a function called my fun. And then within that function, whenever we want to call it, we just simply out put it here so we can call the function. We can call it multiple times if we wanted to. And maybe for now, we're just, uh, console Log out function. Run. Let's go look at our browser, see what happens. So refresh it. We see that we run the function once, run the function again. So I we see that our function run their console log is still being run online. Four within our code here because we're just calling over the function so quick and easy way to create a reusable code, and we've actually already seen functions when we saw alerts. Format is the same, and these air just built in functions within JavaScript within that window. Object. Remember, when we're looking at alerts, same format as the my fund and just a quick and easy way to to create some reusable court? There's quite a lot you can actually do with functions. And there's also arguments that you can pass within functions as well. So let's say, for instance, I wanted to pass an argument of a and then this one waas hello. And then this one was world. So we actually differentiate them. And let's, uh, how'd that into here? So now what do you think is gonna happen now? We're running the same function twice, but we're actually sending different parameters. Different arguments into that function and then within that function were actually taking that value that was passed within the argument. And we're doing something with it. So let's see how that looks. So we see that the first function runs and we get function run. Hello function, run world. So what's happened here is that this argument actually got past, it got set as the value for eight, and then we were able to output. I'll put a within our JavaScript, take a closer look at functions, passing values and so on. So we can also do something where we've got what's called a return. So maybe we wanna return this value back to the initial function. And maybe what we want to do here is we wanna let's set another holder value another variable for holder. And now what we want to do is we want to run holder and we wanna do Holder equals holder, plus that function and we do the same one here and let's put the value of holder there. So let's see what happens now. So we see that we've got the output function run, hello function, run world. And what's happening now is that it's actually this function is actually returning of value , and the value that's returning is being written out here. So now we have the capability of taking a variable or parameter passing it into the function, making use of it within our within our function and then returning it. And the beauty of it is we can pass multiple arguments in We can pass, um eyes integers weaken possum as bowling's. So now we've got a plus B and maybe, let's just to be will increments be within the function and will do B plus function? Let's see what happens now and maybe we just set these both to be the same. And we should also add some HTML. So just a line break there at the end. So it looks neater so you can read that out better. Let's refresh that and we've got six function run. Hello six function run. Hello. So what's happening here is that every time we're passing five, it's taking the be the variable B is taking that value of five were incremental in it and then we're returning it that staying as a value of five. But what happens if I wanted to use X? So I've got excited here, So I'm gonna increment ex every time that the function is run and instead of returning be, let's return fax instead analysis. Go take a look at this and see what happens. So remember excess Starting out as one, we run the function X increments to two returns This bat value the string value back to that initial line A code that called that and then accident with holder. And then it runs it again. Adds it in with Holder. And that's where we're getting all of that output coming into coming into play. So I know what you're thinking. You're probably thinking, Well, what if I have a variable A and I've said it to hello or something like that? Or maybe not Hello, but new value. So now I've got a variable a here. I've got a variable a here, and I'm returning a variable a here. So what do you think is gonna happen here Because that variable a that we're using within the function on Li lives within this function. So variables that are set within the function. So if I was to set a variable see and I gave it a value here, so set a value of test and then I go all the way down here and I want output that value of C. So maybe we can do plus C or something like that. So this is actually going to throw an error because that value of C is undefined because that value of C got defined within the function, so it's only sitting locally within that function. So to summarize all of this, we're actually have different scopes. So we have what's called the global scope, and then we have the local school. So anything set outside of the function is contained within the global scope because we have access to it within the function. We have access to it outside of the function, but anything locally within that function is self contained. Unless we're returning it as a value and then picking it up on the return process, then that's the only way that we're actually able to get calculations and updates of those values back out into out into the global space out of the local space out of the function. So for the most part, if you want to use variables, use variables that are specific within the function. Make sure that you're not using variables that are defined as global variables because within the function they're only gonna be available within that function, and they're not gonna be taken those values from the global's. But if you do want to use a global variable, so for this instance, if I wanted to use a within the function actually have no access to this value of a because I'm resetting the value of a within my argument. One of the thing I did want to note within this function. So what if I have something like, see, and I'm actually not passing it? Maybe this one, I pass a value of C. So just put 100. But in this one, I'm not passing. See? So what do you think is gonna happen here when it tries to run this function? It's fine. It's got the three parameters there. Three parameters here, everything is fine. We can pick it up, we can use it. But when it comes to this one, we only have two. So we have an A and A B and C actually doesn't get a value. So we're actually gonna re running into an issue here because we're not gonna be able to see a value for C. So even though it will run until we actually try to use See, we're not gonna run into any errors. But it's always a good idea that if you want to make use of all of these arguments and I don't know where that came from, but that should definitely not say case eso if we want to make use of it within the script now, we're gonna throw on error because we're getting undefined. It's not being defined within our function. So we can do something easy where we can do something like this or just put a And now, when we run it, we see that if we're not passing that argument by default, it gets a value of any and therefore we can use it within our function, even return it if we're not actually passing it as an argument in the first place. So I know that there is quite a bit of information that we've covered here within functions , and it's super useful to in order to understand how functions work. So you can either just run that snippet of code. You can return code, you can do both s Oh, this is all dependent on what you want to do with this function, and sometimes these functions could actually get fairly complex. And just remember that there's different variables, variables outside of the function, variables within the function, and they're gonna be treated differently and the function is self contained. Eso again take some time, play around with functions, get, get to know functions and get more familiar functions because they are important part of coding and JavaScript. When you've got functions incorporated, it's gonna make your JavaScript run a whole lot smoother. And you're gonna be able to apply a whole bunch mawr logic really easily and run snippets a code very easily using functions. So the next lesson we're gonna look deeper into what we can do with JavaScript, and we're gonna be jumping back into what the dom does and looking at those interactions that we could pick up from the Web user. So when someone's coming to your website there interacting with your content, you can pick those cues up in JavaScript and make your content interactive. And as we can see, we can already make a dynamic. Well, it's once we combine all of that, it creates an amazing user experience. So all of that is coming up in the next lesson. 15. 19 Making your HTML page interactive and Dynamic with JavaScript: Okay, I know I've said this before, but I do have a few favorite parts to JavaScript, and one of them is the interactions. So when you can create interactions for Web users, you really enrich their Web user experience. So this lesson we're gonna be showing you how you can create those interactions with Web users by taking in their actions that they're doing on within your Web application and doing something with those. So I've got that i d output here. I've added in hello world. There's we can actually see some content in there. And I've set that variable output equal to document get element by E di i d output. So, basically, output is still holding the contents of this element object. And all we're seeing here within this output is that hello, world. So wouldn't it be nice if we could click hello, world and actually have something happened? And this is what can be done with javascript and the dawn. So we've already seen that within the dom. We've just got a whole ton of stuff that we can see within these elements, and we see that we've got these event listeners. We've got properties and we go into the property's and out of any element we've got on Click on Change and on Blur and whole bunch of these event listeners that are available. So I'm just gonna go back over here because I know that's showing up fairly large, have got it enlarge. So I don't want to confuse everything with that. But let's just go back to picking up this element and making it clickable. So this is gonna be surprisingly super easy. And let's, uh, let's set up a function. So we already saw it last less than how we can have a function. And so we'll call it My Eve and then within this function will console log outs. Wow, because really, once you see how easy this is going to say, Wow, so now we need to have something to trigger this function. So we saw before that we had a function we could do something like that, we could run the function and so on. So let's take this a step further and create use that eight put object and put an event listener on there. So just like we did when we saw it was going to quickly go back to here. And I know this is quite large and distorted here, but this is under elements properties within the chrome browser. And we see we've got this on click object and just like we were accessing that inner HTML were doing the exact same thing for the on click. So we're simply doing the on click here. And now we need to have something that fires off when that event gets clicked. So we're not Equalling it to output as we did with the HTML, but instead were equaling it to ah, function. So we want to fire off my eve and notice that I don't have to include those the rounded brackets. So I'm just gonna put my eve there. Let's go back here, refresh the page and now watch this within the console. Pretty cool, right? I can just keep clicking it and it's got that event listener on there. And whenever I'm clicking it, I'm out putting while within the console. So basically, this means that wow, we can really do some pretty cool stuff within our JavaScript. So let's makes ah combination of some stuff here so variable and we're going to set X as one Every time it gets clicked, will increments X. And now we're gonna out put some content So we've got put in her html and let's do quick number and we're gonna add X to that and see what happens. So what do you think is gonna happen here? Every time we click that particular element on our web page, we're gonna fire off the on click event listener and we're gonna fire off this function. This function is gonna increment X where we set their initial value toe one. We're still gonna have this console log while because definitely we don't want to get rid of that because we do want to see that wow popping up every time. And over here I've taken that same initial object that I had here and I've done what we did earlier. I guided inter html and I've set a message in there. So let's check this out. So I click it click to click three click floor, click Five clicks six, Click seven, Click 10 11 and Salon. It's a really cool rate because now the Web user can fully interact with your content and your content is actually dynamic, depending on if the user is interacting with it. Something's happening and something's changing. And this is what really is at the very heart of JavaScript making things happen and making those seamless, amazing interactions for Web users when they come in and interact with your content and have something happen back for them. And we saw how really easy and simple it is to do with just a few lines of cold, we can create some really cool interactions. And as we mix things together that we've learned in the earlier lessons, we have a whole bunch of functionality that we can output here and we can do. We can even do things like we can include the loops there. We can include additional conditions so we can say something like if X is equal to so if X is. Or maybe if X is just greater than five. And over here we've got variable and message equals click. So we'll just do this one, too, as a dynamic part of the output and captain eat together, get rid of that. And now when X is greater than five, then let's put our while message in here. Wow, Lots of clicks and salon. And now let's see what happens when the users coming. They're interacting, Click to click three, Click four, Click five And now Wow! Lots of clicks. Number 6789 10 And maybe even here. We can have something else happening here so we can have if, if it's greater than five and X is less than 10 that we're going to that message. But if X is 11 or greater than 11 stop clicking me. No, we've got all kinds of interactions, and this is what really users love. They love to engage with content. They love to see things happening, things changing and really the Web page responding to their interactions. Now, of course, you can really begin to build this out and create some really cool interactions for Web users. So we also have Not only do we have this type of functionality, weaken do some other things as well within these event listeners. So there's not only the clicks. So if you remember, when we looked at the dawn, so going back into the elements, we went into the body here and we saw that we had not only on click. We have a bunch of different ones. So let's take a look at those in the upcoming lesson will take a closer look at these and we'll see which other ones we can apply. So we've got ones here where we've got mouth silent mouse over eso. Maybe we want to do this increment on mouse over, so let's take a look at that in the upcoming lesson. 16. 20 JavaScript Event Listeners: in the last lesson, we looked at clicks and how we can make things happen with a click. So let's go go even further. And instead of a click, let's take the other object there. So going back to the elements and we saw within each element we have all these other ones. So this is another neat one on mouse over eso this one here. What's this? Coffee? That one and step on click. Let's do on us over and stood in my eve. We're going to do my Eve one. So close that off. And maybe the message here is off my Helen. So get off my elements. Whenever the user is over it, it's going to say, Get off my element. Let's refresh it and actually thrown an air there. So my ive is not defined because, of course, I didn't define it, so it's jumped back into this. Refresh it, and now whenever we are on top of it, we see that get off of my element. We're still having those increments. Stop clicking me, refresh it, get off of my element. So there's a lot of really cool things happening here, and we do have quite a large selection of different event listeners that we can choose from as well. So there's also another way to add event listeners onto your onto your elements. So I'm gonna take another look at event listeners. And so, in this way we saw that we can do these on clicks on mouse overs and going in that same type of format. So I'm gonna do another one here wearing and use that same output object. But we're going to use the built in function called ad event listener, and this guy also gives us the ability to add an event listener so added on Click. And then here we can fire off a function. So my ive is the function we want to fire off. So I can I just comment this one out, and I know this one's kind of annoying, So just comment that one out as well. Go back and refresh it, and we see that this is another way to add an event listener. Eso these air two different ways of adding event listeners, and the difference here is when we add event listeners within this type of format, we can add multiple events to the same element without overriding existing events and then at the same time as well as we're adding event listeners, we also have the ability to remove event listeners. So a bench that basically this gives us even more control. So we've got another option here where we can instead of add event listener, we can remove that that listener and on click function. So basically, this is going to remove that event listener. So now we're adding it. Now we're removing it. Eso gives us more control, whereas over here, if we're setting an on click, we have no way to actually remove that event listener so more control. If we're using the built in functions within JavaScript in order to control our event listeners and essentially all the stuff that you can do here you can do here a swell. So you've just got them different. So you're not using the on you're just using mouse over mouse move and so on. Instead of click, we can odd most move and so on. So in the previous lessons, we've gone over a lot of really cool things that you can do with JavaScript and in the next lesson. We're gonna just look at other ways to contain and hold data such as a raise and objects. So we have been working with objects because this is actually an object, so it's not just a variable, so it's not just one piece of content. There's this is an object. So we're gonna look at how objects work and how a raise work in the upcoming lesson. 17. 22 JavaScript Arrays: in this lesson. I want to look at another container toe hold value within JavaScript. So, previously we had looked at variables where we've got strings, We've got into jurors, we have Boolean values. It's another way to hold values. And this way we can actually hold multiple values is to use an array variable my array. So again it looks the same way as we do our normal variables where we set of value here. But we need to define that we So we have two different ways of setting up a raise where we can set a new array and then within here, we can set all the rate object information. So too three and so on. Or we could do variable my array. And we can simply just do the square brackets. And we can have all of that content here contained within here as well. So two different ways to set up a raise and we go back out here. So it really doesn't matter which way we're setting up the rays. We get the same elements and the same structure. So most of the time you're going to see that within JavaScript, most people are using my Arabi this type of format because it's the literal way and it's quicker and easier and more readable. So let's just stick with this one for now. And now What? What happens if you actually want to put some of that content from the race again? We're going to use that inner HTML. It was great to get familiar with working with the dawn and we want. We see that within this array we actually have three items here within the array and with a raise. It's important to note that they start with zero. So if we look at that first item in the array we selected as zero. So now when we go back out and we refresh it, we get the first item in the rape. And this is another thing. That console log is super useful for, because if I want to see what my Henry actually looks like, I can console log it out and I can see the structure of the rate. So I see that the first item is one second item to third item three. Now let's see, we want to make an update to their rate within JavaScript. There's a number of different ways to do that. We can set different values as well in different types of four months. So I could do something where if I wanted to update item number zero and I want to set up two new value, let's go back, refresh it, see what happens. So now we've got that new value within their ray eso we see here within that array object that value has changed. This is one way that you can update the values within the array and another thing to note within a raise so we could take string values. We can take a number of values and we can take bullies as well. So all of that is available within the rate as well, so important to note that there are some different methods that we can use within to get more information about a raise eso if we wanted, for instance, we want to know how long are arrays. We can use the length. So notice that here we've got within their ray. We've got all the items. But we also have an object here what's named length and this is all we're gonna be using in order to get actual length of theory. So sometimes it's useful to know what how many items you have in their race. We see five again, starting at zero. So that's always something to keep in mind that it always starts. At zero. We can add items into the race of who want to add an item in the next available slot within the array, we take that name of the Ari we use push function. And then here is where we would put how did this going back out. And now we can see that within the array we've got actually six items now. We've got added this there at the end. So you see, our value here has gone up to six, and with the Rays, there's quite a lot of different things you can do with a raise. So we saw how we can add things in. We can also remove out of the armory as well. Let's say, for instance, we've added this and now we want to get rid of it. So all we have to do is do a ray pop, and this will automatically remove that last one from the Ari. So now We're back out to what we started with within the array. And there's a quite a lot of different methods that you can utilize within the worry. Eso you can actually pull out that value a swell. We saw how we can push in values into the rate we can. Also, I remove out the first and we can shift the rape. So let's let's show you that one as well. So again, it's just giving the name of their rate, the value there and then the basically the function that we want. We want to run. So if we shift it and let's maybe console log that ary again here at the end. So let's refresh. And now we've got eso. Now we see that the ray has changed, so we've taken off that first item. So the one that was one using the shift and we've also taken off the last one using the pop method if we want to add an item. So we saw how we can push on item into their rate, so there's another way to do that as well. So because we can remove out the 1st 1 we can also add in and item there in front of that 1st 1 so we could do an unsheathed. And let's refresh that again. So now when we unsifted we added an item. So we removed it with a shift and we unsifted and we were able to add that back in So again , quite a lot of stuff that you can do with a raise. We can also delete out certain values so we can delete out elements S so if you want to delete a specific elements, weaken, do delete and a ray and then we just need to specify which index item it wants to remove out. So we want to remove out whatever is in position to, so it's refresh that again. So now we've removed out. So we've got added this to So we've removed out this value because it was the second item here within the rate. So we removed that one note and eso That's another way that we can pick out different items . We can remove out elements as well with this place. So I know there's quite a lot of commands here that we're doing a lot of different methods . Eso it's important to get become familiar with ease because a raise or really, they have a lot of power within JavaScript. So it's quite a lot you can do with the race. So let's try this one. So array and splits and what's place does is it allows us to select the element that we want to remove and then how many elements we want to remove. So let's say, for instance, I want to remove the first item and I want to remove just the first item. So it's gonna be 01 And again, I guess we're gonna print out that a rape so that we don't lose track. So again, we are able to remove out that 1st 1 We can update these parameters as well, so we can remove out two items if we wanted to, so just keep an eye on that one. So we removed out, added this, and to remember we've added them in and we've removed out items. So this is all just working with these arrays and manipulating them. So you saw how we can remove out to starting at Index one were able to remove out two items out of the area. We can also, uh, so pretty much everything we can take out. We can actually do the opposite as well, so we can actually spice in to the array. So if we specify that, we want starting at zero, and if we actually don't want to remove any elements, we have the ability to add them in using splits as well. So let's start at position one this time, and now we're going to specify one and two. And now let's see what our array looks like. Bar Array now has one and two because we've added it in at the first position and starting at and we're not removing any, so we've got a zero there. If we had a two, there would be removing two and adding into and so on. So quite a lot you can do. Once again. It can get fairly complex with the raise, but it just goes to show that there's quite a lot you can do with the rays. And once you have here your values sitting in with within one array, then you can work with those values a whole lot easier, and it opens up the door to more possibilities. What you could do with your data. So speaking of data and ways to hold multiple values within one variable, let's take a look at objects, and that's coming up in the next lesson. 18. 24 JavaScript Objects explained: in the last lesson. We saw some really cool things we can do with the Rays when we hold multiple values within one that variable. That gives us all a whole lot of possibilities, and the same thing goes for objects. So let's set up a object. Looks the same way V. A. R is how we define it, and we're just going to give it a value here of an object and objects come impaired values . So basically, that just means that we've got a name for each item within. So let's just call it name and it's a paired values. We have a name, and then we have a property value. So essentially, this is the name of the property, and then we have a value for the property. So let's put a value in there and just like a raise, we can hold multiple values. So let's so age. So again we can do it the same way as we've done with variables, integers and lastly, let's go favorite and just one more here, So javascript eso this is essentially an object, and now we've got all of the contents of the object and let's output that first in the consulate because I like the way that the console actually displays the object information . Let's do my object. Save that. Go back out to the browser here and we can see that the object is really nice and neatly displayed here. And now we have access to all this information that's contained within the object and notice that it looks very similar to what? The Dom object the same way where we've got a bunch of names here and we have access to them and we can gain access to them within the same format as we were calling out those values so we can do something where we've got the object names. This is the object name and actual already have it here. And then we could select any one of these values here. So then this is the property name. So we can do something like my object name. And instead of just pulling out all of this, we're going to focus in on this one particular piece of information contained within the object. And we could just out put it there just as a string value. There's actually different ways that you can output content within as objects. You could also square brackets and then we just need to specify the property name. So we need to quote around there and there is ah, Riel. Ah, reason for doing it this way. And I'll show you that as well. So when I refresh it, we see that it comes out the same thing. Eso What happens, though? If I had in my object, I had a one. And let's just give this and then I hade a to and let's just do one more so a three. So name three. And over here within the console eso we've got the objects and we've got the name written like this so we can do it like this and we can get name one. We can do it like this and we can get me one. Actually, that should just be a one. Go back and make that correction. And let's just take a look at this and see what that comes up. So I've got name one and name one. So what are the things here? And let's just do one of these four loops And this is where the for loop we can see some of the really cool things that we can do with the for loop. So again, remember, with the four loop, we have to give X equals of values. We're gonna keep X at one, and we're going to do it while X is less than three. And let's increment excels X and we're gonna increment X instead of a one. Let's just add X to this and see what happens now. So let's refresh it. And we see we've got name one name, too. And we actually need to do one more here. So while X is less than four eso name one name to name three. So you see, what happened here is that we made this dynamic. So our object, we can actually loop through it depending on what we've given the name of the property. We can make it dynamic by having it within those square brackets. And that's something that we can't do over here because we can't have that value of one. We can't do a plus X and loop through it. That just wouldn't make any sense. Eso here It's a static name that we're using within this type of format. But using these squared brackets and concoct in eating it together with the plus slain. It gives us stability toe loop through and get a whole bunch of object information. So let's just log that out here and we'll take a closer look again at how that looks. So within the object. We've got a one a two, a three, and now we're just looping through those and out putting them here. And we're looping through all the different property names. And again, depending on what you're using and what you need. And within your script most the time. The best way to you it utilize objects is the way that we've been doing it. So you've got the object object name and the property name so that corresponds with these ones here. But sometimes the cases that you do need toe loop through it, and that's when you can use this type of format toe out, put the value of your object information. So the next lesson we're gonna look at some additional functionality that's built into JavaScript that makes things a whole lot easier and just going to show you some of the basic functions that are available built in to JavaScript. Toe help you write code. Ah and Teoh help you render out different functionality. So that's coming up in the next lesson. 19. 26 JavaScript Math Function: and this list. I want to show you some really cool things you can dio with JavaScript. So these are built in functions that come already within JavaScript. So let's say we had a number eso for variable A. We have a number 5.5. So we've got a function that's built into Java script called Math, and this gives us the ability to round numbers. So if I wanted to round out A I can do that here and we see that when we round out A, we get a value of six rounds, 5.5 to 6. That's one really cool thing that we can do with JavaScript. We also have within math. We can output a value of apply. So maybe up here, we'll just do math. I know how well that will work, but we can do a value of a there. So this is the value of pie already built into into JavaScript. We can also round up. We can round up, we can round down. So let's some that said another value here off B and will give it 5.5. And when he forgot that equal sign there. So let's Ah, instead of rounding a. So it's too another letter here. So do our see able to see an E instead of rounding B and rounding be Let's I Let's round it , Let's round it up So ceiling will round it up and I think I should be out putting either. So we're rounding up, so that gives us a six. That's the same as round. But let's say it had a 5.2, so it's still end up with six because we're rounding up. We can round down, so floor is to round down. So you see that that rounds it down. That's gonna make note of this one as well, so ceiling rounds up and floor rounds down. So they're just some examples of different things that you can do with with math. And then there's another one as well, so you can create random numbers, variable G equals math and it just random and show you what G looks like. So I got random numbers here, so every time we make some updates here, it should. It generates a new random number and notice the one thing about random numbers. They start at zero point and then they have a whole bunch of numbers after that, and that's how it's generating that random number. So if you actually want it, I get a random number. That's between a certain other number. Then we can do something where we can do math random, and then we multiply it by the number we want. So if I want at a number of 0 to 100 that we could see that we've got this math random 0 to 100 we also need to do another one here, maybe do a floor. So we rounded downs, we start up zero. So possibility of zeros. We don't have all those extra digits. There s so it's a way to generate random numbers within JavaScript. And the next lesson we're gonna look at dates. Eso that JavaScript also comes with dates s. So this is another one that's a built in function, ready to go within JavaScript. And you can really utilize that within your script. So that's coming up in the next lesson. 20. 28 JavaScript Date Conclusion: another really useful function that JavaScript has built in that we used all the time as developers is picking up the date so we could do something like New Date and we could see that the date gets output there. So the date time and so on, and we can also get more specific with the date where we can dio get beat of this particular object. So let's do another one. So maybe we'll change that, too, or d A or something like that, and then a is gonna be equal to, And this is where we can use that date object, and we can get something like if we want to get the particular month so we can do to get date so we know that it's the This is the ninth day of the month, so this is getting the get day. We can also do a get month, so this returns the month that it is. So it's the second so again, starting at zero. So January zero, February's one and march is too. That's why it's too. So it's not really a second month, but it's the third month, but thinking in the same format as we did with a raise. We can also do get time so we can see the current time as well. This is a time stamp from the milliseconds from January 1st, 1970. So often times used within programming. We can get hours so if we want to get the hours so we know that right now it's on the 24 o'clock. So it's 10 o'clock 10 p.m. 22nd our s a lot of different availability here that we can utilize. We can also get things like the minutes. This is something that we can update so we can get the minutes. We can get the hours so on. So it's Ah, the 53rd minute eso 10 p.m. 53rd minute and so on. So we get all of this information from the date object you can console, log out that date object so you can see even more information about it. So we've got the object. We've got the date information there, so it's not really great out of here, but yeah, we could pick up additional information because there's a whole bunch of methods that are available. We can even do things like we can get the seconds, so maybe just close that. So we've got get seconds as well, where you can get seconds out of that object. So maybe it's removed that, and we've got the 1st 2nd And every time we updated, you know, we've got the 5th 2nd and so on. So again, it's important to remember that there's a lot of stuff you can do with JavaScript. You can pull out a whole lot of information. You can actually break out that information and utilize it, saying, Get pieces of that object and so one. And with JavaScript, it's important to try it out for yourself. See what you can make happen with JavaScript. Try out different things, make some different updates here and see what you can make happen with JavaScript. And that's important for overall, with all of the resources and source code that we've provided within the lessons, try it out for yourself and see what you can do. Combine it together combined various functionality together. Just also, we did in the previous lessons. We were combining the four loop here. We're combining output of the objects and so on. So try it all together and see what you can make an make happen with JavaScript. And if you're looking for a place to practice JavaScript, code pen is an excellent resource because once again, it gives you the ability to write out some code and then see the updates happen immediately within that code. So another really great resource to practice and try out JavaScript. And within the previous lessons, we've given you a great overview of the basic functionality and the foundations that you need to know in order to build up and start creating your own JavaScript applications from scratch. And once you start creating those applications, you're gonna be amazed at how easy it is combining different code functionality and bring it all together to create fully functional applications designed and interacting with the way that you want them to interact and providing your Web users amazing experiences. Thanks again for watching our JavaScript introductory course, and if you have any questions or comments, please post them within the forum