Learn the core concepts of JavaScript

1. LearnJS: JavaScript is one of the top most popular and dynamic programming languages used for creating a developing websites on the Internet. Today, it's everywhere and used by the majority of websites. JavaScript, alongside HTML and CSS, is one of the three core technologies used on the World Wide Web and for World Wide Web content. Production is full is supported by all modern Web browsers without plug ins and ready to work without having to be compiled. All you need is a Web browser to run job, and JavaScript allows you to create dynamic Web 2.0 Contact, allowing the ability for Web visitors to be able to interact and receive a customized Web experience from your website. This course will cover everything you need to know in order to get started creating your own JavaScript, we're gonna be introducing you to adding JavaScript on your webpages, working with variables, creating dynamic interaction, JavaScript, a raise and how they were JavaScript objects, how to store data, JavaScript functions, working with the dawn, selecting elements, updating elements, mouse events, event listeners and how to add that interaction for your Web visitors. Everything about loops, conditional statements and a whole lot more source code is also included, so you can work alongside the lessons to practice and learn JavaScript. Real World Web Development Learning how to use JavaScript as a top skill toe have. This course is full of tips for better Web Devil hands on Web development using JavaScript Presented in an easy to follow step by step course, Start exploring what you could do with JavaScript today. By then to the course, you'll have the skills and know how. How to create JavaScript code and add it to your websites. I'm here to help you learn to create your own websites and ready to answer any questions you may have. Want to know more. What are you waiting for? Take this first step, joined now and start learning on YouTube can create dynamic and interactive Web content. 2. ‌1 Introduction to JavaScript: come to our introductory course on JavaScript. I'm really excited to have this opportunity for is able to present JavaScript to you. And with JavaScript, we're gonna be going over what JavaScript is. And one of the good things about JavaScript is that's an interpreted language, which means that you only need a browser and an editor, so there's no compiling with JavaScript. You can straight right out of the box, write some JavaScript code, just like you do. HTML and CSS have your browser render that out. So browser runs the browser runs the JavaScript and JavaScript is really amazing and easy to implement within your web applications. So you provided with that interaction for your Web visitors. You also have the ability to create dynamic web content, change and us customize and update that content on the fly. So some of the resources that we're gonna be using within this course our brackets, chrome code pen, and I'm gonna be going over there was in a little bit more detail in upcoming lesson. So just to introduce myself, my name is Lawrence, and I've been a JavaScript developer since the year 2000 so I've got quite a bit of experience with JavaScript and really, truly JavaScript is one of my favorite scripting languages toe work with I really enjoy. And I'm always amazed at all the really cool things that can be done with JavaScript. So in this course, we're gonna get going over how to add JavaScript, how to create alerts, prompt line breaks and even how to do some debugging and documentation within your JavaScript code. We're going to re reviewing the fundamental core concepts of JavaScript such as variables, numbers, strings, boolean soul, different types of variables. We're also going to show you how to set variables, change values, how to declare multiple variables. And then we're gonna look at a race and working with the rays and all the really cool things that you can do with the rays. So joining, pushing, sorting, and so on, then going into objects. So how to create objects and objects are really at the core of what job script can do. Next, we're gonna look at functions and why you need them. Different types of functions, how functions work, how scope works within functions of global and local, how we can pass arguments, return values. So really powerful stuff when it comes to functions, and we're gonna be covering all the basics of how to get started and using functions within your JavaScript court. Next, we're gonna look at the document object model. So this is also known as the dawn. And utilizing the dom provides a lot of powerful capabilities within your JavaScript code. So it literally provides you an entire object off information that you can utilize within your coats. You can access elements in your HTML. You can select those elements, update that element content set triggers event listeners and do a whole bunch of just really need stuff. So writing your HTML code, setting up those event listeners so on click mouse movement. So those are just a few of the things that were becoming when in regards to the dom within this course, we're also gonna be looking at conditions. So conditions provide you really essential functionality to apply logic within your JavaScript court. So you can apply if statements else statements else. If statements covering all of that and a whole lot more, and as well we're gonna cover loops, so loops another one of those core fundamental concepts and JavaScript and really saves you time because allows you to execute blocks of court multiple times saving you time. Also, you're able to increment that looped through different arrays, return back all the values and a whole lot more. So all of this source code is included. And I do encourage you to practice along with the lessons. So when you're ready, let's get started creating some JavaScript code. 3. 2 Introduction to Coding JavaScript: JavaScript is an interpreted language, which means that you only need to have a browser in order to run your JavaScript code. And what I mean by that is that you can open up any text editor and create some simple JavaScript code. Save it and open up in your browser and run that and that will get rendered out the other browser and output into your Web page. So within this course, I'm gonna be using Adobe brackets as my editor. This is a free, open source text editor that you can download for free. It's an adobe product, and it's very versatile. Easy to use editor. Easy to get started and get running working with brackets. So if you already have in text editor, you can go ahead and use that one as well. Or if you don't want to download an editor, you wanna practice JavaScript online. There's various sources where you can write some JavaScript code, such as Code pen I O. Where you can simply write some simple JavaScript and see it already rendered out as it gets written on the left hand side here. So I did. I did change my view, so you can change the view where you've got your HTML CSS and JavaScript the low. Or you can move it over to the left hand side. So there's a few options here for view. And this is a really handy tool when you're practicing JavaScript because it gives you the ability to write some simple code and see it rendered out on your display area here. So these are the tools that they could be using within this course in order to demonstrate and go over JavaScript. And as mentioned before, because JavaScript is an interpreted language, that means that you only need to have a browser in order to render out your JavaScript code . So I just got quickly show you on example of JavaScript within a Web page, and we're gonna render that out in our browser. So this is a Web page that I've just created a simple index dot html page here, and it's just sitting here very basic HTML. And I'm gonna add in JavaScript into the page and the way that we can add in JavaScript. We've got two options toe javascript. We can wrap it in the script tags, so I'm going to do the same thing as we looked at before where I've got a built in JavaScript function called alert. So I'm gonna render that eight and we see immediately when it gets rendered out, we see that it renders out this. Hello? It's the pop up box on this. Is it being rendered out as we're producing our JavaScript code? So when we say that with the it gets rendered out, S So this is one of the features of brackets because we do get this ability to have a live preview, our web code, and we see that whenever we're saving it, it actually runs the code and shows it here within that display area. So it runs it on a local host 1 27 001 It's a little bit more about brackets. We've got some options here to customize our themes we've got. I've got a bunch of plug ins that are added in and in order, add in customized extensions. You just go to extension manager and you can see here that these are all the different ones that are available. All these different plug ins that are available. We also have a whole ton of really good themes that are available. And we've got the ones. Of course that we've already installed, we can disable. We can remove them as needed. So a lot of really good built in functioning in brackets. And this is what I'm gonna be using as well to be editing within this course. So we're gonna be using chrome as our browser of choice. And the reason that I like using chrome is because we've got depth tools within Prohm. And what deaf tools are is deaf tools. Are this window here that you can open up in chrome? It's a number of different ways to access it. So I simply right clicked on a white space area. But you can go over to go over to the tools here as well, and you can see def tools, amount of windows, machines. I've got control shift I where I can open up the same thing and then within the deaf tools , we've got some information here. So we've got all of the elements that are rendered out via the browser. So when it builds up all of the elements from the Web page, we can see essentially the source code. But whenever What's interesting is that whenever we hover over, we can see the part of the HTML page that is being selected. And for those of you that are looking at the CSS, we do have some really good CSS ability here with in depth tools as well, where we can see all the different elements. And we've got the box model being displayed here. And because this is a JavaScript course, we do have a lot of really good JavaScript tools as well that come right out of the box in every version of chrome. So we've got all the event listeners which we're gonna be looking at. We've got break points, we've got properties, and this is all information that's pulled from the dawn. The dorm is the document object model which gets rendered out by the browser from the source code, and it gets built up into this all encompassing a p I where we can interact on access all of that html content. So if I did have a div here, quickly create a diff So I want to do it something like my def, so so we can save that runs through the code again. Just gonna open up that page. Refresh it. And so it runs through the coat. And now we do have an actual element here, and we can see that we have access to it. So we've got the entire Dom there. If we make up inspect on this particular one, we see that we get access to that Div. And we've got that inner text inter html. And, of course, with JavaScript. Once we get access to this dawn, then we can actually interact with it and update it and make our Web page dynamics. So I'm gonna be showing you all of this throughout the course. Eso We also have our dom listeners here. So this is I believe this is an ad on extension eso We've got sources here. So whenever we've got any source files, if we're linking out to another script file that's available a swell We've got some network information timeline, profile resources, eso Here again, we can look deeper into what's happening within the Web page code. We've got ability to look at some additional options here. And then, of course, we cantata Gle between different devices. Eso if I wanted to see it as an iPhone six. Then this is what our display would look like in an iPhone six and weaken. Fit it toe window. We can resize it. And a lot of really cool options that are available rate out of the box with chrome. So chrome is our browser were using brackets is our editor and code pen. We're gonna show you how to practice code on code pen. And then, of course, I've got one of the thing running here in the background which actually isn't going to be necessary if you want a practice. JavaScript. But in case you do want to set your system up exactly like I have it set up, I'm also running. Zam Zam allows me to have a virtual box that runs in the background, and this is available from Apache friends dot org's. So, basically, what a virtual boxes. It allows me to run a server on my local machine. So and this actually, this saves me a lot of time when I in my development work so that I don't have to actually upload stuff to a server to see how it's going to be displayed. So whenever you're working with any scripting languages. It's always a good idea to have an area where you can check it out, see what it's actually gonna look like on the server and how maybe your whole website hosted locally and try out different things, make all of your updates and changes. Make sure that it works first on your local machine before you spend all that time transferring it over to the server device. So this is one of the advantages of using local host. But of course, you don't need Teoh Download this if you don't want to, because this is only for, uh gives me the ability to go to a local host and have pointed folders over to where my work files are for this course. Eso I'm showing you that just in case you're interested in working with a virtual machine so that you can upload that on a later point. So those are the resources that I'm using within this course, and in the next lesson, we're gonna be begin creating some JavaScript code 4. 3 Adding JavaScript to your website: the previous lesson. We had a brief introduction about how toe add JavaScript onto our Web pages. So there's a number of different ways in order to add JavaScript within your Web code. So I'm gonna be going over some of those within this lesson. So it's open up our editor. And as we saw before that, we were able to add these script tags that within our HTML code and in between the script tags is this is where it the JavaScript gets rendered out. So you might see these script tags sometimes in the head section, sometimes before the body closes. And also, sometimes you might see links and references to script files. So javascript files. So I'm gonna show you how to create one of those. And there are some advantages to doing this type of linking. A lot of times you're going to see it used for different libraries. So if we're linking over Teoh JavaScript or a JavaScript library or something like J query , then you're going to see something like this where we've got script and we're actually referencing another file. So if you're familiar with CSS, we do this with CSS as well where were link over to a CSS file. And some of the advantages of doing it this way are that one. It makes for a cleaner look of your HTML code. So we don't have a bunch of JavaScript here within this page, and it looks a lot cleaner. But one of the main real advantages of doing it this way is that if I've got more than one Web page that needs to share the chord within this job script, where the script Js file, then we do have the ability to link multiple multiple HTML pages or multiple pages to that javascript that one JavaScript file. So let's go ahead and create our separate script dot Js file. I'm gonna go ahead and save that script dot Js within that same directory where my index file is s so that I can simply linked to it with a script Js. So now it's going to run through all of the code here within the HTML when it hits the script. Js file. It knows that it's gonna look for this script Js file. And if you have the path incorrect, they're going to actually see that within your within your console here within the deaf tools. So this is another really good use for the deaf tools. So let's try to create something here within JavaScript. So we've already looked at this alert, so I'm gonna simply do another one of these alerts. Are these built in functions? So there's quite a few of these built in functions that are available within JavaScript, and the alert is one of them that we have the ability to simply create thes pop up windows and see whenever I saved it that we've got the pop up window renders out and we see that it is actually working the same way as if the script. We had their script tags opening and closing here. So again, sometimes you might see this near the top in the head. And this again, this is a preference depending on what your Web developer are, how you're thinking through the logic of your application. Eso What I mean by that is that if you're placing into the head area, but if you've got some dom interaction, so we look at this as the progression of how the Web browsers render out the code, it's going to hit the script tags up here, but it might not necessarily have already rendered out the body. And if you're trying to access the contents within the my div here, which I'm going to show you later on, how we can access that, then where we won't have this loaded already when we're calling our script file and we could produce errors. So if you're interacting with the dom, make sure that you place it near the end or that you run through and allow all of the body content toe load first so you can initiate that with javascript as well, so you could theoretically still keep it at the top. But you'd have to add in some extra lines of code within JavaScript in order to make sure and check that your HTML content has rendered out. And another thing about JavaScript is especially when you're linking to external files to make sure that you sometimes they might be loading really slow. Or there might be some errors or server issues if you're linking to external files that aren't on your domain. So this is another reason to keep them at the bottom, because if if they're at the top, then the browser is not going to render out the rest of the content until it's actually ran through that JavaScript file. So is there a few things to keep in mind when you are creating your Web code? So we saw that there are a number of different ways how we can create these interactions within the Web page. I'm gonna actually just comment this one out here, so it's not going to run through the alert. And this is how we can comment in JavaScript. So whenever we had these two slashes here, we see that brackets automatically grease it out, and we see that this no longer is going to get run. And instead of not, I want to run through some other JavaScript here. So we've got our script tags and we're gonna do something like document rights, and I can actually write out hello there. So whenever we refresh the page, we see that we've got hello world and hello gets written out. When we look at the page source, we see that it's probably not a good example of page source because that's being rendered it within brackets. So let's go back over to this version of the code and we see that we've got our div here and we've got our script. And then once the script runs, then it renders out Hello, And this is not an actual HTML code. So this is all done dynamically via javascript. And typically you're not gonna be rendering it out in this type of format because of the fact that you don't wanna have a whole bunch of these script tags every time you want to create something within your Web page, you might want to try to condense that and keep that all within one file, maybe place something within the HTML element so that you can identify that and then actually update the HTML element via the dawn instead of actually writing out these these script tags or script codes where we're actually writing out content in the HTML. So those are a few things to keep in mind when you're starting to create your JavaScript. Eso take a little bit of time to plan out how you want your Web page and your Web browser to render out that Java script and try to create something that flows logically. try to keep the JavaScript within your HTML to a minimal as well and, if possible, try to keep it all within one Js file outside of the HTML And one more thing I needed to note as well. So we've got our script Js here and notice that we don't need to wrap it within script tags anymore because this is an actual script. Js, this is a javascript file dot Js extension eso We don't need to to wrap script tags around it because the HTML and the browser will understand that this is actually JavaScript and we already have it pre defined here that we've got her script tags and then this is the source of the script tags. So all it is doing is essentially taking this source and placing it between these script tags. So the next lesson we're going to dive deeper into some of the basic functionality of javascript. So it already looked at alerts. We're gonna look at prompts. We're going to get a basic introduction about how javascript renders out eso how it deals with white space, how we do line endings with javascript, and also we're going to start looking at working with variables. So variables are the core base of JAVASCRIPT. Understanding how to use variables and how to use them within your code is going to give you the basic foundation for working with code Saluda. All that's all coming up in the next set of lessons. 5. 4 Dynamic Interaction introduction: So this lesson we're gonna look deeper into our JavaScript code. So when it comes to writing JavaScript, you may have noticed that every time we write a line of code in javascript, we end it with a semi colon and not is to indicate that this is a complete statement that we've created within JavaScript and that this is the end of that statement for the rendering of that piece of or that line of court. So sometimes you might see things where we've got do another one here. So console log. This is another bolt in function that's available within JavaScript. And I'm gonna show you how this is gonna work. So we might have something like hello here. And we've got a bunch of white space, and then we've got some white space here, and then maybe we do a line break. So over here, whenever we're dealing with HTML, we know that if we add in a bunch of white space, that HTML will still render out properly. When it comes to JavaScript, you do have to be careful with white space because when you do something like this, it's might not necessarily interpret it properly and we see that whenever we're sieving it were actually rendering that out. It's moving that semi colon back there. So always be careful with white space when it comes to white space and JavaScript. Especially when we're doing things like it's gonna flip back to here when working captain ating things together and contaminating is just simply adding a plus sign. So we've got a bunch of space there, and so maybe we've got more space here, and so you can see that here. We've got the typical one space here. We've got essentially Tanase space in between, and whenever we see that, our brackets is actually beautifying that so it's bringing that back up. But be really careful with your white space, because if you include something like this, then it's actually not going to render out. So what will actually let me say that? But the idea here is that make sure that all of your statement and your content is available within that same line of code. So now when I go back out here, think it's still going to render out, even though we've got all of the spacing in between there because our brackets actually took care of that spacing. But be careful off that spacing and how we're working within our JavaScript. So let's get back into the coding eso. I wanted to show you how we can use prompt in order to get some information back from the user. So we have shown you and we had looked at the alert and we saw that alert gives us the ability of this pop up window. So what if we could take this one step further and actually pull out some information from the users so create that dynamic interaction with our users? So the reason that I want to show you console log is and going back again to our chrome browser. We've got this option here, this top called console and we see that whenever we're sending anything into the console log, it actually gets rendered out here in the console. So this is our way of sending messages between our script and some information back when we're doing our development process in order to find out what values being held and what out and we can render out various outputs. So I'm gonna show you a little bit more on that when we jump into the variables in the next lesson. But for this lesson, I want to quickly look at another pop up window, and that's gonna be the prompt. So if we want to enter a name or something like that, let's see how this works. So you see that we get this ability to enter name and once we hit, okay, then it works the same way as the alert, and it continues along there. So what if we wanted to actually set a value? So actually, hold the return value off this problem. We could do this boy doing something like variable. So let's see what happens now when we pick up the name. So I'm gonna go back into the bigger window because I did want to open up into the consul there. So when I refresh it and a hit, OK, and we see that now that input that I placed in their shows up within the console. So I gotta quickly run through this what's happened here? And this is a great introduction to how variables work because it gives us the ability to store information and then reference that information from the container. So here what we're doing, we're setting up via ours or setting up a variable. And we're setting a variable so this variable can be called whatever we want to call, it s so it doesn't necessarily need to be called my prompt, and we're equaling it to whatever is contained within this value here. And then we're able to essentially set up my prompt as a container for this value that we enter in here. And then we can call to this and we can use this value whenever we wanna run through. That prompts so we can do something like So if we write to document, right, So do you think that this is gonna work? It's gonna actually output the content there. Let's try this and see So test and we see that it actually renders that out there on the Web page. Let's go back over to our other example here, and I'm just gonna do test again. So watch what happens over here. We've got our script. Eso Once the script hits this prompt, it runs through. It fills out of variable for my prompt. Once I hit OK, it continues to render out the JavaScript and it utilises the value. So places it in the console and then also places it into our web page. So the next lesson I'm gonna show you more about variables that's coming up. 6. 5 JavaScript Variables the foundations of coding: in the previous lesson, we saw how we can get values from the user, have them input something, hold that value within variable, and then reuse that value wherever we need it within our court. And that's the very basics of JavaScript. And when it comes to variables, we can also set our own variables and create those variables and then utilize them within our code. As we progress through the logic, try setting up some of our own variables. So I'm actually going to get rid of some of this here, and what I'm gonna do is so earlier we saw how we can comment out with the one slash. So if I want to comment out the whole block accord, I could do slash Asterix and an Asterix slash to open this up again. And this is really useful whenever you're building up your code that you can comment out certain pieces of code that you might not need. And you can also use this commenting in order to give you a better idea of the contents that you're trying to utilize here. So if I set up something like a variable, so I'm just going to use something like a and I'm gonna hold the variable The value for a is gonna be string And I can use my commenting here demo a string variable so I can use my commenting here to give me a better idea of what I was trying to accomplish here. And this is one example of the different data types that we can hold within variables. So another example would be variable. So I have set up a variable. Be so for this one, let's hold a number and here and notice that I'm not actually using the quotes around the numbers. And this is gonna be another thing to note about JavaScript when it comes to dealing with actual values is that it's gonna treat these differently. It understands that ah, string value needs to be quoted around. And, uh, regular numeric value does not need to be quoted around. So this is how it understands that these air two different data types. So even though if I have 10 and 10 this one is still gonna be a string, and this is still gonna be numeric integer value. So this is into your demo eso There's another type of common type of variable. So I'm gonna just do see for this one and those air bullies. So Bolin's can either be true or false, and Bolin's air really useful when it comes to doing conditional statements where we're applying and looking at logic, eso, whatever we're setting up these Boolean values, they're either true or false. And we look at conditional statements, which we're gonna look out later when we passed them and do a logic condition. If this is true than always to do is if C and we can finish off that conditional logic. So we're building out these variables. We can also do it this way as well, so this saves us a little bit of time. So if I want to set the value of D two D and I can comma separate them so instead of writing via are we don't have to initiate them all the time. Eso I could do e equals. Let's try 10 again and so on so I could string them together in this type of format. And whenever I see that brackets again, is reformatting it there. So it's a more readable format, but we could literally we could spring a whole bunch of them together, and this saves us the trouble of initiating it. So what happens if I try to look at a value that I haven't initiated? Let so let's take a look at. So maybe I'll just use document rate again and just do a plus, and we're going to do that. Can Katyn ating again that we had looked up earlier, and this gives us the ability to combine strings together? Eso This isn't on arithmetic arithmetic operator, so it's not that it's adding them together, but it's stringing them together within JavaScript output here. So this is actually gonna trap fairly lawn and so on. So Plus, and I think our lost one is e eso. Let's just see how this looks, first of all, So let's go back out here and we see that we get string. We get 10 we get true, we get d, we get 10. So let's take this one step further. And what if I was just add in something like F? But I haven't defined it yet. I haven't created any value for F yet, so let's see what happens now. So I refresh it we get a consul error, and this is where deaf to owes is really useful when it comes to developing JavaScript. Because we see these error messages, we see that f is not defined. We get script dot Js. This is the file that has the air, and we can also see what the error is simply by clicking on it. So it's got this little X here, and it says reference error is F is not defined, so it clearly tells us what the problem here is. And of course, the problem here is that we defined a B c D e. But we never defined F. So this is where the issue is, and this is how you can start to troubleshoot your JavaScript. So if you do make any mistakes, I refer to your console and see what's going on. And it should give you some guidance and some general guidelines of the where to go along to be able to fix your errors. So one of the other things, too, about working with your def tools and comments, these air great ways to really deep bug and fix up any problems that you have, especially when you're declaring variables and so on. So one of the other things to that I want to mention here s so there are some naming conventions here when it comes to setting up these names for variables. Eso here we just called it a equal string. But do you think that it's case sensitive? So it is variable a different than variable Lower case a eso If I was to maybe say this was upper or something like that. So let's take a look at this and see what the value of a is gonna be. So let's refresh that and we see that it's still strength. Eso There is definitely a difference between upper and lower case. They can be used separately and they can each have their own contents within those values. One of the things to watch out for when you are naming there are some reserve names. So you want to try to avoid things like true or something like that s Oh, you wanna avoid those types of names that already pre defined so unexpected token. True, because these these words air reserved in javascript eso you don't want it you want try to avoid using things like that and as well don't start them with numbers. Because the thing with numbers is that we already saw how javascript deals with numbers. We don't need to have quotes around them. So if you are toe, have something called one A. And of course, brackets won't let me save this. But if we're gonna have a variable called one A. If we tried to reference it down here, JavaScript wouldn't know if I'm actually putting a value of 10 or if I'm putting value of the contents of one A. So don't start them with a number. That's another No, no, within JavaScript. So one of the other things, too here is that we do have the ability to. So if we did something like 10 or something like that, so what do you think is gonna happen now? Let's refresh it. And what happens is it simply outputs that value because of the way that javascript deals with values. We saw that over here, and we're declaring 10. We saw that over here we can declare the numeric 10 but it still outputs it separately, so we can't do something like 10 20 plus twin and we see that it simply adds them together as separate values. But these air still treated as integers because we're not quoting around them. So they're treated a separate interest. Your values, even though we've got a plus sign here. And of course, we're gonna talk about this at a later point. But it's important to understand that these air different data types and they are output here within the string. And these are understood that these are contaminated values as opposed to added values. And of course, if we did want to add these values together, we can change this very easily by using rockets, and now when we refresh it, it's gonna be 30. And the reason for that is that the way that javascript groups various pieces of content together. So for lack of a better word, I'm going to just say content or items s. We've got our 2010 but now it's treated as one here, one separate piece of content or one separate item, and it runs through the mathematical value here. So we're going to get more into different operators as we progress to the course. So we're gonna look at this in more detail coming up 7. 7 JavaScript Arrays how to use them: in this lesson. I want to introduce you to another way to store values, and this gives us the ability to store multiple values in a single variable. And this is these are what's called a raise. So I'm gonna show you how to create a raise, how to work with the rays and a raise provide a lot of really cool functionality. So before we get into a raise, I still want to look at some of the naming values here in conventions for our JavaScript variables just to finish this off. So when it comes to variables, the need to either start with a letter or they can start with an underscore, or they can start with a dollar sign. So these are the three acceptable formats to start our JavaScript variables to give them a name. And, of course, we can't use reserved words. There's also, as we've done up here, we set up a value with lower case in the upper case. So this is what's called Camel case, and this is a standard way of doing are naming and javascript in order for it to be more readable and all the time, a lot of times We do want to keep variable names in line with what we're trying to accomplish with, um So if we had something like first and then, of course, Candle case, So first name and then you have a first name there and then a last name and so on. So we start with the first word is lower case, and then we do a capitalize of the second word and so that we understand that these air two separate words and this is the intent and meaning of our values here. So let's jump into a raise and a raise they're gonna work with in the same way as what we had looked at here where we can output various variable values. So I'm going to remove this and I'm going to set up our first array. So there are different ways to set up a raise. A race can look very similar to just regular variables where we set of it, where we pick a variable name we equal it to. And then here's where our contents are. Values are, and with the race, we use thes square rockets and contents within here. So this would be where We've got all of our content for the arrays, so maybe we could just do some numbers. And the really interesting thing about a raises we can use thes default, different types of variables. So we've got strings, we've got numbers, we've got Boolean, and we can use those all interchangeably within the array itself. We can also, we can also call back to these values. So it just like what we did previously we can call back to those values and write them it within our Web page. So let's try that out. And how do you think that we could write out of value? So let's say we wanted to write out be so we've see that within the variable A we've got be . So when we do something like this, we actually write out that entire array, which is really neat because it's actually transforming it into a string value, and it's out putting the value off their rate. But we want to isolate only the one item in that array. So when it comes to a raise, we start out with the number the items being numbered starting at zero. So we need to be able to identify this and we use a key in order to identify it. So the default keys, air numeric. So if we did something like a one and saved it, we see that we're able to select out that second item. So this starts so their race starts with zero. So if we do a ray zero, we get the first item in the ray. This is the 2nd 1 So what do you think true is gonna be? What number do we have to place in here If you want to return back the value for true. And if you said four, you're correct. Eso 01234 So even though there's fighting five items starting at zero, this gives us the ability to select any one of these values that's contained in the variable A or the rate of a so one of the really neat things about a raise. It's got a lot of built in methods or built in functions that are available for the array. And if we want to add in a new value into the ray, we could use a so selecting out the rain name and do push and what this does is, as we see the indication here mutates an array by pending that given elements in returning the new length of the ray. So whenever we do an array push, So let's do something like five and will push that into the array. And now, when we raid out there race, usually I would be writing this into the console, but let's take a look and see what happens here. So maybe here I do want to add in a line break here so I can add in some HTML so we can see that there is the value of five now has been added to the end of their array. So if I want to specify and get that lost value, I could do something like that and we return that brand new item that we've added in the array. We can also get values for the array itself. So if I had something, maybe I just copy this one out. And if I want to get the length of the ray, I could do something like length, and I can actually see how many items are in the array. Remember again that starting out at zero So now we had we had five items in the array. Originally, we added 1/6 once we called it five, just to add some confusion to this course. But we've called it five are sniggering update mapped of six. So this is the sixth item, but it's gonna be referenced by the value of five. So now we see that we can actually get a value here. So let's say we want it. Teoh get the last item in the array. So no, we're getting a value returned of six, but we really to minus that by five. So let's do something interesting here where I'm gonna get a and I'm gonna return back that last item and we said that we get this value of undefined and that's because we haven't calculated this properly. So let's update this. And just like what we did before, when we want to do a calculation, we do the rounded brackets and we're going to subtract one off the end so that we get the actual value. So if it was the 1st 1 if there was only one item in the array would subtract one and we would return back value of zero in referencing a zero. So you see here that we can get the last item. If I subtract two, I can get the second last item 3/3 last item. But we have to be careful here in order that we're not going over the actual values that are in the race. So I don't want to do something like eight because I'm going to get undefined again. So be really careful when you're doing your calculations to make sure that it actually makes sense and that you're actually returning on existing value. So the next lesson we're gonna jump deeper into Reeves and I show you really some really cool stuff that could be done with Aries that's coming up in the next set of lessons. 8. 8 How arrays work in JavaScript: in the last lesson, we were introduced to a raise. So when it comes to a raise, so this was just to get the last item in the rate. So let's do a little bit more work with our raise. So let's make them a little bit more dynamic and more interesting toe work with. And as you can see, a race can be really powerful. They can contain quite a lot of information, uh, contained within them. So so how we can add on item into array. And if we want to remove, the last item would use the built in method called pot. So if I do a pop and now let's check this out and see what our last item is, because now we've removed that brand new one that we added, and we've removed it off the end. Essentially, pop removes set off the end. We can also remove off the front so we can do a shift, and we see here that brackets is nice enough to provide a Sundays definition removes the first item element of the array and returns that element. So a shift. And the interesting thing there is that, if said, it returns that value. So let's take a look at how that might work. And now let's see what we're see what is contained within our A, and we see what's contained within this new variable that we've set up. So let's take a look at that and see here that what's happened here is that even though we were removing that item, we could still pick that up and utilize that as of value. So this method does something, but it returns of value and that returned value. We could then store in a variable, much like what we did with the prompt earlier on where we held a value that we could reuse . And this value is created dynamically. And that's interesting. Word about JavaScript is that when we start creating content dynamically, then things get really, really interesting, and this really starts begin to illustrate the power of JavaScript, where you can come up with these types of logical formulas that do actually do some kind of functionality. Return values utilize these values, and we can store these values within those powerful fundamental concepts called variables and utilize them within our coat. So just to kind of jump into some or added functionality with JavaScript. So if we want to splice out some some values if you want to remove a bunch of values from JavaScript or from our Ray, So I think we're probably running out. But we should add in some additional values so we can do a splice and it changes the content of array, adding new elements while removing old elements. So basically, what that does is if I just do value here of let's say to and let's take a look at our rate again and we see that now we've removed two items off the end of the ray s o. This We can also be specific on how many items we want to remove on so on. So that one removed the last two. We can go into being specific. So if we want to remove, we can specify how we want to remove. So I think it might be for real running out. But let's try this again. So displacing out two and only returned that one starting at that value. So again, we've got the ability to splice it and see all these different values that are contained within a We can also join to a raise together. So this might be a good idea at this point where you can create a secondary as I'm running low on values and I'm actually going to join these arrays together. So in order to join a raise, I can create a brand you Ray if I wanted to. So let's try creating a variable. See, going to do this very alphabetically. And I'm gonna take array A. I'm gonna concoct Nate it with There's That word can captain eight again. So bringing those together and contaminate it with the re be and let's try this now. So maybe not do this place. Or so Let's see what this returns. So we see that we got the combination of the two arrays. Then we're splicing out those values. So the beat and three and B three again, there's another really cool thing with a raise. So if I want to set variable D and this is one of those another real useful function with the Rays, So let's join together in turn. Our rate into a string is right now, whenever we're even though we're doing this document right this is still an array value and just being rendered out as a string, so some browsers might not render this out properly. Eso this is this may be an issue, and this probably isn't the best way to render out an array. You should actually turn it into a usable string first and then try to render that it. So maybe gonna take the array, see our newly created one, and I'm gonna join it together, and it joins a lead elements of the rate and actually turns it into a string. So it's gonna return this back and change it into a strength. And we've got this option here within join toe actually create a string separator. So, whatever we want to return it back, we can actually return it back with this string separator in the middle. Eso Let's create something interesting here. So maybe I have colon align and something like that. So this is going to return back that very as variable d and to see what this is gonna look like. So now we have because we displaced this. So I'm gonna just comment this part out here and we see that the joint actually add sent this value in between them and most of time. You might not be using a happy face like this, but you can use something like a comma. So that returns, in fact, pretty much the same way as it's being displayed here. But again, remember that document right is not really the proper way to display their all the rate items might always not work necessarily in each and every browser. So always make sure that you do that joint here and output it as a proper string proper string format before you try to use variable A as a variable, a string variable when its action array. So here we see that we've got some other options here for join. And this could literally be anything we want separating out all the different values from the Ari. So quite a lot you can do with the Rays. And of course, there's even more things that you can do. So whenever you try to look at a raise, you've got the ability to sort through a raise. So if I wanted toe toe sort that array see, we're gonna do a quick soared on it and what sort does is built in function, allows us to sort the values of the race. And now we've got get rid of some of this. So see that we've got it. 3344 a. B soc that New America's first and then it returns back the alphabetical values We can also reverse sort it so sorts it in police and returns back the reverse order. Oh, yes, quite a lot. You can do with theories and it is interesting to play around with it and also really good practice to start building up that logic that you can utilize later on as you go through your your logic and build out those amazing JavaScript applications. 9. 10 How JavaScript Objects Work: in the previous lesson, we had looked at a raise, and we saw how powerful rays could be to store data. So JavaScript actually provides you another really good resource and another good way to store information. And these air what's called objects. So objects differ than a raise in the fact that they're laid out differently. But they provide you similar functionality where you can store multiple pieces of information and attached to one variable so much like a raise. So I'm gonna just set up a basic object. So format is the same. We declare a variable. We give the variable the name so a meaningful name. So I'm just gonna call it a for demonstration purposes. And then within the curly brackets of curly brackets, this time for objects, square brackets for a raise, and then within these curly brackets is where we're gonna identify the content that we're going to contain within this array. So one of the things when it comes to working with objects is that the way that objects differ than a raise is that they give us the ability to have these paired values. So we have toe identify so much like setting additional variables. We have to identify what we want toe pair this value with and then we call back, depending on the key value. So let's just give you an example off on a rate. So we have a ray values like this, and we saw that when we created a raid we do one and is going to do 12 and three just to really make it simple. And when we call back thes items and array, we just identify them with 01 and two. So these are the keys to caught. Return back the values for their rate. But objects are different because we need to identify them with paired values. So we would have something like one. And the value for the key of one is equivalent to this is the value. So whenever we type one where we're going to return back that value off one and the same thing if one add in additional values. So maybe let's make this a little bit different, and so my count or something like that, and then this will be two and then lost Lee, we need to give it something meaningful naming again so my count. And maybe I'll just do this one as third or just leave out the I there so that we're not using actual riel wording. There s so sometimes it's not a good idea. Try to avoid doing that. So, really, this shouldn't be one, but we should call it something else, but demonstration purposes again. Eso We're going to give third of value of three. And when we want to call this back, So I'm gonna do document right again to write out the contents here Or actually, maybe we're going to defer it a little bit here and we'll do it within the console log. So I got a consul log out a consul lock would be. And again remember, the way that the console log works is when we open up our consul in our depth tools, we get this information presented to us. So here we have our object that we set up. So one is equal to one. My count is equal to 2 30 efs Th rd is equal to three. And then here we have a rate so laid out slightly differently. But the idea is very similar in the fact that we can contain multiple pieces off data within this one value. So now, to be able to call back these values. So we saw that with the rays, we just give it the item number that it falls to within their rate. So if I wanted that 2nd 1 I'd cut refer to the first so objects work differently. So if I want to call this one back, I could do it like this of my count and just go back out there and show you how this is gonna work. So this gets us the second item in each one in that object and within that ray and there's actually with objects, there's different ways to call back those values so I can wrap it in a square bracket as well. An interesting thing here is that Okay, so let's take a look at this. So it's format looks similar to an array where we're calling back this number, but there is actually something different that we have to do here. So that's going to just show you what happens when we do it this way and we see that my count is not defined so different than when we're dealing with other variables and values is that we have to refer to the Serie and it's actually expecting this quoted value, and that's going to refer to the actual object. So in this case, we're using the quotes to refer to an existing object within that object, existing key within that object and recording around it. So we're not returning back a string called my Account, but we're referencing my count as the item within the object so different ways to return back that data and let me just show you that one more time. So when I want to refer to my count, I've got two ways to refer to this and two ways to handle this. And of course, you would refer to it as needed. And the really interesting thing about this is that we can create now that we're referencing it in this type of format so we can create values and words or something like that and then reference it dynamically. And this is where it gets really cool with objects because let's see, because it's done this weight around the quoted value. This looks like a string. So what if we did something like this where we took this value, gave it a string value and then placed that as a variable within their So do you think this is gonna work? Let's go and check out what happens. And in fact, it does work. So this means that we can literally have a string value. So variable d is equal to just count and variable e equals C plus dese. Remember, we're contaminating them together, returning an actual variable. So do you think this is gonna work? So now the value of E is gonna be my count. We're referencing as object with a key of my count and hopefully we're going to return back to so let's see what happens. And in fact, nothing changes. It actually does work. And we can see now that we can create some more dynamic and apply some logic Teoh the objects that were returning. And we can't do that as easily here when we're returning the object values in this type of format, because this is just referencing on my count, we're not rocketed, were not quoted were not returning as a string, and we're not able to do this type of dynamic return of the values as we are over here. And that's gonna make a lot more sense as we progress through JavaScript where we implement some more dynamic functionality where we've got some loops and maybe we want a i d a bunch of different loops. So if we had something like a one a two, a three So not a lot of times that you would do it like this, but it does open up the door to be ableto loop through these values and return them back So we could have something like that and this, actually, So let's see what happens now. So again. So we actually get an undefined with something went wrong there. So the value of a and two s a. Let's because it's returning, it probably has a numeric value. Make a few more updates here. So bring that's down to just the numeric values, and I'm gonna reference a as a value for C and give see a value of two. So see, if this actually returns back. So this way we are able to turn back those numbers. And of course, you have to be careful. And when you are looping through the values. There is actually a better way to do this. So we're gonna look at this when we introduced loops. So it's gonna make a lot more sense when we introduce loops and why we've got this dynamic capability. But it's just important to understand that there are two different ways to present these objects values. And this was one of them on What we do is we referenced the key and we can generate that key value dynamically viewed through the use of variables quickly, I wanted to still run through how we would update these values. So in the arrays we had looked at how we can update values so we can do the same thing within our. So this is actually going to be incorrect now as well, so we would have to reference it to so not really a good format. So let's just change this stuff back to what it was earlier. So we're gonna bring it back to to these values, get rid of some of this here. That one was working, and let's update some of the values that are available within our object. So if I wanted to update some of these values. All I need to do treat it just like any other variables. And we can do updates, the content where we can do a and my count and we can equal it to whatever we want. And now when we consul log out that value for a we're going to see that it's updated and changed. So we see that now we've got that brand new value and this is the It works the same way as any other variables where we just simply reference the variable and we can make updates as needed. So the next lesson we're gonna look out one of my favorite things about JavaScript, and that's gonna be functions. And with functions, you really do get so much added capability that it's just going to really be amazing, all the really cool stuff you can do with it. So that's all coming up in the next set of lessons 10. 12 JavaScript Functions Explained: functions are the fundamental building blocks of code within JavaScript. They allow you to set up some code that gets executed out, and you can call back to that code at any time. So let's take a look at a really simple basic function. And so we're going to create a function we're going to give it a name of a. So again, try to apply those logical naming methodologies when you're creating functions just like you did with variables and all. We're gonna have this function executed. Some code in between here, and it's gonna use our console log function here. Function function. Waas called and was close that out. And now, in order to execute that function, all we need to do is maybe what we can do is document rate again. Go back to that document rate were actually writing out something within the display area just to change things up a bit. And it's gonna put a line break here at the end. Eso now we've got our function and we see nothing's happening yet out being displayed out. So let's actually call over that function. So once we've built the function, we can call over to this function at any point within the code, so we don't need to say function. That's all we do is this reference at a and beauty about it is we can do it as many times as we want and we can see that now Dysfunction actually gets called a bunch of times. And the really neat thing about functions is so let's say if I had a variable gonna give that variable B and give it a value of zero. So let's say we did B and we incremental be So this is how we do be plus B. And instead of writing out function was called, Maybe we're gonna put B and here at it together contaminated. And so now we see that this function is actually able to run six times we increment be so something is actually happening in the overall global value of B every time we hit and we run the function were incriminating the value of B by one. And this is really that sense of functions because it gives you the ability to create a block, a code that you can run over and over again and actually create some mathematical functionality there. And the really neat thing about functions is we can actually pass arguments into these functions and utilize these arguments within our code. So the way we pass arguments, so I'm going to give this one of value of C and over here for the first argument I'm gonna type in. Hello. So now whenever we're calling it dysfunction, it's gonna pick up and send this value hello and reference it now, as C so see is actually gonna equal to maybe a document rate out thinking of a good place to put this. So maybe I'll put see in here so before it closes off. So let's just make sure that that's function properly. So something is wrong there. So let's see what's going on here. Eso were actually close off that line, and it's given us a little bit too much spacing around that html. So now we see that it's trying to call back to see and the first value we get see, it gets a reference value, and then the other ones we don't actually have a reference value because they didn't passing any arguments. Add in something really cool here with JavaScript functions and arguments. Aiken set C to equal to none. And now let's look at what happens. So the one that actually has an argument. So if sea contains a value, which is hello in this case, we're going to just use that C is gonna retain the value off Hello that was passed into the function and it's going out. Put it here. But if we don't, if we're expecting an argument but we don't receive one, then we've actually set a default value here by setting C is equal to none. And this is picking up the default value and now out putting it within the document rate. And that's so we can actually set default values with arguments and parameters. And as you can see here, we can really start to build a logic and build out these more complex functionalities and capabilities within our code. So we can Once we start applying conditional statements and creating event listeners and interactions, you're going to really see the power of functions and how they can really be utilized to create those customized user experiences, returning back data and utilising data. So with functions, there's actually a few more things that we should cover off. Ah, and with functions were actually able to return values as well. So this is one example of how to utilize a function. But what if we wanted to? I comment this part out so that we can reference it if we need Teoh. And what if we actually want it to return back of value? So, for instance, and a set up another function, And this time I'm gonna have function gets what letter were on D and maybe we'll pick up that arguments, so e and then we're gonna return back. It's a very simple function there. And basically what this is saying, whatever this function gets called is gonna pick up the value of E and return that back. And as we had seen earlier, when we had these built in functions, remember alert and and so on and prompt that we have these built in functions and there's air the same thing, but they're built in within javascript. So this was the same thing where we're able to actually return back of value and where we could provide a value for that function. So what I mean by that is, if I set variable f. I believe I'm on f and I equal it to function. We don't have to type function, so d pass in that argument. Hello, world. And now what do you think the value off f is gonna be? So let's. So maybe we'll document rape this one out as well, so we can output it. So let's see what happens now. So when I refresh it, we already have that value. So it's doing a round trip here, So it's taking the value of hello World, passing it into the function d as an argument e. And this function is simply returning back the value of So what happens now If we increment could be much like what we did before and said Just returning back e, we returned back e plus plus B and then we do a line break. So let's see what happens now. So now we get this value. I should actually place of space in there, so it's a little bit more readable. So we get hello world one, and let's try something more interesting here. So what if I take this and instead of assigning a variable to it, I do second, so just document rate. So second now gets output and two because it's running through that function and, sir, turning back this dynamic, calculated value. It's a really cool rate because we've got the ability, Teoh Passover values and do some kind of additional functionality. And we can even do things like to actually calculations and so on. So let me show you that one quickly. Let's build out a function that's gonna add one value to another. Values can expect to arguments, add them together and return back that calculated value. So how do you think that we do that? Add together? We're going to call this one ad together. We're gonna expect values off a Or maybe we should So maybe do something like one and two Argument, one argument to us a little bit better for mounted there. And what we're gonna do now is we're gonna return back argument one plus argument to and let's see how this works out. So let's take her document right? We're gonna odd together, so we're gonna add four and five together, return that back and hopefully out, put it on the screen. So let's see what happens so we were actually able to create a mathematical calculation, adding four and five together simply by building up this function and we can do things like multiply as well if we want to. We could subtract. So we've got all of these mathematical operators that are available to us as well and as well as before, where we saw weaken do the concatenation of the values and so on, so really powerful functionality with functions. And there's one more thing that I want to cover off, and that's just how variables So the functions have their own scope of values. So we saw here that we had to sign this value of B and we were able to increment be so this . Essentially, this is a global value of B, and if there's no other value assigned to be within the function, that it's gonna look to the global value of B. But what if I do something like this? Variable B equals five and I set a value of B and then I'm also returning e plus B, and we see that immediately that we returned back to six. So what happens here in the second loop through to that same function that we're still returning back. Six. So it's no longer looking at this variable over here, this global value. But we're taking the value that's being defined within the function itself. So you're probably wondering, OK, well, what happens if I put this afterwards? So we see what's happening here? It's still taking that that scope, that function sculpt value of B. So only this local value of B and it's still applying it within our values. So even though we've placed be after the increment, so you would think, OK, well, we haven't defined be yet, So why wouldn't use the global value of B? And let's just see what this global value of B actually is gonna look like. A console lied about global value of B over here. And we're gonna also console law, get out before we run through the functions. And for this example, let's jump over to our browser example and we see that we've got the global value of B zero even though we run through, those functions were still holding at zero. So in no point here is that actually referencing that global value that value is not changing. And when I remove this out and we see that what's actually happening here is that we are actually because there's no reference to the value of B within the function anymore were taken that global value. And this is important thing to understand when you're working with values that the values within the functions are only alive within those functions and they're not accessible outside of that function themselves. Of course, there are some more complex values were we can get into the fact that we can set some values within the function and have them hold through to outside of the function. But that's a little bit more complex and outside of the scope of this course. So this for now it's just important to understand how functions handle variables, how they work with the very values within the scope and how they work with global values.