Basics of JavaScript coding | Laurence Svekis | Skillshare
Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
12 Lessons (1h 12m)
    • 1. Promo video

      1:17
    • 2. 1 JavaScript basics introduction

      4:41
    • 3. 2 JavaScript Basics Intro

      3:28
    • 4. 3 How to add JavaScript to your webpage

      8:14
    • 5. 4 JavaScript basics output content

      4:22
    • 6. 5 JavaScript basics the Document Object Model

      8:01
    • 7. 6 JavaScript basics variables and operators

      5:19
    • 8. 7 JavaScript basics functions

      11:08
    • 9. 9 JavaScript basics DOM output

      3:31
    • 10. 10 JavaScript basics arrays

      8:20
    • 11. 11 JavaScript basics conditions

      8:14
    • 12. 12 JavaScript basics Loops

      5:32

About This Class

Basics of JavaScript coding

Learn JavaScript in under 1 hour Core concepts and fundamentals of JavaScript

Learn the core fundamental concepts of JavaScript.

Course for Beginners who want to learn about using JavaScript

Learn JavaScript in under 1 hour, all source files are included.

Learn about how to add JavaScript to your web pages

How to apply JavaScript
Access the DOM document object model
Update and interact with HTML code
Variables and operators
Functions and how to use them
Working with arrays
Add logic with conditions
Loop content to save time
JavaScript is an essential part of any webpage, user expect more from your web content. JavaScript provides the next level of web interaction.

Develop a solid understanding of JavaScript with these core concepts, to better and advance into further JavaScript coding.

Learn JavaScript step by step guidance to understanding what and how to use JavaScript.

Transcripts

1. Promo video: JavaScript is a really exciting language, which allows you to create dynamic, interactive content to display it to your Web visitors and really accelerate that Web users experience within your Web. I've been a Web developer for over 15 years, and I'm gonna be taking you through the poor concepts of Java script, the basic according constructs that you can use in order to start reporting JavaScript. I'll show you how to add JavaScript. How toe out, foot content for the user to be able to view that content directly from JavaScript, how to dynamically access content dots within your HTML code and even manipulated and change it for your users to be able to. You also gonna be looking at those four concepts fundamental concepts of JavaScript such as variables, operators, function, storm a raise, conditions, loops and then it all together. Having everything work effectively together to really build a. This course is designed for beginners of javascript. One really learned those fundamental concepts. When you're ready to dive into javascript and see what it can do for your Web content, let's begin learning JavaScript 2. 1 JavaScript basics introduction: Hi. My name is Lawrence, and I'm a web developer and I'm gonna be walking you through the basics of JavaScript. I've set up this course in order to help you learn all the really cool things that you can do with JavaScript. Now, JavaScript is relatively easy to learn. And just understanding some of these basics that I'm gonna be going over within this course can really help you learn about JavaScript. JavaScript allows you toe have dynamic interaction within your Web content and interaction with your users. And when I say dynamic interaction, I mean that you're have the ability to make some calculations, apply some logic and even update your HTML code just using JavaScript. And this provides a whole lot more functionality and a better user experience for users coming into your Web page. You also have the ability toe, have users, trigger events and trigger interactions. So not only get that displayed information coming back to the user, you have a whole ability to access content, update it and really provide that amazing, awesome interactive experience just with using some simple javascript and applying it into your Web pages. So I've set up this course to really help you understand the fundamentals of JavaScript. Now I'm going to be going over some of the basics about how to add JavaScript onto your web page. So there number of different ways to do that. We can do it on page Weaken, linked to a script file. So I'm gonna be showing you how to do that. Add JavaScript on your Web page. I'm also going to be going over how to output content within your Web page and use JavaScript to actually have some output content and interactive content showing to the user . We're also going to be looking at the dawn. So the Dom is one of those things that really provides a lot of information. And all of this information is accessible via javascript. So here we just got a sample of all the different events that are available in the dom and all of these different things that you can interact with with the code your HTML code just by accessing the dawn and interacting with it. So there is quite a lot you can do with it. Also, we're gonna be telling you about how to use variables because variables are one of those fundamental pieces of JavaScript and understanding variables and how to manipulate variables and interact with variables is what gives JavaScript dynamic capabilities. Eso And it's just a really simple concept storing content on. We're gonna be showing you how to do that. Also working with functions, so functions another core concept of JavaScript and really provides some really cool capabilities. And then, of course, looking at the dom. So what? The dawn provides within JavaScript, also looking at a raise. So raise air really cool within JavaScript because they give you the ability to hold multiple pieces of content. Then we're gonna look at conditions. So conditions really help you apply that logic into your JavaScript and provide some kind of response. According to that logic, also, looking at loops, salutes save you time and using all of these functions together, such as functions, a raise, conditions and loops can really accelerate what you can do with javascript. So I'm going to be going over all of this as well as I'm including the source code that I'm gonna be using throughout this course. I can also tell you how you can set up brackets and use that as an editor and even go to code pen toe, access the files live online and be able to manipulate them and practice JavaScript. So all this and more with regular updates, and I'm on online on a regular basis and ready to answer any questions you may have. So when you're ready, let's begin learning JavaScript. 3. 2 JavaScript Basics Intro: welcome to our jobs. Strip introductory course within this course, we're gonna be going over how to use JavaScript now with JavaScript and allows you to pride dynamic functionality on your Web page. It allows you to create interaction and a whole lot of really cool stuff that you can do with JavaScript. You can create everything from games you can vet through forms and even manipulate content within your HTML. Manipulate your CSS. And really, there's a whole bunch of stuff that you can do with JavaScript. Now, one of the important things with JavaScript is understanding the basics. So we're going to be running through all the basic foundation syntax that you need to know In order to build out JavaScript within your Web pages. I'm gonna be using an editor called brackets. So this is an open source downloadable editor s. So it's free to download. It's provided by Adobe, and this is what I'm gonna be using throughout the course. So it's just available at brackets dot io, and you can go ahead and download it if you don't already have your favorite editor that you wanted to use eso. This is one provided by Adobe and this is what it looks like. Eso there? Of course, there's a few different things that you could do. You could change the background colors and style it however you want. So this is a really good editor to create JavaScript in. It's got all the built in functions within JavaScript and as I'm going to show you as we work through the course. So to start out and we're going to jump into this really quickly, we're going to run through some of the core syntax throat, all of the different lessons throughout this course and starting out with just a blank html page. So this is just a really blank blank html page eso we've got our opening doc type I opening html opening head closing head. We've got a title in there so we can see that up here opening body closing body. And then this is where we're gonna actually place the Java script. So we're gonna place it on page shows showing you how to do that in the upcoming lessons. So when you're ready, and it's also encouraged that you do fall along with the course and in order to help encourage you to follow along with the course. I'm also going to be using on online editor at Code Pen I owe. So I'll be providing the links to the code pens throughout the course as well. Eso essentially What code pen I o does is it allows you to write code directly onto the page, inhabit display on the rights hand site. So here I'm writing in alert. And of course I'm gonna take you through what? Alerts are throughout the course as well, but we can see that immediately. Whenever I'm writing something on my left hand side, including javascript, CSS or HTML, we see it being displayed and run directly within code pen. I'll So this is one of those really good handy tools that we use in order to display script immediately as we write it. And it's also a great place to practice and learn what javascript canoe. So I'm gonna be including links to the court pen. Io is as well throughout the course. So when you're ready, let's begin creating some javascript 4. 3 How to add JavaScript to your webpage: within this lesson, I'm gonna cover off how to add JavaScript to your page. So when we go to our code pen dot io example, we see that the JavaScript it's got a J s area, and whatever javascript were typing in here, it's actually running through within the display area here on the right hand side. So this is not going to be the case when you're writing your code because you only got one file toe work with Ah, and even if s so you've got to determine where you gonna place the JavaScript eso There are a number of options. You can place JavaScript pretty much anywhere within your HTML document. And the way you can do this is by opening up script and closing script. And again, I'm gonna use that alert example. So what alert does is it's ah, simple built in function in JavaScript, and it allows you to have that little pop up window that we saw in the last lesson. So I'm gonna just simply place script tags opening closing script tags so it looks like similar to HTML open and close them. And then whatever content is between the script tags this is going to be what the browser is gonna understand, as this is the JavaScript that needs to be run. So once I save this, refresh it. We see that now we get the JavaScript being run, we get the pop up window, and until we click OK, it's not going to continue running, loading the rest of the page. So that's an important thing to keep in mind when you are creating job script eso. If you are trying to access eso, there's within JavaScript. We have what's known as the Dom, and we have access to all the different pieces of your HTML document on. We can access all of this through JavaScript, and this is what is known essentially as the Dom, that interactivity and connection between the HTML and JavaScript and what gets loaded and rendered out in the browser. So the reason I'm bringing this up is because again, this is about order and how things get presented to the browser and when we're trying to access anything within the body section off our page, but we're trying to access it before it's actually loaded. We're going to run into some errors and some issues. So again, remember, order is important. And if you are trying to access content that's going to be available within the page, then it's more. It's mostly advisable to put JavaScript at the bottom of the page. And when we look at any of the source code on just gonna use brackets as an example here, so they actually have. They have some JavaScript here at the top. But when we strolled down to the bottom of the page, we see that they have the bulk of their JavaScript. And the reason again, for this is it's better for Matt. A number of reasons you get access to all of that dawn information eso that this all gets to load and then you access it. Also, if you have any problems with any one of these Js files, if they're not loading, if they're taking timeto load, then this is actually going to affect your loading time of your Web page. So ideally, you wanna have it at the bottom of your page, because if you do have any problems you want, you don't want the users experience to be interrupted with loading and rendering of JavaScript. So mostly place it at the bottom. There are some cases where you need it at the top. Eso That's why they've got it up here s o They have needs to be at the top, not at the bottom, like other Js eso. There's obviously a reason here because it's probably something to do with the forints. Haven't looked at this, but this is likely the case. Why? They've placed it here at the top. And we notice here that they've also commented in the HTML that it needs to be in the top. So good practice places at the bottom. So more like what we see in this example where we're taking the script tags and we're placing them at the bottom and the same thing here when actually gonna flip it back up, run the code and just show you what the difference is gonna be. So we see that it's not actually still need to make a change because when I'm reloading the page, we see that that hello world is still hello world. It's not hello world to as I've changed the code and when I hit OK, we see hello world to comes up eso taking the script tag, moving it to the bottom of just before we're closing off body. And I should actually change this again so that we do see that something is happening here . Eso When I refresh it, we see that it already changes the code. That means that it has run through and it's progressively scan through all of this content . And then it's running the JavaScript. So it is afterwards. So that was just a quick sample off what, um, and how to place JavaScript And another thing about placing javascript. We have another option with using JavaScript, and this is more in the lines of what Code Pen is doing here. So we're not exactly placing it within the HTML, even though we can. If we wanted to encode pen, they do have a separate section in using job script. And what they're doing is they're actually calling to this JavaScript so they're simulating calling to on external JavaScript file. And this is probably the best way to use JavaScript within your Web pages because it does give you the ability to reuse that code over and over again. So what I mean by that is creating a brand new file and just simply linking out to it and I'll show you how that works. So I've created a brand you filed called my script dot Js. So this is gonna be my external JavaScript file, and we still have access to all of this information, and it's really going to be the same thing as taking this, placing it over into the script G s file. And again, the benefit of this is that Now, if I want multiple pages toe have this alert showing up, I can simply just linked to this my script Js in any one of the pages. And the way that we do that is we just put in a source here s so make sure that you do get that source file, correct. So my script dot gs So that's just because I've got it within that same directory and we still have to close that off the script tags. So I noticed that we just got So we've just got a blank area there, and the browser is gonna be able to understand that. Okay, this is what we want to render out. And I'm gonna place hello to there and refresh it. And we're going to see that something went wrong with that. And and I just opened up my directory here s O. The thing was, I hadn't actually saved it in the right spot. So to my point about having the right path to the file eso Now I've saved it. My script Js there's my index dot html So now when I refresh it, we should be okay, and we should see that alert showing up. So that's how you bring JavaScript into your web pages and again, probably the best practice is to link out to files. And as we can see here within the source file here, there are cases where you might want to have the JavaScript right within your Web pages. And then that's okay to eso. This would be on Lee for this particular page. So we're not actually linking out. And then these air shared JavaScript libraries that we're linking out to, probably in more than just one page. You're probably linking out to them in a number of pages 5. 4 JavaScript basics output content: when we want the user to be able to see our output in JavaScript. So I've already showing you one example of that, and that's the alert. So there's a number of different ways that we can actually output content into the viewers visible part of their Web page. And this is the beginning part of how we create interactivity because we are actually sending ah customized bit of information directly to the user. Eso Another way that we can act onto the Web page using JavaScript is doing document, right? And so document. Right when we call into the document, this is essentially calling into the entire document area of the HTML eso as opposed to windows. So we're doing the alert. This is just a default window function. Eso this is available again within that dawn that we have these built in abilities to run these built in functions. Eso another one that's a built in is document, right? So the way that we access and call to it is we do document right, and it runs the same way as when we're actually doing that window alert eso Whenever we hit this javascript, it's gonna automatically write this out into the Web page. So now when we refresh the page, what do you think we're going to see on the page? And I'm just going to add a quick line break there so we can distinguish between these two bits of HTML and JavaScript. So what do you think is gonna be output here on the page? Do you think it's gonna be another pop up window when I'm doing document, right? What do you think we're gonna be doing here? And when I refresh it, we see that it's actually just writing out there. So it essentially it looks like it's html code that we've just written out here. Ah, and we see that immediately show up within our browser and this is again this is gonna be visible directly to the user. So there are a number of different ways that we can access the dawn and have and provide that user interactivity. Eso Another one is the console log. So I use this on a regular basis, and this is something that I use in my development in order to pass information. Eso this is actually going to be different from the user being able to see information. This is strictly mawr for when you're developing and passed messages. So sometimes if you've got loops and you've got a bunch of variables and information and you want to see where we are at a certain point when we're running the JavaScript code eso maybe something that's not exactly visible to the user. Ah, and I just want to be able to open up a console and see ah, particular message that's being passed. Fourth, eso all we do is do console log message. And again, When the job script is writing through the JavaScript, it hits this console log. It actually writes it out into the console, and consuls are available by default. One of the reasons I do use chrome is because they do have a really good Web deaf tools console and open this up. You can just click on the page and doing inspect. You can do that from up here as well in the drop down and number of different ways to open up the console. If you're using Firefox the same thing, they have a really good consul and opera eso. All of these have built in consuls. Ah, And if you're not happy with the console, most of the browsers do have the ability to add add ons, which enhanced the console or give you that same consul functionality. So let's just show you what Consul does. And really, it's not going to do anything different from the user point of view. But if you do have the consul open, you can see that this message gets past and this is again our way to pass through information. Uh, that's not gonna be visible to the user, but allows us to under better understand what we're doing with our code and directly message to ourselves via the consul. 6. 5 JavaScript basics the Document Object Model: in this lesson. I wanted to briefly introduce you to the dawn because the dom is probably the best way to output content into your HTML s over. In the last lesson, we looked at document write eso what this is doing. This is simply writing to the document. But the problem here is if you want to use document right, we can't specify where within the HTML we actually want to output this content. So if we wanted to see the content output, maybe we want to change how the world 32 hello world for eso. In order to do that, we have to have the document right there would have to write out hello world within the document and it does get very frustrating eso one of the things that we do as developers. This is where those HTML tags, dibs and spans come in because this gives us the ability to add in specific tags and actually specify specific pieces of content. So I am just quickly copy and paste this over, and I'm going to do hello world here, and I'm gonna update it in span to be three and then also because I want to apply it to a specific Divina specific span I'm gonna use I d. And I was gonna call it top and I d equals talk numb or something like that. So, again, this is up to the your discretion. You can call it whatever you want. This is just how we're gonna be able to access it within the within JavaScript. So what we want to do in this lesson is I want to actually update Hello, world 32 Hello, world for And I'm gonna show you how to do that within the dawn. So we go over here, we refresh it. Nothing has changed. Everything still looks the same. And again, I'm gonna refer to what you can do within chrome. So if you're not using chrome, you might not necessarily have the same capability of looking at what's within the Dom eso . All of these consoles are different. Eso if you do want check out what I'm going to be doing, Uh, make sure that you're using chrome and you've got your depth tools open when you go to elements. You've got some options here. So you've got essentially your HTML code here or all of your code source code for the Web page so you can open those up and you can inspect them and check those out and so on. So down here below you've got a second windows. You've got some styling here within this window. So we're not looking at that because we've got the styles open. We've got all of the event listeners. So currently we have no event listeners, and then we have something called Dawn Break points on again. We're gonna look at this. This is something that you use within development when you setting up break points. And lastly, we've got properties. So within the property is we've got thes chevron's that we can open up, and we can see all of this really interesting content here. Eso here. When we look at her html, we've got her inner html. We've got inner taxed and we see that we've got access to these pieces of content in the HTML, and this is what the dawn is again. This gives us all of this ability to access this content. So if we go from the top HTML element, we see that this is what's contained within it, and when we open up html the 1st 1 that we have the first close that one up. So our inner html for all of the HTML element is this So it just shows us all of our HTML tags on our inner text. So we've got just basically text in the difference between HTML and text, of course, is that text is the same thing as we've got up here with all of the HTML stripped out. Ah, And then down here we have our first child, which is head. So then we can go through and we can see actually what's contained within the head. So see, within head. We've just only got the title and we don't have the same inner text because we're only containing what's within head here. So maybe, um, we want to go in and dig a little bit further so we don't want to see the first child we've got, um, last child we can see and we can see what's contained within there as well. And maybe we don't even want to go into the HTML at all. We've got some options here for different HTML elements, and then we've got all of our elements on their own. So inner HTML and really there's a whole lot of stuff that's going on here that we have access to, and we have access to all of this within our dawn. So what I actually wanted to is I want a hook are dawn into a particular piece of content that being this world three and I want to update that and change it to world for So in order to do that, I have to use a built in function within the dawn and access this top numb section of our HTML code, and I'm just going to demonstrate how we do that. So again, we refer to document because everything is within the dawn and everything within the document, and there's a way to actually select it, a particular i d. And that method is called Get element by I D. And then we just need to specify the element names. So it's top Numb is the name that I wanted to access and then going by what we saw over here, we've got this inner HTML. I have the same methods and functionality available for me here so I can do inner html and now it's just a simple as setting Ah brand you enter html. So if I wanted to see what's contained within this inner HTML, I can do it this way. Now we're gonna consul log it. What's contained within that inner HTML, we see that we've got a value of three. So if we can access it, that means we can change it. So in our HTML equals four, go back out, refresh it and we see now we've got four. So that's how that's the better way of changing your HTML content, using JavaScript and accessing your content. And as you can see, as we're looking through all this different all of this different content that we've got here within the dawn. We've got all these event listeners and there really is just a ton of information here that we can use an access. So even if we wanted to do something like reset that inner html of the HTML tag, we could do that. So we could just completely blank out all of this HTML code and replace it with something else. So quite a lot of different functionality that's available to us. And in most cases. It's better to access your HTML within this format. And again, this goes to order of your JavaScript. So if we were to actually place this within our head, we don't have this thes ideas identified within the dom yet. Ah, and then we would have some issues accessing. It s so if you are doing it this way, it's best to access it right at the bottom. 7. 6 JavaScript basics variables and operators: in the last. Listen, we saw how we could dynamically change content within our HTML page through JavaScript. Now, this is the beginnings of dynamic interaction and dynamic content via javascript. So I do encourage you to check it out within your editor rates some basic HTML and access. It makes some updates to it and practice this aspect of javascript in order to start creating that interactivity. So you may be looking at this and saying Okay, well, why don't I just right for here instead of going through all of this trouble with JavaScript? And this is where I wanted to introduce variables. So variables are a weight of storing data within JavaScript. There's our two main types of variables that we're gonna be using and one is going to be an integer and other one is gonna be a string value. So in order to set up anyone any variable, we declare that this is now a variable and A is going to represent this piece of data. So in order to make a string, we have to quote around it and we put whatever content we want here in the middle. And now, whenever we call to A as the data holder of this value string, we're gonna be able to see that we get a string value, so the same thing as integers. So instead of having a four over here, if I really want to make a dynamic, I can set be holding a value of four. And instead of having four over here, I could just refer to the variable B and which contains the value of four. So now when I refresh the page, nothing changes because be now represents a value of four. Now, with JavaScript, we can also do operators. So we've got thes arithmetic operators. We've got plus minus multiply divide. And now we can actually take this value of B. So if you want to, could declare a brand new variable, see? And we wanted to give see, ah, value off four plus one. And now I'm actually going to write out. So I got a copy the same so that I'm actually not overriding that. So I'm going to give these values of one and give this one a value of one put in see here. And so what do you think is gonna happen now? We've got in our HTML we've got Hello, world three. Hello, world three. But within our javascript, we're resetting some of these values. So what do you think the output is gonna look like? So give you a second before I gloat into the browser and refresh it to take a look through the code. And when you're reading through this cold, what do you think is gonna happen? So when I refresh it, we see that we get this value off four. And I just need to make one quick update. So I just need to brocket around there s so in order to get that absolute value there of B plus one, that's when you apply the brackets. So C equals, actually that absolute value. And it's just the way the browsers right now interpreting it s so we see that hello world for hello World five and those air now than you calculated values. So what's happened now here is that we've got a value of B equals four. So we're just out putting that in top numb space in the I d. And then over here we're doing be so we're taking four plus one and that's we're actually getting that five. And so now we can see what JavaScript conduced because we can actually do something where we're incremental. This maybe even looping through it, which we're gonna talk about an upcoming lessons and see how much we can really do with JavaScript with all of these variables that are gonna hold the data and even just some simple mathematical calculations. So we can just as easily change this to minus. So we get a value of three, we can multiply it. So if you want to do multiplied by two, we can do that as well. So we get something like eight, and we can even do division. So this is going to give us, ah, value of two. And variables are one of those fundamental things that within programming languages that really provide us all of this later calculations that we can do with all of these values. And as long as within the code we're sending our valuables are variables up here a top, we can manipulate the variables within the court, apply logic to it and have multiple outcomes Customized outcomes using JavaScript calculations 8. 7 JavaScript basics functions: Another fundamental part of JavaScript is the use of functions. So here we have relatively the same thing that we're doing. Eso only There's a few things that are changing here when we're doing the get element by idea and we're setting that inter html. So first of all, where selecting the i d from html and then we're setting of value. So this is a value that we've got within our calculations. And this is where functions come in and again, just like the variables they play an important role whenever you're creating JavaScript. So I'm just reformatting some of this code here s O that will better look more presentable when I bring in the function. So to set up a function, it's gonna be a relatively easy. All I have to do is do function and give it a name. So I'm gonna just give it a name off up html. And so whenever I call the function so maybe I can even just put this within that function . And whenever now I call to that function, I'm gonna run. Whatever piece of code is held within that function so in this gives me the ability to actually run at multiple times and get multiple responses there. So now when we look in the console, we get 333 and all of this is actually coming directly from the function and also with functions, we have the ability to return information so I can return a value so I can actually calculate the value. So I'm gonna set a brand you variable, or I can re calculate, See if I wanted to do so. So maybe actually going to re calculate? See, So I'm gonna set C has a new value of seven. So when I run that function and I update my inner html there or run the value of to console log, see? And so now we're gonna be setting the value of see as seven. And that's actually being set as a string, as opposed to what are integers are here. So what I actually want to do is C plus C plus one. So I'm gonna increment see every time we run the function and I'm going to return the value of C and we'll show you what this is gonna look like. So, using returns within the function when I go and refresh it. So I see that I've got this line over here is returning the value of three. But the line number five in line number 11 has that incremental value that we see within the console. So number nine and number 11 we see that those values air incremental. But whenever we run the functions themselves, we see that we've got C equal C plus one and then we're consul in logging out that in for that output that were out putting within this section. So maybe it even makes more sense to console log out si eso again. We could do any number of things here within this function. But the point is that we have the ability to run functions and they can do increments of our values. They can return values. So now I can do something like and out put this into the console logs instead of having this information. So I'm going to run at once, and this might be a little bit difficult to follow through, but initially we're doing a console log message, so I'm gonna get rid of that. We're gonna set our variables here. We're going to run our function for the first time. It's gonna go to this piece of code. So it's going to take the value of C equals C plus one. So currently, the value of C is gonna be be divided by two. So it's gonna be we're gonna be returning a value for C off three and then we're gonna increments, see again by one and were returning. See the new value of C s. Oh, nothing is actually going to get output here because we're not Consul logging it out. But over here, we're going to do that. Just remove that one. And then the next time we run it were actually going to console log out that returned value . So let's see what happens now. So we get a value of 35 and six. So the first time we run through it, we get that up html function. It goes over to hear it. Increments see by one Consul logs it out as three than we incremental again. So see now has a value of four. It gets returned here as four. So the current value of see at this point is for so that means when we run the console log , and we actually output that value. We see that going into the function. This time around, the value is for incremental by one we console, log it out. So now it's five. We incremental again By one, we return a value of six. And this is where we're actually putting that value of six. So if I was to show that return value here or I should console log that out. So if I'm actually going to show that return value So now I should get 3456 within the output. Now, another thing that you can do with functions is you can pass arguments over or parameters over eso. Instead of making these calculations here, I can actually pass the value through to the function and make some calculations with it. And so this can actually take over for what we're doing down here. Eso I'm going to just remove out this return cause I'm gonna have that actual output happening here. I'm gonna pied this part here and now what I want to happen every time I call. That function is I want it to output a particular value. And as I said, we want to show you how you could pass parameters. So I'm gonna have parameter one parameter to me Bacon calling para one para two. And so now these air gonna hold those past values eso I want to pass through this one first and then this one the second time, And also, I'm going to set a number for the output. So I'm going to do seven and I'm gonna do eat. And also, I'm gonna explain this in a little bit more detail coming up. So I just want to show you what happens here with the function, and then I'll go through and I'll explain how this is all working and how javascript is translating this cold. So one a console log on those two values that are being passed. I can get rid of that part there. And now within here. I can use this as my variable. And I can actually use this as my variable for the inner html Seoul. Now that we've completed this, what do you think is gonna happen here? Um, we're passing through top numb. So that's the first. The first i d there that we have that contains the value of three eso were passing that over comma seven And when it hits the function para one is going to take the hold The stored value of talk numb para two is gonna world the store number of seven So we should get a console log out of talk numb and seven And then over here, when we do get element by i d we have this value that's being held, so it should be able to translate that as top numb, go into the HTML, pick up the inner HTML, and then para two is holding a value of seven, and we're gonna output that value. So essentially, what we're doing here is we're gonna have the first hello world have a value of seven second. Hello. World is gonna have a value of eight. And we see that here within the console log. And that's why did want a Consul Law get that information because it's important, understand how we can pass values through. And then even with these values that we've passed through, I can reset some of these values so I can do something like para two plus two better quarter bracket around there, so that this is just understood that this is gonna be an inter juris. Well, so now we were by default, always adding to Intuit. Ah, One other thing with functions is how it handles these values. So these values of par a one and part two are going to be on Lee within the function, so they're only gonna be accessible within the function. So if I was to do something like console log para one, we'd get an air because there's nothing no value that's being held within their eso outside of the function, these air global values and we have access to it within the function as well. But if we do something like, let's see a And if it here I set a brand new value for a new value, we're not gonna actually override it. So when we hit this console log, we're still going to be using that original value of a So we've got that string value there that we've initially set. But if we get rid of this declaration of the variable, we do a equals and new value. We get the value of new value because now this is accessing that global a variable. So does take a little bit of time to work through all of this with functions, and I do encourage you to check out code pen. I post this cold within their try it and see what you can get functions to do and work with that. See what kind of output you can get. So let's practicing for the upcoming lessons because it is crucial to understand variables , it is crucial to understand how functions work within JavaScript in order to build out MAWR in depth calculations and logic. 9. 9 JavaScript basics DOM output: so I wanted to briefly go over code pen eso in the last lesson, we worked quite a bit with console log. And there actually is a way to see what content we're seeing within the console log and code pen. It's always to do is indicate consul there. And we can see that that opens up and we can see all of those values that are being passed . That's how you can work with that current code pen and update and see what's available within the console. So going back into our JavaScript, we're gonna get rid of some of this previous code that we've been looking at and we're gonna make some updates to here, So I'm gonna have instead of top. I'm gonna do an output here, and I'm going to get rid of a lot of this stuff here. So simply I'm gonna have a way to output some content so that's gonna be visible to the users coming into the page. And I'm going to do that same thing where I do get element by I d set variable output, and it's gonna do documents get element by i d. And I'm gonna select it put element. So now what I can do is I can do something like output, inner HTML, and I can say hello or something like that. Go out here and we're gonna refresh the page. So what do you think is gonna happen here? I've set output. I've set up a variable, and it's gonna contain all that information that's available within document, get element by I. D is going to contain all of this element information and then says simply update that inner HTML One of the thing I should add in here. So if I do a console log of output, as we did with other variables just going to show you what happens there as well, So I'm gonna go to the page. I'm gonna refresh the page and we see that we get that content that's held within output. So it's got all of this information available and accessible to us. We also have updating here within the within the window there. So we are updating that information and we see that now that it put contains that brand new hello information. So if I had something like by, or something like that and refresh it we see that the new object contains that brand new information. This is one of those important things to understand when you are updating content in JavaScript. So we're gonna access the DOM is then going to contain that new updated information as opposed to the initial original information. And this is another one of those things that's important to order when you're getting presented. So if I was to do something like get document element by I. D. And I haven't updated the hello yet, I would still get that old value in it. So there's a number of different factors at play here that you should consider when you're accessing the dawn. So the next lesson we're gonna look at another one of those valuable things within JavaScript in order to provide some really cool functionality. And that's gonna be a raise. So that's coming up in the next lesson. 10. 10 JavaScript basics arrays: So in this lesson, I wanted to talk about a raise and how we use a raise in JavaScript. Now, arrays are different than our initial variables that we were setting. And the way that they are different is that they can hold multiple values instead of just holding one value they can contain on any number of values. And the way that we can do this is we can set up injury. So looks all it looks similar to the way that we're setting up. That's Dom object on other variables that we had worked with. So I'm just gonna call it my array. So and here is where I can actually place items in the A race. I can have something like one, too. I can even have some integers here. 79 and you noticed that the format is the same as more setting the variables. So I quote around the strings and I leave the integers as unquoted values and three and so on. So we can set any number of values there. And this is all going to be contained within the might array. And when I console log my arranged love to copy and paste that to save me the trouble of rewriting console log eso just to show you what's gonna get output here within the array. So three that instead of just having that one value we see we've got access to all of those values within the array. There's a number of different ways that we can set a raise. We can define an array within this type of format, or we can assign values to it. If we do something like this, do my array be, And then we could just do you array. And here we can enter in our values. We don't necessarily need toe enter it in in this format. Aiken entered in this format as well and these air just different ways. Teoh set up your array, so I forgot to console Log that out. So that would be my Arabi and just show you how it gets presented again within the consul. So same thing, just different ways of initiating and setting up your array. So now if we want to actually access these items in the array and we wanted to print them out into the output, show you how we can do that So I'm gonna just move this down because now we've set up our arrays. And if I wanted to have access to one or two or any one of these numbers, I can do it like this. Where I do my race, I do them a rain name. And then all have to do is select the item. Eso starting with I zero arrays start at zero. So this is 01234 So we have five items. We can assign any any one of these values. So starting with zero gives us five different values. That or keys that we can use in order to determine what part of the Serie that we want to show. So I can do something like this, Do a raise zero or maybe would do it a little bit more interesting there with one s. So what do you think is going to be at the output here and take a look at the rain? So this is the one that I'm accessing. And if you said our output is going to be two, you're correct because this is going to be the second item. Eso with the key value of where the index value of 101234 and that's how we access a raise . And of course, we can even update a raise. So if I wanted to update that value of the ray, this is gonna work the same way that other variables do. So we can take a ray number one and newly updated value. And we can odd that newly updated value within that array. So you see that now the output is newly updated value. And also looking at over here when we consul logged out those a rays, we see that we haven't had that change take place. And if I take this and place this over here, we can see that now, afterwards and again, order is important that afterwards, once we've updated the ray, that newly updated a raid value is now present. When we do consul lock and output, the contents of the every no within a raise. There's also some built in methods that are really cool, and they're gonna really allow you to do some really neat stuff with the rays. Eso one of them is if I want to know how many items air here within the array. I can. It's like a consul. Log that out And I'm also going to console log. It s so if I want to know how many items are within their and this is going to be important when we're actually calculating out how many items there are, maybe we're doing some loops which is coming up in the next lesson. We're gonna look at loops and conditions s. So this is where length becomes important and this will give us the total value of items that are available within that array. And another one that's popular is giving you the ability to actually sort the rate items. So see that after we do the sort, it'll change the way that the array items are presented. Eso What's happened over here? Is that initially so we've got the length of the ray. We see that there's five items in their rate, and then here we've got that initial array. So now we've done a sort of their rate and we see that first it doesn't numeric and then it does on alphabetical sort. So 13 and too So it's sort it alphabetically and now are when we access these particular items in their array. The order is going to be different now, so that's one thing that's important to note. So if I'm out putting that a ray value and I've sorted, it's gonna things around. So it is quite a lot of stuff is getting output there, but we see that now that I've moved things around, our output is still accessing item number one, which is the second item in the array. And we're getting that and put within our HTML. So again, order is important. And that's how you work with a raise. And a raise can become really powerful because they can hold a lot of information and then having that ability to sort things to calculate toe loop through the items really does add that added power when you use a raise and when you're determining how you're going to set up your logic, this is where a raise come into place, and they're gonna have much more capability than if you had a Siris of variables. If I had a equals one. B equals two C equals seven d equals nine e equals three. I don't have all of this capability where Consort, through the length I don't have the capability where I consort them alphabetically were in order and so one. So that's why we do use a raise because off this added capability, when we're creating our dynamic coding and adding, applying our logic. So coming up, we're gonna talk. Maura bait these really cool things functionality that's built into JavaScript that really does accelerate your process of updating the code dynamically. So in working in a combination a raise, conditions, loops and functions and variables, you can get most of what you want done within JavaScript and most of what you want toe happen within your HTML page. 11. 11 JavaScript basics conditions: So the last lesson we had looked at a raise and another one of those really powerful pieces of JavaScript is the ability to do conditions and comparisons. So I can actually take ah, Siris of values. And I can do a comparison between them. So let me just remove at some of these console logs here, and I gotta commentate thes air rate updates here because I don't actually want to use them within this lesson. And when we're doing conditions or comparisons of values, this is again where we start applying that really powerful logic into what we're doing and how we're creating our JavaScript. So if I want to take a look at and we're gonna use thes my revalues eso if I wanted to see if seven is greater or if nine is greater than seven, I could do something like this where I could do if Or maybe we'll just keep it really simple. And we'll see if my array so one or 012 So if my a rate too, is greater, Thani, let's say five and I asked a brand new variable output out. Or maybe you should just out no and instead of that, just keep it blank there. And then over here is when we run, our condition are comparison there. I'm gonna check to see if those values are greater. So if seven is greater than five, we're gonna output of true and refresh. And actually, I should put output html there to really finish this off. So we see that seven in fact is greater than five. And that's why we're getting a value of true. But what if we had a value of 15? So what happens now? We don't actually have anything happening because we haven't met any of these conditions. And this is where we can use else. So else is gonna do something if this condition isn't true. So to keep it fairly logical and straightforward, I'm gonna output false so we can do a quick check. I just didn't beautify there to make the code more readable. Eso again? We're going to read through this and we're going to see that seven and check to see if seven is greater than 15 and which we know that seven isn't greater than 15. Sore output should be false. Do refresh, And we do get false. Now we can add in any number of criteria here to make these conditions. And this is basically what happens is this block a code is what gets executed if it's true and this is the block of code that gets executed. If it's false eso within here, we can do any number of logical conditions and so on in order to really apply some really cool logic eso we also have less than 15. So now we know that seven is gonna be less than 15. So now we should see. True, if we do something, we could even keep it really simple. We could get rid of those variables and we could say if eight is less than 15 which is true if 18 is less than 15 false and salon. And when we're looking at this, we also have the ability to apply additional else statements so I can actually even do else if and do another check to see if 18 is greater than five and then So if this is true, this logic is going to get applied. Put HTML equals second check. So now if eat so first of all, it's going to come in here and say, Okay, if 18 is less than five. 15 if it comes out true, then we're gonna put this has got a second condition here. If 18 is greater than five, it's going to do that Second check, there s Oh, that's gonna output second check. And if none of these air true, it's gonna do that. Final output of false. So now we see that second check is true. You can also do combinations here so I can get rid of. I can do multiple checks here. So to keep it from getting too confusing eso I could do something like 18 is less than 15 and 18 is creator than 15. So which doesn't really make a lot of sense, because once we do this check, But when we work with dynamic values, um, well, this will make more sense. So when we do it like this, both of them have to come out to be true eso when we refresh that we see that's false because both of these together are not true. Uh, we could do or so if either one is true, then we get this output of truth and so it doesn't necessarily need to meet both conditions . Eso these air just different ways to apply this logic and work out what should be output when we're doing the check. And again when we're doing more dynamic values here, this is gonna make a lot more sense than simply when we can just have a readable format and we know which one is going to be true. So if these numbers were increasing, if they were value of A or something like that and a contained 18 on, then over here we had some kind of new calculation for a So again, this isn't gonna make much sense. So maybe I could do if a is less than five and A is greater than 15. So this will give us a value. So if a actually is a value anywhere between these change that and so they is a value of eight, we should see Scott to reverse those eso we're looking to see. If a is between five and 15 that's going to be true. And if it's anything greater or less than that, it's going to be false. And so now, if we had a calculation of a equals a plus. That's a short form for doing an increment on a So now I'm just going to reset a over to 15 or to 14. So now it should come out as false because the value of a is actually gonna be 15 s. Oh, there's a number of different ways to work with the's conditions and make these calculations. So the next lesson we're gonna show you how to do loops and loops are gonna be really cool , because this is why introduced this incremental in here because with loops, we can do a whole bunch of increments and a whole bunch of updates. Eso we saves us the trouble a writing out a bunch of stuff over and over again. So if I want to increment by one, just do like a whole bunch of these increments by one, so there's a better way to do this, and that's what loops are all about. So that's coming up in the next lesson. 12. 12 JavaScript basics Loops: So as we've been working through our code, there's a number of occasions where we've had to just do a whole bunch of these copy and pastes and just write a bunch of times in order for us to actually get the value that we're looking for. So there is a batter away. So if you want to essentially loop through a block a code multiple times and get an output on it, So let's say I wanted to console log A what? What a was as I'm incremental in it. And really, this is quite a lot of writing to accomplish that. And again, of course, probably easier just to do it like this, where I need to copy and paste it out. And now when I can go in here, I can see that a is in fact, it's increasing. So the better way to do this if I wanted to loop through it, is I can set a value of so we're gonna set a value of I and we're gonna equal it to zero. So this is our starting value and within loops, we need tohave, a condition that's gonna actually allow us to break through that loop because we don't want the loop to run indefinitely. So we wanna have something that's gonna actually stop our loop. So this is where we're gonna check to see if I is less than 10 and we need to have one last piece within here. And this is gonna apply on addition onto that I value so this will increment that I value and allow us to to complete the loop have actually something happening within that loop. So now when I gloat here, what do you think is gonna happen here when we're out putting it? Are we gonna output it 10 times or what do you think is gonna happen? And maybe I can just even add an eye in here s O that we see what number I is that and again, remember, we're doing while it's less than 10. But we're starting at zero. So when I refresh it, we started zero and we see that actually loops through 10 times and a finishes off at 24. And here's our value of I as were incriminating. So this is the same thing as doing something like this. So we got 1 to 10 and salon. And the really neat thing about loops is and a raise is you can do some really cool stuff with, um s o remember how, before we had looked at, we could see the length of the ray by doing not sure where that went. But we could do something like my array, and we can get length and that actually give us the number of items that are available within that a rate eso If I started it at zero because a race started zero, I could do something like output, my array. Oy! And then we'll just keep that a increment in there as well. So this essentially allows us to look through all the items in the array. And this is really useful functionality when we are making our calculations and working with the Rays. So a raise and loops work really well together, and it provides all of this really cool functionalities. Now we can work in a reason to functions as well, eh? So we can call a function a number of times. So if we set up a function here and let's say this function is going to do some calculations, my function. And maybe we can even do this as doing that a increment, so don't necessarily gonna return anything there. So see what happens now and we see that we get the same thing. We get that increment of a and I notice that we're only have to call out to that function at one time in the loop. But essentially all of that code that's between this looped area. This loop content is going to get run through whatever number of times were indicating. So I'm going to include all of this source code in another code pen. And again, I do encourage you to check that eight include the link to it or if you want to use it within your own editor, check it out and see what you can get JavaScript to do with arrays, functions, loops and conditions. And so this is essentially the foundation of javascript and knowing in getting to know how all of these how to use this syntax, this base syntax, getting to know and use it really well is going to really help you expand your javascript as you become more familiar with what each one of these each one of these built in methods do within JavaScript and what you can do and how you can accomplish it. In JavaScript, it's gonna help you build a solid foundation for expanding and using JavaScript and more complex applications and interactions with your Web content.