JavaScript For Beginners - Learn JavaScript From Scratch | Robin Haney | Skillshare

JavaScript For Beginners - Learn JavaScript From Scratch

Robin Haney, Web Developer and Online Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
19 Lessons (58m)
    • 1. What You Will Be Learning Throughout This Course

      2:15
    • 2. Creating Your Very First JavaScript Program

      8:25
    • 3. What is JavaScript

      3:15
    • 4. How To Link an External JavaScript File

      4:03
    • 5. JavaScript Console Challenge

      1:12
    • 6. JavaScript Console Challenge Solution

      2:49
    • 7. What is a Variable

      4:13
    • 8. How To Assign Names To Your Variables

      2:21
    • 9. An Introduction To Strings and Numbers

      1:16
    • 10. How To Creature Input From a User

      2:02
    • 11. Combing Strings Together

      3:04
    • 12. Working With Strings In Further Detail

      2:28
    • 13. The Variable Coding Challenge

      1:34
    • 14. Solution To The Variable Coding Challenge

      3:28
    • 15. What are Numbers

      2:17
    • 16. How We Do Math In JavaScript

      5:54
    • 17. Working With The Math Object

      3:51
    • 18. The Numbers Challenge

      0:45
    • 19. Solution To The Numbers Challenge

      3:10

About This Class

Have you always wanted to become an online web developer or JavaScript developer? With all the different programming languages out there it can be hard to find one to start off with yet alone find a good course that will show you how to learn the language effectively.

Because of all this I put together a JavaScript basics course that will show you as a complete beginner how to begin creating programs using JavaScript. This course is created for anyone brand new to web development, or simply for those who know HTML, CSS, or any other programming language but have never worked with JavaScript before.

This course is 100% percent FREE. I look forward to seeing you inside!

Transcripts

1. What You Will Be Learning Throughout This Course: so before we can start actually programming, I want to take a little bit of time and talk about what we would actually be covering in the scores. So, first of all, JavaScript is like a language in like language. It has its own grammar seriously to the English language. Another word we can call it its syntax. This in tax is JavaScript commands words and punctuation. Remember when you were younger? You didn't understand English or whatever your primary language was? You went to school and study first. The words didn't make much sense, but eventually words made sends more together. Grammar was added and sentences started to form. Before you knew it, you could write a paragraph or even eventually, a novel. This is exactly the same process you grow through when you learn JavaScript or any online programming language. Nothing makes sense at first, but eventually you have no problems working with JavaScript. It just takes time. Keep in mind that every programming language has its own syntax, just like the English language that we speak in our day to day lives. Throughout this course, we're also going to be covering many programming concepts that are related to JavaScript and many other online languages, you will be learning about all kinds of exciting things, such as strings, variables, statements, html and much, much more. These concepts can then be applied to other languages online, making this course and exit solution to anyone just getting started with learning Web development. By the end of this course, I bet I can have you even talking like a seasoned programmer as well as we will be covering all of that as well. For example, now you know what syntax means. With this course, you will also learn the best practices and proven ways to make a program perform all the best weekend. Last but not least, you will, of course, be doing a lot of programming in the scores. By the end of the next video, you will be creating your very first JavaScript program, so you're going to learn a lot. I can definitely assure you of that. So all right, grab yourself some jab, no pun intended and let's get started. Let's learn some javascript 2. Creating Your Very First JavaScript Program: Hi. Welcome back to the course. Now, I know you're very excited to begin your journey with learning JavaScript, But before we can do that, there's a few things we need to take care of first. First of all, we need to make a new folder on her desktop, and I advise you to make it on your desk, tops that you can access is folded at any time throughout this course. I mean folder here, and I'm gonna call it JavaScript basics. And we're going to do here is we're gonna open up a file and we're gonna have a text document. We can call this document every like, All right, so we have a name for my text talking here, and we're going again. Open it up so we can edit it. Just a So you guys can see. And what we're gonna do here is we're gonna add a few little syntax things for HTML just so that everything works here. And you guys don't worry about this too much. I'm just gonna Addison really quick. All right, So we have the overall Syntex of her HMO docking made and you know what? About two too much I'm gonna cover this in more detail later on the course. I just want to get you guys sit up and running. But basically, what we have here is we have HTML takes. And basically, what these two takes mean is anything within these two takes are going to be your HTML than HTML takes. We have our script, takes anything in the script takes is gonna be javascript again. Don't worry about this. If this confusing, we'll be covering things like syntax later on. But just keep in mind that over javascript is gonna be in these two script takes right here . So in these two tags, we're gonna read a first command, and this command is going to be or alert command. Now, what this command does is it sends a notification box to the user to alert them of whatever message we right. So if we click in our brackets here and at a message, this message will pop up on the screen unification box for the user. So we have our commands entered here, and what we need to do now is after this part is entered here, we need to make sure that there is a semi colon. At the end of our command, all commands and statements and JavaScript need to have semicolons after them since they run in order. So if we were ever to make a statement and not have a cynical and we're gonna get error and the next statement will not be able to run until this one is completed, so you always want to make sure it's a semicolon. After whatever statement we enter here, I kind of think of it like a sentence in English. You always want have a period at the end, your sentence, but in Javascript you won't have a semicolon. So now, in order to get this actual program toe work, we're gonna need to save it. So we're gonna go up to file here. We're gonna hit, save as, and we're gonna save it as whatever name you like. But at the end, you're gonna want to make sure you write dot html what this is gonna do. You gonna tell her computer to open up the style as an HD elf html file. So again, if you go back to are fully here, you're gonna see it. There's now I knew a new document here, and this is going to be a Web browser documents. So if you guys have Firefox, Google, chrome or whatever it is they're using, it's not gonna be open a OpenTable in your Web browser. So let's double click this and open it up here and we can see here that our messages no displaying their earlier in a notification box. And if we hit Okay, the program is now done. So this is how we were going to open a book programs. And as we get more familiar with programming in JavaScript, we're gonna be using an actual code editor, and that's what we're gonna cover later on. But for now, we're just gonna be using no pad for this lesson. So let's open up our document back up. And in this document, we're gonna write another command, and this command is going to be slightly different. So let's go over this really quickly. This is called the document. Don't write command with this command does. Is it all right text onto the page that the user is viewing so again in these brackets here we can enter entering some quotations, and we want to make sure there's a semi clean up to the end of this command. Don't worry about with the dot means right now, we're gonna covering this later. And if we save this again and then open it up again, we can see that our first statement that we entered the notification box pops up. And then if we hit, okay, the next statement in present and it puts whatever we wrote in the document dealt right here onto the page. So I wanted to do this to demonstrate you guys that statements basically run one after another. You'll see that it ran the 1st 1 first. And then it ran the second rate after the 1st 1 completed and the 1st 1 completed after we clicked at Okay, box. So it's important to understand that JavaScript run statements from top to bottom. It starts at the top and read all the way to the bottom, and we'll go through the statements as we enter them in a program. So this looks a little confusing and looks a little bit sloppy, and that's because we're using no pet. As you get to this course, we're going to learn how to use different court editors. But to close this lesson up we're gonna do is I'm gonna show you guys an extra code editor that I use and the one I installed. It's called No pad plus plus. So if I look at me, our browsers are pros a document that he made that we saved it as we right click it. We can hit edit with this. And if you installed year Cody? Nope. No pad, whatever texted it or you're using used to be an auction to open it directly. And if you click at it with no pad plus plus, which is the one I'm using, we can see here that everything looks a little bit different than what it looks. A no pat. It looks a little bit more better, but court is easier to read. We have color quoted. You can see that everything's a little bit more organized. What we can do, which is pretty cool here I'm gonna close this year is we can save this directly in here. Just hit safe, like we gotta make a change first. So let's changes to All right, let's give this to save. And if we close this open up our browser again, We can see that it's instantly applied. So it seems it's a lot of time between saving and whatnot. We can enter the file, edit the file directly. So what you're gonna want to do is you want to get a text editor when you give, give you guys a link to know pad plus plus that I use. But you can really use any Coney text editor you want. You can spend a little time looking at some options. There's a lot of free ones out there. There's even some paid ones, which are pretty good. But just grab anything you want. For now, I recommend if you want to follow along with me throughout this course, you can use no plus no pad plus plus. But it doesn't really matter what you have, but that's pretty much brings it a close to this lesson. Congratulations. You've just completed your first javascript program. Be proud of yourself. You just something that's very hard. And although we just started off slow, you're well on your way to becoming a JavaScript developer. I'll see you in the next section of the course. We work more with JavaScript programming. Congratulations. 3. What is JavaScript: all right, So in order to start the score, so before we can get into the real programming and doing all the actionable stuff and JavaScript, what we first need to understand is what really is deaf script. So if we type in what is javascript into Google? The result that we get is JavaScript is an object oriented computer programming language commonly used to create interactive effects within web browsers. So in this video leader on, we're gonna learn. And we're gonna chew you guys some examples of what javascript can do in your Web browser. But for now, just understand that JavaScript is a common programming language used in Web browsers to create websites and do a lot of cool effects from your Web browser. So to give you a better example of what javascript actually is, let's look at some final end products of some great examples of JavaScript on the Web. All right, now let's look at some live examples of what Javascript can do on the Internet. Keep in mind that JavaScript is not to be confused with Jabba. Jabba and JavaScript are two very separate things. So let's talk about Jabba very briefly. JavaScript first started out. It's a small language used for Web applications to run in the Web but is now used as a powerful programming language online. We can see here that this website called the Interactive Here is a cool little website used by JavaScript to really show us what the inner part of the ear is in different things like that. This is a nice interactive page that somebody built just using JavaScript. In the next example we have we create digital chemistry, which is another interactive website that shows people different things about chemistry. We had this nice little page that auto loads as you go down here. Some nice effects, all used with JavaScript maps. TD is the website Will. We can look at different maps in the world. Keep in mind that Google Maps and Google Earth is also run by using JavaScript. Here we have somebody who created, command and conquer using JavaScript. So this is a cool, very, very cool thing that somebody did to recreate the actual game itself. Just using JavaScript in HTML. Amazon Cloud Reader and Amazon's website uses a lot of JavaScript to function. The very popular Pinterest uses JavaScript as well. It's Facebook, Twitter and all those websites as well. Browser Quest, another video game based website online, all created with JavaScript. And we have this really cool game which is called Draw Stick Man, which you basically are drying the stick man using JavaScript so pretty pretty cool, Pretty cool stuff we have going on here. So a lot of different interactive ways we can use online. So it takes a lot of hard work to build anything that I showed you so far in this video. But this course will teach you the basics and provide you with a strong foundation that you would need in order to get off to a good start online. So don't sweat it. In the next few lessons, you're gonna be building your own JavaScript program as well. It won't be advances, these examples, but everybody's got to start somewhere. And this is where you're gonna start your journey and learning JavaScript online 4. How To Link an External JavaScript File: It's very common to keep all of your JavaScript files separate from the HTML. This helps you organize everything, especially once your file start to get really big. Make sure that when you quit your job script so you don't put your html CSS or anything else in there, just you just javascript for now we can see here in this document, I inserted some JavaScript at the top. Here. We have a document that recommend if we save this page and open it, we can see that they're JavaScript will be went up at the very top of her pager for a Web page content. Now, what we're gonna do in this lesson is we're gonna take this JavaScript code and make it into a separate file. Import that file integration. One document. So the first thing going to do here is going to create the just group we had before. And I'm gonna create a new file and co it, Jess. We're then going to open up that no pad file and we're going to file seed as Js doc gs. It is important that you have the JavaScript file extension for this file in order for a computer to know that it is indeed a job script file. You see here that now that I was different and we can do it our own no pat file we had before. We are now gonna open up and edit our do javascript file and are no pipe plus plus or whatever quote editor you have. We're gonna take our command here. We're gonna copy of Peace it. We're gonna taste into a new JavaScript. We're gonna delete what we have here, and next up, we're going to add some new tags we're gonna add ahead to take here and basically the head tags you don't need to worry about now. We'll explain later, but just for now in the head takes we're actually gonna import are JavaScript. So let's look at this command a little bit deeper. Now what? This command in the quotations what we do is write the file path to her external job script file. You remember I named are five gs dot gs. So as long as our file here is in the same folder as our HTML a document, all we have to do is put the name of a file plus the extension, which is our case is Js before you Previ this Make sure that you save your html a document as well Is your external job script file We can see here that are JavaScript code is now to Spain correctly in our external she One thing that I'm going to point out really quickly is that the placement that we have our job script honor What pitch can dramatically affect performance and the load ability of her lip Egx. Generally speaking, you want to put your jacket at the bottom of your butt patient, if possible. So I'm gonna add some footer takes here, and I'm gonna place my JavaScript source file in here. So now what happens here is that the Web page content will vote first and then r JavaScript file Willard right after you can see here that now are JavaScript code this place at the end of the dock. Me instead of appearing at the top, if at all possible, you always want to place it at the end. So for the rest of this course, I'm going to be creating our electors. All the coding content using external JavaScript fucks if you need help with this. You just can't get this to work. Then please consult the teacher files Teoh to download that you can give. So to sum things up this lecture, try to keep your job, script and external file that is separate from your HTML and CSS. This will help you a lot as your coaches get bigger, if possible, inserting your source code at the end of your issue. A document like the HTML mode first in the JavaScript Center, increasing performance, and Patiala speak of your website. Try making your own extra jobs. You file for practice and see if you can get it working correctly. When you finish this, I will be waiting for you in the next lecture up the course. 5. JavaScript Console Challenge: Howard, everybody. So I hope you're loving the course so far. And today's lecture I have a challenge for you to do. This is the Jap shit concert challenge. Now, I wrote this program, but I seem to be having trouble is going to work. You see, the problem is, when I run this program in my browser, they opened the juncture console. I'm getting the least problems. These airs were popping up here, and I really need your help to fix this. So what I need you to do is I need you to take these code files. There's gonna be two in a sheet that you can download in the external resources for this lecture. So go to external files and down with zip file. Does it follow? There'll be two fouls here, and I need you to fix this Travis code here. So there's no errors in the Jets Shirt Council. If you could do that, would be awesome. You pass the test, so I challenge you to do this on your own. If you guys I haven't Angel. Don't worry. We're gonna go through this in the next lecture. University has everything you need to know so tried it, you know, and best of luck. And let's fix this program. Guys, let's use a jobs council and fix this program. Don't you do that? 6. JavaScript Console Challenge Solution: All right, everybody. So I'm in the council challenge here, and these did to documents and 1/2. So the first thing I'm going to do is I'm actually going to open up our program here in the browser when you're on the console we're going to hear is I mean, look at some the heirs up up up here when you see here that we have some syntax errors, So we're gonna do is we're gonna open up our actual docked me here. I'm gonna open up with my no pad plus plus and in here, I'm gonna take a quick look and see if there's anything missing in this syntax so we can see that are alert command Looks like it's pretty fine. Our document dot right command is pretty good. Oh, let's look at that. We're missing a bracket right here. So let's add that bracket in. Now that looks much better. Let's continue down the page. Contador. Oh, we can see we're missing a G here, so just enter that and really quickly and that looks pretty good. And in the next county adult log, you can see here that everything is pretty good except for a very common mistake is if you guess we forgot the semi colon, then you are absolutely correct. Stick that in her and I'm gonna say this file here, and I'm gonna point out that you guys a short cut to save instead of going to file save every time you want to say it is, you can take. Control s on windows now, Father seat. If we open up a file again, we can see that we have our notification box pops up here and we have fixed this land a coon. So we have completed our challenge. Now, this is how I would go about debugging this program. You can use the console step by step or if you're more seasons, you can take a quick look by using the console, we could see that we had a couple syntax arrows. So basically spelling mistakes. You know, that common stuff not playing semicolons. That's not closing your brackets brackets. That's probably the most common thing that happens, especially when beginner javascript programmers start working with JavaScript. So if that ever happens, syntax is probably the first thing you want to check. So if you complete this program by yourself. I'm gonna congratulate you. That's awesome. If you needed help, that's fine, too. Everybody needs help here and there, and that's why I'm here. So now we have the solution to this program and we're all good to go. And the next lecture I'm gonna give you a brief quiz and test you guys on the JavaScript basics that we learned so far and they were going to be on the next section of the course, which is gonna be learning a boat, variables and all that kind of fun stuff in JavaScript. So I'll see in the next quiz, and we'll go on from there. 7. What is a Variable: variables are going to be important, and you're going to be using them a lot as you create programs throughout. This course at Variable is generally used to keep track of information when it comes to programming in JavaScript. Let's take a look at a popular game on the Web code. Pros request Brother's request Is popular game created on the Web using just JavaScript? If you ever get the chance, took it out. It's pretty cool, but enough about that. Let's get to the point. As we play the game, we can see that things such as air health, score, lives and damage our health, for example, is available. That changes depending on what happens in the game. Our score or lives is another example of variable. The main point I'm trying to make is that available is something that represents a certain value in our game, and it's always constantly changing. Here is an example of the basic syntax we use for creating at Variable and Javascript here we can see that our first keyword, called var, is short for variable. The next word is going to be the name of your variable, which can be whatever you like next. We have an equal sign and a number with this statement is saying is available Lives equals three when we are creating variable and giving it a name were signing a value to that variable. Now let's do more hands on approach and let's create an example of a variable we might use in a program. Let's use the variable and add it to our document that rate command. So in winter it a basic command here, which is gonna be our document dot right command. And I'm gonna add a string in this command. So let's type in the following. So then, that we have our document. Alright, command here, let's add available to this program and let's do it more hands on approach. So type in Navarre and the name of my variable is going to be example. And inside the brackets in the quotation marks of example we're gonna give it the value of I am a variable. What this basically says is that example equals I am a variable. So if we ever insert the key word example, then the text I am variable. We open it to the file, basically are variable is just representing something and in this case example is representing the string that we declared earlier. So if we say this and then run a program, we can see that the value of example will be open it to the document with our document that right command. The cool thing about variables is that we can change them as much as we like in the programs. Let's go back and change variable to do something else. Since we already declared a variable example, we can omit the VAR part is variable and just type example equals whatever we like it to be now because it's javascript reads our commands from top to bottom. We need to make sure that if you're going to change available, we need to insert it after our document dot Right command here. So we're gonna grab this piece of code here, copy it, then, after the document don't rate command, we're gonna paste it. So what we're doing here is where declaring our example variable as a certain string, writing it to document than after that gets written, we're giving it a different value and then writing that new value to the document, the part up here is going to run first, and then the part on the bottom is gonna run right after it. So let's say this and see what happens when you run the program. There we go. We can see that are variable changes throughout a program and has two different values that help put it. It's a document. This is the power of variables, and you will learn why this is important. As you work more with JavaScript in the next video, we're going to be talking more about syntax and name your variables because there's a few rules that we need to follow. 8. How To Assign Names To Your Variables: So I hope you are enjoying the course this far. And if I were you in your shoes, I'd imagine that you want to move on and do more program. But before we can do that, let's talk a little bit more about very both because there are some rules, as javascript, developers and programmers we must follow. For instance, you can't go around naming your valuables whatever you like. There's some keywords that we cannot use. For example, Bar. It's one of those key words we can't name a variable. Var. This is one example. Whoever there are too many more we can't use. You should check out the external links in this lecture, as I have included a reference to a list of all the different keywords that would give you a Syntex there if you try to use them as a variable name. If you ever get a syntax error when you are creating a variable and can't forgo what is the problem, then this might be a likely cause. The next thing worth mentioning is that a variable is not allowed to start with the number , but they can end with number. All variables must start with the letter here is an example of what I mean. One time is example of a wrong variable, while Time one is a correct name for variable variables can also only contain the following characters. Letters, numbers, the dollar Sign about you and underscores here some more examples of correct variables and incorrect variables. Take a second to study the sheet and try to find out the reason why each one is correct and why the incorrect variables are wrong to some. This lesson up, I want to mention that is important that you make your variable names clear, informative and easy to understand. For example, Player one is a better choice. Variable instead of people in player, one clearly tells us what are variable is about is about p. One kind of could lead to confusing if somebody else was to use your code or if it's been a long time since you've uses piece of code and you just forgot what P one was referencing to . Well, that's it for naming variables. Let's take a quick quiz and move on with the course 9. An Introduction To Strings and Numbers: So now that you have a good understanding of what variables are, let's talk a little bit. Vote strings and numbers. When you're entering information into a variable, we're adding value to that variable. But there are two types of values we can add to a variable these air strings and numbers. Let's go over numbers. First. Numbers are used for simple math equations and calculations who will be working with numbers a lot in this course, But for now, let's focus on strings, strings, air used for storing text and words. Here is an example of a string being used in a command. The string in this example is that part of the text that is in the quotations like I have highlighted here. Here's some more examples of strings commonly used in JavaScript. Strings can either be single quoted or double quoted, so you know what numbers and strings are. We can now move on further in the course. We will be working with strings and numbers a lot, so it's good to have a solid foundation and understanding of how they work in JavaScript 10. How To Creature Input From a User: you've learned quite a few commands so far in this course, so by now you should be slowly getting used to using them. In today's lesson, you were going to learn how to capture a user's input by using the prompt command. Let's look at a live example of a simple program that might use this command. We can start this command off by typing the following. We're then going to be adding a string to our prompt command as follows. Let's now run the program and see what happens when you run it in a Web browser and alert box of pop up and lower visitor to type in their age. But where did the number ago? Well, we can assign a variable to a prompt command, and then I'll put that variable to our page or use it in another command. Let's go through this step by step. First off, I'm going to give a variable toe a prompt command and give it the name visitor age, so I know what it will be referring to. Next up, I'm going to read a document that right command and I'm gonna insert our visitor name variable in our command So basically what's going on here is we're taking whatever the user inputs into the valuable visitor age and out putting it to the document. Let's save this file and CFO program is going to work correctly as we intended to. There we go. We can see that our visitors age is being l put it to the page six expertly. Pretty cool, huh? In the next lesson, you will learn how to combine strings together. 11. Combing Strings Together: Now that you know how to collect information from a visitor using the prompt command, we can start to build some programs that have a little bit of interactivity involved in them. Today's lesson You're going to be learning how to combine strings together to create some messages from our visitors input. Using the example from our last program, we're going to take our visitors age and add that input to another message. So let's start by creating a variable for the prompt command. I'm also going to add a variable for the user's name as well. We're gonna have to variables in this program one for our visitors age and one for their name. So we're gonna open this information to the document, but using the document dot Right command. So just follow along with me as I type this out. And what I'm basically doing here is I'm creating a string and I'm adding a plus sign. With this plus sign, I'm gonna type out our two variables here. I'm gonna first entered the visitors name. And what this is going to do is that visitor name variable is gonna grab the string and insert it into the stream were already typing here. Notice that I add a plus sign before and after the variable because I'm gonna be adding more string. And then after this part of string, we're gonna insert other variable to again. We had the plus sign, and then we just take part available. This is the basic syntax for adding your strings together. And JavaScript we have our hello part plus visitor name the rest of her string and then our visitors age. Very simple. We're going to save this and see if our program is running correctly. All right, so I'm gonna take my age here and on the type of name. All right. We can see that everything is working perfectly. As we plant, you notice that there's not spaces in her strings, and this is because javascript does not add spaces automatically. So we have to go into our strings here and just add a little space here. And once we preview the program again, we can see that the spaces will be added to our strings. So I'm gonna go through your and enter my age, of course, in my name again. And we can see that the spaces are added just like we want. So this looks a little bit better. Keep in mind that when we add in combined strings together and JavaScript is called Captain Ation, this is a fancy word for complaining streets together. All right, so that's pretty much the basics of combining strings and JavaScript. Try to do this and some of your programs to get some practice, and we'll move on to the next lesson. We would talk further about working with strings. 12. Working With Strings In Further Detail: as a JavaScript developer, you're going to be learning a lot, and that's going to be some problems that you're not going to know the answer to. Even after you finish this course, I guarantee you you will still need further help and be able to find information in this lesson. I'm going to show you some resources you can use to help you troubleshoot common problems you're going to encounter as a JavaScript developer. First, let's look at the Mozilla Developer network. If, for instance, you ever need help, which strings, you can reference the JavaScript section of the mdn. There are all types of commands, messages and properties listed on this page that can help you with your Cody. Anytime you have a problem or just want to learn something new, you can come here and reference all the helpful information for free. For example, let's use the Indian to learn a new command. We can use toe work with our new strings. Let's take a look at the Link Command on this page. We can see all the information about this command as well as example we can use to try it out with Let's take the example and add it to our JavaScript program just for this lesson. You were creating available called hot text. We're giving it the value of Indian. Then we were created. Another variable called You Earl, and that value is the link to the Indian website with their counseled allotment. Were writing to the council the following our string, plus our value from hot text in using the Link Command to make our euro variable high, brawling that if we click on it, it will take us directly to the Web page. This might be a little bit complicated, especially when you're using commands you have never seen before. But don't worry. Practice will make you better. Let's run the program and see what happens. We can see that we have our techs 100 page, and then we have a link. We can click here that takes us to the Manzella Manzella Developer Network. Pretty cool it. Try using the Link Command with other commands. You have learned so far to get a program of your choice. In the next lesson, you were going to use the information you have learned so far. Do you create a Web page that welcomes visitors to help AIDS and greets them 13. The Variable Coding Challenge: All right, everybody. So I hope you're ready to do some programming, because in this lecture, what I need you guys to do is I need you guys to build me a program. So we're gonna do is pretend as if I'm a client and you're working for me. And I need a program, and I need to do to have the following features. So we're gonna go this step by step. And, like, usual, you can follow along. I want you guys to try and do it on your own. And if you have any problems, you can watch me the next video. We'll I will come up. My own solution to the program doesn't necessarily mean that yours will be the same, but I will come up with my way of how I would do it. All right. So let's look at the program. And let's look at what you need to include in your program in order to pass challenge. So, first of all, down on the HTML and JavaScript files for this challenge. Second, your program needs to welcome the user to the webpage via an alert box. Then you need to ask the user further name, and then you need to ask the user for their favorite color. Then you're going to combine the user's name and the usual favorite color into a string that goes as follows and right de string to the document. Hello, user. Your favorite color is uses favorite color. Finally, I'll put a program complete string to the council to let us know that your script has has run successfully without any airs. If you think you can handle it on your own, try and give it a go. If you have any problems, don't worry. I'll be here in the next video to show you the complete solution to the variable and strings challenge. Good luck, guys. 14. Solution To The Variable Coding Challenge: I hope everybody is having a great day. And this lesson we're gonna show you guys the solution to the variable and strings challenge that presented to you in the last lecture. All right, so let's get started. So the first thing we need to do is we need to welcome our user to the page with another box. So they just waiting to do this would be using the alert command and typing in a string such as hello or welcome to our website. You can use whatever you want here. We didn't need to ask your user for a name, so I'm gonna create a variable and call it, visit her name, and then I'm gonna prompt the user and ask them What is your name? Make sure And my quote. All right, so we got that captured. We're then going to prompt easier and asked him for the favorite color and save it in the variable called visitors color or favorite color. Here. In this case, the next thing we need to do is mean to combine the user's name and favorite color together into a string that goes as follows. Okay, so this part, we're gonna have to combine our strings together, remember? And we're gonna have to start it off by Iranian document dealt right, Command, because you got output to the page. What we're gonna do is going to take the string that we were required and we're gonna enter it in here. And then instead of the spots for the user's name and the users favorite color, we're gonna put the variables that we created earlier that's gonna store that information and then I'll put it to the page. So here we're gonna put the visitors name. They were gonna finished type Notre string here, and then we're gonna insert the favorite color as well. Remember that when you make your strings that you add a space before your variable and after variable so that everything is not to switch together. Okay, so our program is looking pretty good. We're almost done next up, we need to do we need to up with a program complete message to the council so we can simply do this by doing council that log and then typing something along the lines of program complete or anything like that would be acceptable in this matter. Okay, so we're gonna save our program and hopefully using runs pretty good. Let's check it out and see what happens. Okay, so we're welcomed. We can enter my name here. Then we enter my favorite color and we could see Ariel. Hello, Robin. Your favorite color is green. So that part's working pretty good. But we gotta check the consulate lock, remember? And we could see that our program complete so we can see that everything in the program ran successfully. And that's a challenge for you guys. So if you guys had trouble with that, that's fine. Just watched the video and then try to create again on your own, if possible. And for anybody who did complete the program, let me know. I want to hear how you guys did. If you guys pass it, that's awesome. Let us know if you have any issues. Write about it in the discussion, setting this video, and we can move on to the next section after that. But before we can, you guys need to do one quick little quiz on strings, and then we're gonna talk about numbers and math 15. What are Numbers: Hello, everybody. How is it going? All right. So far we have talked in depth about both strings and variables. So now we're going to shift our focus towards numbers, which are is equally as important and jump street numbers used in all types of calculations and programming. Our score in a video game, adding the total of purchases. See how much money you owe. These are all examples of how the numbers are used in program. First, let's talk a little bit about integers before we can move on. A whole number is what we call an integer. Here are some examples of what integers will look like. 55 78 3333339 67 All these are These are all examples of whole numbers or what we call in programming imagers. Next up are floating point numbers. 14 point numbers of the Samos integers, except that they have a decimal place in them. Is your 0.1 0.55555 decimal 23 are all examples of floating point numbers. Lastly, we have scientific notation. We can even use scientific notation for calculations and javascript. Here's some examples, but keep in mind that isn't used that much. And don't worry if this makes my sense, you can use this Just his reference. Here is an example of how we can assign a number to available each of the different types of numbers that we just discussed. Do you notice something different here than when we assign variables? Two strings. The main difference to notice is that we assign a number to a variable. And when we do, we don't use quotations. Otherwise their number will be treated like a string later on. In this course, you will learn how to convert a string toe a number. But for now, I want you to focus on the difference between the two and how we assign them two variables strings. We use quotations, numbers. We just take the number in and leave out the quotations. That's the main thing that is important for now. Okay, so once that makes sense for you, we can move on to the next course, and we're gonna be working more with numbers 16. How We Do Math In JavaScript: as you progress through your JavaScript career and journey, you're going to realize that programs will car you to do a lot of math in this lesson. And we're going to be looking at how we can use math to build the program in JavaScript that will tell a user how many days they have been life for. But before we can do that, we need to learn how to do basic math and JavaScript. So let's begin to add numbers together in JavaScript used the plus sign a fancy word for the plus sign. Is Alta also the addition operator? So here we're any nine. Personally, if we wanted to subtract three from nine, we would simply use the minus sign. If we wanted to divide to numbers, we would use this last sign showing like this. Do you multiply two numbers you'd use the gastric symbol calculations and JavaScript are usually done when you take input from a visitor and use it input to come with her final. Okay, take our program that would calculate how many days you have been alive, for example, we're going to need to prompt easier and ask them for their age. Then take that number and multiply it by how many days are in a year? But how do you write that in code before we can do that? When you talk a little bit more about doing calculations with variables, let's say, for example, we were creating a game where a plumber had to save the princess from a giant turtle in his castle. Every time a player would grab a mushroom, he would gain one life. We could write something like this. Variable lives equal Street lives equals lives plus one. What this land of code is saying is, are variable lives is first equal to three. We would and then insert the second part of the code whenever a player collected a mushroom . It's basically saying lives equals the current value of lives that added one to that number . In the final number, number will be stored back in the variable lives, so at the end, lives to be equal. Before there is also a shorthand version for adding and job script as well, which is exposed lives plus equals one. You can use either version you like. Just pick the one that makes sense. So we're going to stick with the basic version just so you understand what it means I have included a reference page in the external fire Was part of this lecture you can t take a look at for a full list of shorthand syntax for doing calculations and JavaScript. So let's build a program. The first thing that we're going to need to do is mean to figure it with the visitors ages . So we're gonna have to prompt the user what their ages. So to make a variable color visitors age and then right, the prompt command something along the lines of asking them for their age. Once we have that all figured out, we could then create another variable. And we're gonna call this one years of life. Basically, what this variable is going to do is we're gonna take that string that they entered in and converted it to a number and parse End does exactly that. So we're gonna take our visitors age here, insert it in the brackets here, and basically what this is doing is we're taking your visitors age, taking the string from it, converting that string toe a number and then saving it as years alive. So nada. Our string is saved as a number. We can act produce a multiplication with it. So the next line of code we need to take the visitors years lived and multiply it by how many days are in a year. Okay, so now we're gonna do Our math we're gonna do is we're gonna take our years coming years alive, variable. And we're gonna multiply it by how many days in a year? In this case there. 365 days in a year. So basically, we're taking the users years alive. TNS String converted it to a number, then multiplying that number by 3 65 then making a document that right command and out putting that number and a string there we're gonna create here seems a little bit complicated, but once you get the hang of doing math, multiplication, JavaScript, let's not do that. So here we have a nice little program that would tell somebody how many days they've been alive for pretty neat. So we're gonna face entering our strings here. Then once we're finished, we can save the program and then test it and see if everything is working correctly. All right. So let's add in my age, which is 24 we can see I've been alive for 8760 days. That seems like a long time. Just to be sure, though. We're gonna pick another number and enter it in here. And we can see that with two. Our multiplication is correct. So this program is working exactly as we intended to. Let's do one more, just to be sure. Alright, Awesome. Everything is working perfectly. You are now ready to work with the math object, which is very important for doing calculations and job script. I'll see you guys in the next video. 17. Working With The Math Object: in today's JavaScript lesson, you were going to learn how to create random numbers using the math object. So for reference, in case you forgot, strings and numbers are two different types of objects, and these objects have properties. For example, a stream can have a length property, which outputs how many characters are in that strength. Objects also have actions that they could perform, which we call methods and JavaScript. For example. We could take a string and add the lower case method, which were changed all the characters to lower case Even if we type them in Capital Letter and this lesson, however, we're going to focus on the math object. So let's talk about that for a second. With the map object, we can do all kinds of advanced mathematical calculations. For example, if we go to the mdn, we can see that there is a math property for the math object that lets us calculate the square root of a number or get the number of pie, which we used to calculate the area of a circle. We can also see all the methods listed on the side here as well. The main method that we're going to be looking at is the math dot random method. So let's type this in and see what happens. I'll give this round a number of variable as well that we can write it to the document. Okay, so if I run the program, we can see a random floating point number between zero and up to, but not including one is displayed. I'm going to hit a five a few times, which is the keyboard shortcut for refresh, so you can see that every time you run a program, we do actually get around him number. But what if we wanted a whole number instead of, let's say, between one and 50? Well, what we could do is we could multiplayer result by 50 everyone a program. We can see that we're getting a little bit closer to what we want. The problem is, we still don't have an integer yet. Luckily, JavaScript also has a way for us to easily do this with the math dot floor method in the math dot sealing method, Maths top floor around the number to the lowest integer and math thought ceiling were wrong . Number two, the highest. So if we wanted to make sure that we hit a number between one and 50. We would use the map top floor command, just in case so we don't get a 51 by accident. Now, this might look a little bit complicated, but it's not too bad. Just try to follow along with me in JavaScript. Code inside the innermost parenthesis happens first. Then we work our way outwards. So if we look at this Damon, the following happens first, a random number between zero and up to, but not including one just generated. Then that random number is multiplied by 50. Then the decimal is rounded down cold might be complicated, but the main thing that is important is that you understand what is going on here. We also add the plus one at the end that if we do get a possible 50 since we're rounding down, we can only get a max of 49. So that's why we have the plus one. Just in case everyone a program can see that we never found a solution that gives us a whole integer between one and 50. So using all this knowledge that you learned in this lecture, let's create a program that generates a random number between one and 60 18. The Numbers Challenge: you've been working a lot with numbers and doing a lot of math in this section of the course. Don't worry, we're almost done. We just have a challenge and then a quiz and you'll be done with this section. Your product for this challenge is to do the following. Create a program that generates a random number between one and with the user inputs, for example. You use it and puts the number 20. Your program must then generate a number between one and 20 then write it to the document so the user can see the random number generated. Like usual. See if you can complete this product on your own. If you get stuck or need help, come join me in the next video, where I will walk you through the solution step by step. I wish you luck and let me know how you do in this challenge. 19. Solution To The Numbers Challenge: all right to the goal for this challenge was to create a program that would generate a number between one. Whatever the user inputs as a second number, like usual, I encourage you to try this program on your own. But if you're stuck there, need help. Let's walk through this step by step. It's the first thing I'm gonna do here is going to create a variable and college user number. We're going to use a prompt command to ask the user to enter a number. All right, so once we have that all figured out, we can then take that number and we're going to change that Number two an integer by using the parts and command, remember that we need to take a variable into the brackets here. So now we're taking our 14 point number and changing it to a whole number, or we like to call an integer. Next, we're gonna take our whole number and then do our calculations for that number so that our number is going around between one and whatever the user inputs, we're gonna use the same code we used in the last video. But instead, we're gonna use the variable user number instead of the 50 that we had before river to add the plus one at the end. Otherwise, you're not gonna hit the top number. The teaser inputs. Next, we're going to create alert box and alerted the user with the random numbers. I think I might have mentioned to write it to the page in the last episode. But that's OK. You can use the alert box fine. Here. All right, so I think our code is good to go. We're gonna save everything here, and hopefully it all runs smoothly again. We can see here that we're prompting the user, asking them for a number, taking that number and changing it from a floating point number two, a whole number taking that whole number and using our formula here to generate our number between whatever one, whatever the user inputs. And then we're just alerting it so that users with the numbers let's give it a run. All right, so I'm gonna enter a number here. Okay. We can see there around a numbers generated. Let's do it again a couple more times just to see that our program is working correctly. All right, so I think we get a program that's working pretty fine. So again, I'm gonna congratulate you guys if you manage to finish it on your own. If you needed help, that's fine, too. You're pretty much done working with numbers. We're gonna do a quick quiz. Then after this, we're gonna move on to conditional statements which are very strong and very powerful. And JavaScript, I hope you're enjoying the course so far and let me know what you think.