JavaScript Basics - The Complete JavaScript Course For Beginners

so before we can start actually programming I want to take a little bit of time and talk about what will be actually be covering in this course so first of all JavaScript is like a language and like language is it has its own grammar sort of similar to the English language in other word we can call it is syntax the syntax is JavaScript commands words a punctuation remember when you were younger you didn't understand English or whatever your primary language was you went to school and study at first the words didn't make much sense but eventually words made sense more together grammar was added in 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 are 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 an excellent 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 you will 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 your program perform all the best they can last but not least you will of course be doing a lot of programming in this course 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 alright grab yourself some Java no pun intended and let's get started learn some JavaScript alright so welcome back to the course I know you excited to get started with programming right away but before we into programming there's some things we need to cover first first of all we need to make a new folder on our desktop and I advise you to make it on your desktop so that you can access this folder at any time throughout this course I made a folder here and I'm going to call it JavaScript basics and we're going to do here is we're going to open up a file and we're going to have a text document and we can call this document whenever we like all right so we have a name for my Tech Stockman here and we're going to again open it up so we can edit it justice so you guys can see and what we're going to do here is we're going to add a few little syntax things for HTML just so that everything works here and you guys aren't to worry about this too much I'm just going to add this in really quick you all right so we have the overall syntax of our HTML document made and again now able to to much I'm going to cover this in more detail later in the course I just want to get you guys set up and running but basically what we have here is we have HTML tags and basically what these two tags mean is anything within these two tags are going to be our HTML and then in our HTML tags we have our script tags anything in the script tags is going to be JavaScript again don't worry about this if this is confusing we'll be covering things like syntax later on but just keep in mind that our JavaScript is going to be in these two script tags right here so in these two tags we're going to write our first command and this command is going to be our alert command now what this command does is it sends a notification box to the user to alert them of whatever message we write so if we click in our brackets here and add a message this message will pop up on the screen in a notification 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 semicolon at the end of our command all commands and statements in JavaScript need to have semicolons after them since they run in order so if we were to ever to make a statement and not have a semicolon we're going to get an 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 you kind of think of it like a sentence in English you always want to have the period at the end of your sentence but in JavaScript you want to have a semicolon so so now in order to get this actual program to work we're going to need to save it so we're going to go up to file here we're going to hit save as and we're going to save it as whatever name you like but at the end you're going to want to make sure you write dot HTML what this is going to do is it going to tell our computer to open up the style as an HTML HTML file so again if we go back to our folder here you're going to see it there's now a new a new document here and this is going to be in web browser documents so if you guys have Firefox Google Chrome or whatever it is you're using it's now going to be open open able in your web browser so let's double click this and open it up here and we can see here that our message is now displaying they wrote earlier in a notification box and if we hit OK the program is now done so this is how we're going to open up our programs and as we get more familiar with programming in JavaScript we're going to be using an actual code editor and that's we're going to cover later on but for now we're just going to be using notepad for this lesson so let's open up our document back up and in this document we're going to write another command and this command is going to be slightly different you so let's go over this really quickly this is called the document right command and what this command does is it will write text on to the page that the user is viewing so again in these brackets here we can enter in some quotations and we want to make sure there's a semicolon out to the end of this command don't worry about with the dot means right now we're going to be 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 if we hit okay the next statement enters in and it outputs whatever we wrote in the document right here on to the page so just I wanted to do this to demonstrate you guys that statements basically run one after another you'll see that it ran the first one first and then it ran the second one right after the first one completed and the first one completed after we clicked at okay box so it's important to understand that JavaScript run statements from top to bottom it starts to the top and reads all the way to the bottom and we'll go through the statements as we enter them in our program you so this looks a little bit confusing looks a little bit sloppy and that's because we're using notepad as you get to this course we're going to learn how to use different code editors but to close this lesson up what we're going to do is I'm going to show you guys an actual code editor that I use and the one I installed is called notepad plus plus so if I look at my our browser our browser document that we made that we saved it as we right-click it we can hit edit with this and if you install your coding notepad notepad whatever text editor you're using usually an option to open it directly and if we click edit with notepad plus plus which is the one I'm using we can see here that everything looks a little bit different than what it looks at notepad it looks a little bit more better but code is easier to read we have color coded you can see that everything's a little bit more organized what we can do which is pretty cool here I'm going to close this here is we can save this directly in here just hit save like we gotta make a change first so let's change this to all right so let's give this a save and if we close this open up our browser again we can see that it's instantly applied so it saves us a lot of time between saving and whatnot we can enter the file edit the file directly so what you want to do is you want to get a text editor and when you give is give you guys a link to notepad plus plus that I use but you can really use any coding 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 notepad plus plus but it doesn't really matter what you have but that's pretty much brings it a close to this lesson I want you guys to feel proud about yourself you created your first program in JavaScript and I wanted to do this because it's going to show you guys that this isn't really that hard anybody can do this we just got to work slow start from the ground up and get going so congratulate congratulate you guys feel good about that you've just created your first JavaScript program alright so in order to start this course so before we can get into the real programming and doing all the actionable stuff in JavaScript what we first need to understand is what really is JavaScript 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 later on we're going to learn and we're going to show 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 alright so 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 Java Java and JavaScript are two very separate things so let's talk about Java very briefly javascript first started out it's a small language used for web applications to run on the web but it's now used as a powerful programming language online we can see here that this website called the interactive ear is a cool little website used by JavaScript to really show us what the inner part of the ear is and different things like that this is a nice interactive page that somebody built just using javascript and the next example we have we create digital chemistry which is another interactive website that shows people different things about chemistry and we have this nice little page that auto loads as we go down here some nice effects I'll use with JavaScript Maps TD is the website where 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 & 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 Java Script as well as Facebook Twitter and all those websites as well browsers request another video game based website online all created with JavaScript and we have this really cool game which is called draw stickman which you basically are drawing a stickman 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 will need in order to get off to a good start online so don't sweat it in the next few lessons you're going to be building your own JavaScript program as well it won't be advanced as these examples but everybody's going to start somewhere and this is where you're going to start your journey and learning JavaScript online okay so before we go further in the course one thing I need to show you guys is how to access the external files for each lesson of the course so if we go in here and we click on a particular lesson for a JavaScript basics course when stopper video from playing you'll notice here that we have a sidebar on the right at the top here we have an arrow pointing down if we click this error we can see here that we have the downloadable files we also had the lecture description once again our follow we can download and some external resources for the course as well these are going to be extra pages web pages that are going to explain anything that I cover in these videos that you know maybe you want to read up on or just you know check helton for the details so if you ever get stuck in your lesson and you just can't figure out your code and you don't know what's going on you can always download the external file which you have the result code for the end of the lesson so if we down the file we can click it here and open it you're going to need a WinZip or WinRAR or something like that the open zip files but once you open the file we can now run it you can see that our script for this particular lesson can easily be run here so this is just for you if you ever get troubles or let's say you can't get your program to run if for some reason you still have troubles after this which you can do is you can go to the top here you can start a discussion you can also take notes for each lesson and if we go back to the first tab it just takes us back to the course where you can go to the lectures so that's it I want to show you guys how to access to your sterno files now let's get ready and let's start programming with JavaScript it's very common to keep all of your JavaScript files separate from your HTML files this helps you organize everything especially once your files start to get really big make sure that when you create your JavaScript file you don't put your HTML CSS or anything else in there just use JavaScript for now we can see here in this document I inserted some JavaScript at the top here we have a document direct command if we save this page and open it we can see that our JavaScript will be a wind up at the very top of our page here for our web page content now what we're going to do in this lesson is we're going to take this javascript code and make it into a separate file and import that file into our HTML document so the first thing I'm going to do here is I'm going to create the JavaScript we had before and I'm going to create a new file and call it J s we're then going to open up that notepad file and we're going to file save as J SJS 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 JavaScript file we see here that now that file is different and we can delete our own notepad file we had before we are now going to open up an edit our new JavaScript file in our notepad plus plus or whatever code editor you have we're then going to take our command here we're going to copy/paste it I'm going to paste it into a new JavaScript file we're going to delete what we have here and next up we are going to add some new tags we're going to add a head to take here and basically the head tags you don't need to worry about now we will explain it later but just for now in the head tags we are actually going to import our JavaScript so let's look at this command a little bit deeper now with this command and the quotations what we do is write the file path to our external javascript file you remember I named our file jsj s so as long as our file here is in the same folder as our HTML document all we have to do is put the name of a file plus the extension which is our case is J s before you preview this make sure that you save your HTML document as well as your external javascript file we can see here that our JavaScript code is now displaying correctly in our external sheet one thing that I'm going to point out really quickly is that the placement that we have our JavaScript on our web page can dramatically affect performance and the load ability of our web page generally speaking you want to put your JavaScript at the bottom of your web page if possible so I'm going to add some footer tags here and I'm going to place my JavaScript source file in here so now what happens here is that the web page content will load first and then our JavaScript file will learn right after you can see here that now our data script code is placed at the end of the document 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 lectures and all the coding content using external javascript files if you need help with this or you just can't get this to work then please consult the teacher files that I will add to download that you can do so to sum things up to this lecture try to keep your JavaScript and external file that is separate from your HTML in CSS this will help you a lot as your projects get bigger if possible inserting your source code at the end of your HTML document like the HTML load first in a JavaScript sever creasing performance and page speed of your website try linking your own external javascript file for practice and see if you get it working correctly once you finish this I will be waiting for you in the next lecture of the court how are you 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 JavaScript console challenge now I wrote this program but I've seem to be having troubles getting to work you see the problem is when I run this program in my browser and I open the JavaScript console I'm getting all these problems these errors are popping up here now I'm going to need your help to fix this so what I need you to do is I need you to take these code files there's going to be two and a sheet that you can download in the external resources for this lecture so go to external files and download the zip file and the zip file there be two files here and I need you to fix this JavaScript code here so that there's no errors in the JavaScript console if you can do that that'd be awesome you pass the test so I challenge you to do this on your own if you guys are having any trouble don't worry we're going to go through this in the next lecture and I'm show you guys everything you need to know so try it on your own and best of luck and let's fix this program guys let's use a JavaScript console and fix this program once we do that all right everybody so I'm in the console challenge here and this is the two documents that I have so the first thing I'm going to do is I'm actually going to open up our program here in the browser I'm going to run the console what I'm gonna do here is I'm going look at some of the errors that pop up here when you see here that we have some syntax errors so what we're going to do is we're going to open up our actual document here so I'm going to open up with my notepad plus plus and in here I'm just going to take a quick look and see if there's any things missing in this syntax so we can see that our alert command looks like it's pretty fine our document right command is pretty good oh let's look at that we are missing a bracket right here so let's add that bracket in now that looks much better let's continue down the page console dot o we can see we're missing a G here so we're just going to enter that in really quickly and that looks pretty good and in the next consult log we can see here that everything looks pretty good except for a very common mistake is if you guess we forgot the semicolon then you are absolutely correct I'm going to stick that in there and I'm going to save this file here and I'm going to point out that you guys a shortcut to save instead of going to file save every time you want to save is you can hit ctrl s on windows so now I'll file has saved if we open up a file again we can see that we have our notification box pops up here and we have fixed this line of code 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 seasoned you can kind of take a quick look by using the console we can see that we had a couple syntax errors so basically spelling mistakes you know all that common stuff not putting semicolons that's you know 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 going to 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 in the next lecture I'm going to give you guys a brief quiz and test you guys on the JavaScript basics that we learned so far and then we're going to move on the next section of the course which is going to be learning about variables and all that kind of fun stuff in JavaScript so I'll see you in the next quiz and we'll go on from there the availables are going to be important and you're going to be using them a lot as you create programs throughout this course I variable it's generally used to keep track of information when it comes to programming and JavaScript let's take a look at a popular game on the web called Prowse requests browsers request is a popular game created on the web using just JavaScript if you ever get the chance check 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 our health score lives and damage our health for example is available that changes depending on what happens in the game our score or our lives is another example of a 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 a 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 what this statement is saying is variable lives equals 3 when we are creating variable and giving it a name we are assigning a value to that variable now let's do a more hands-on approach and let's create another example of a variable we might use in a program let's use a variable and add it to our document write command so I'm going to write a basic command here which is going to be our document write command and I'm going to add a string in this command so let's type in the following so now that we have our document I'll write command here let's add a variable to this program and let's do a more hands-on approach so I'm going to type in var and the name of my variable is going to be example and inside the brackets in the quotation marks of example we're going to 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 keyword example then the text I am a variable we output it to the file basically our variable is just representing something and in this case example is representing the string that we declared earlier so if we save this and then run our program we can see that the value of example will be outputted to the document with our document read command the cool thing about variables is that we can change them as much as we like and our programs let's go back and change our variable to do something else since we already declared our variable example we can omit the VAR part as variable and just type example equals whatever we like it to be now because this javascript reads our command from top to bottom we need to make sure that if you're going to change a variable we need to insert it after our document write command here so we're going to grab this piece of code here copy it then after the document dot write command we're going to paste it so what we're doing here is we're declaring our example variable as a certain string writing it to the document then 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 going to run right after it so let's save this and see what happens when you run the program there we go we can see that our variable changes throughout our program and has two different values that are outputted to the 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 naming your variables because there's a few rules that we need to follow so I hope you are enjoying the course thus far and if I were you in your choose I'd imagine that you want to move on and do more programming but before we can do that let's talk a little bit more about variables because there are some rules as JavaScript developers and programmers we must follow for instance you can't go around naming your variables whatever you like there are some keywords that we cannot use for example var is one of those key words we can't name a variable var this is one example however there are 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 will give you a syntax error if you try to use them as a variable name if you ever get a syntax error when you are creating a variable you can't figure out 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 a number but they can end with a number all variables must start with a letter here is an example of what I mean one time is the 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 value and underscores here are 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 sum this lesson up I want to mention that it is important that you make your variable names clear informative and easy to understand for example player 1 is a better choice very variable instead of P 1 player 1 clearly tells us what our variable is about as about P 1 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 used this piece of code and you just forgot what P 1 was referencing to well that's it for naming variables let's take a quick quiz and move on with the course so now that you have a good understanding of what variables are let's talk a little bit about strings and numbers when you're entering information into a variable we are adding a value to that variable but there are two types of values we can add to a variable these are strings and numbers let's go over numbers first numbers are used for simple math equations and calculations we will be working with numbers a lot in this course but for now let's focus on strings strings are 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 are some more examples of strings commonly used in JavaScript strings can either be single quoted or double quoted so now that 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 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 are 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 are 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 our web browser an alert box will pop up and allow our visitor to type in their age but where did that number go well we can assign a variable to our prompt command and then output 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 to 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 write a document write command and I'm going to insert our visitor name variable and our command so basically what's going on here is we're taking whatever the user inputs into the variable visitor age and outputting it to the document let's save this file and see air file program is going to work correctly as we intend it to there we go we can see that our visitors age is being outputted to the page successfully pretty cool huh in the next lesson you will learn how to combine 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 are 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 so we're going to have two variables in this program one for our visitors age and one for their name so we're going to output this information to the document by using the document dot write 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 going to type out our two variables here I'm going to first enter the visitors name and what this is going to do is that visitor name variable is going to grab the string and insert it into the string we're already typing here notice that I add a plus sign before and after the variable because I'm going to be adding a more string and then after this part of the string we're going to insert a other variable so again we add the plus sign and then we just type write our variable this is the basic syntax for adding your strings together in JavaScript we have our hello part plus visitor name the rest of our string and then our visitors age pretty simple we're going to save this and see if our program is running correctly all right so I'm going to type in my age here and I'm going to type a name all right we can see that everything is working perfectly as we plant you notice that there's not spaces in our 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 going to go through ear 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 and combine strings together in JavaScript it is called concatenation this is a fancy word for combining strings together alright so that's pretty much the basics of combining strings in JavaScript try to do this in some of your programs to get some practice and we will move on to the next lesson we will talk further about working with strings as a JavaScript developer you're going to be learning a lot and there'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 are going to encounter as a JavaScript developer first let's look at the Mozilla developer Network if for instance you ever need help with 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 coding 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 mdn to learn a new command we can use to 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 here we are creating a variable called hot text we are giving it the value of M DM then we are creating another variable called URL and the value is the link to the mdn website with our console dot log command we are writing to the console the following our string plus our value from hot text then using the link command to make our URL variable a hyperlink that if we click on it it will take us directly to the webpage this might be a little bit complicated especially when you are 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 text centered page and then we have a link we can click here that takes us to the Mozilla Mozilla developer Network pretty coy 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 are going to use the information you have learned so far to create a web page that welcomes visitors to web page and greets them 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 going to do is pretend as if I'm a client and I'm working you're working for me and I need a program and I need to do to have the following features so we're going to go over 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 in the next video well I will come up with my own solution to the program doesn't necessarily mean that yours will be the same but I will come up with my my way of how I would do it alright so let's look at the program and let's look at what you need to include in your program in order to pass a challenge so first of all download the HTML and JavaScript files for this challenge second your program needs to welcome the user to the web page via an alert box then you need to ask the user for their 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 users favorite color into a string that goes as follows and write that string to the document hello user your favorite color is users favorite color finally output a program complete string to the console to let us know that your script has run has run successfully without any errors if you think you can handle this 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 hope everybody is having a great day in this lesson we're going to show you guys the solution to the variable and strings challenge that I presented to you in the last lecture alright 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 the easiest way to do this would be using the alert command and type it in a string such as hello or welcome to our website you can use whatever you want here we then need to ask your user for a name so I'm going to create a variable and call it visitor name and then I'm going to prompt the user and ask them what is your name make sure I add my quotes here alright so we got that captured we are then going to prompt the user and ask them for the favorite color and save it in the variable called visitors color or favorite color here in this case you the next thing we need to do is we need to combine name and favorite color together into a string that goes as follows okay so this part we're going to have to combine our strings together remember and we're going to have to start it off by writing a document right command because you got to output it to the page what we're going to do is going to take the string that we were required and we're going to enter it in here and then instead of the spots for the user's name and the users favorite color we're going to put the variables that we created earlier that's going to store that information and then output it to the page so here we're going to put the visitors name then we're going to finish typing out our string here and then we're going to insert the favorite color as well remember that when you make your strings that you add a space before your variable and after your variable so that everything's not too squished together okay so our program is looking pretty good we're almost done next up we need to do is we need to output a program complete message to the console so we can simply do this by doing console dot log and then typing something along the lines of program complete or anything like that would be acceptable in this manner okay so we're going to save our program and hopefully everything runs pretty good let's check it out and see what happens okay so we're welcomed we can enter my name here and then we enter my favorite color in we can see oh there we go hello Robin your favorite color is green so that part to work in pretty good but we got to check the console that log remember and we can 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 watch the video and then try to create it 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 to 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 going to talk about numbers and math hello everybody how is it going alright so far we have talked in depth about both strings and variables so now we are going to shift our focus towards numbers which are as equally as important in JavaScript numbers are 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 numbers are used in programming 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 78332 33 9 67 all these are these are all examples of whole numbers or what we call in programming integers next up our floating point numbers floating point numbers are the same as integers except that they have a decimal place in them zero point one point five five five five five decimal 23 are all examples of floating point numbers lastly we have scientific notation we can even use scientific notation for calculations in JavaScript here are some examples to keep in mind that isn't used that much and don't worry if this makes much sense you can use this just as reference here is an example of how we can assign a number to a variable of each of the different types of numbers that we just discussed do you notice something different here then when we assign variables to 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 to a number but for now I want you to focus on the difference between the two and how we assign them to variables strings we use quotations numbers we just type 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 going to be working more with numbers as you progress through your Java Script career and journey you're going to realize that programs will require 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 the user how many days they have been live 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 we use the plus sign a fancy word for the plus sign is also also the addition operator so here we are adding 9 plus Lee if we wanted to subtract 3 from 9 we would simply use the minus sign if we wanted to divide two numbers we would use the slash sign showing like this to multiply two numbers you would use the asterisk symbol calculations and JavaScript are usually done when we take input from a visitor and use it input to come with our final outcome take our program that will calculate how many days you have been alive for example we are going to need to prompt the user and ask them further an 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 equals three lives equals lives plus one what this line of code is saying is our variable lives is first equal to three we would end then insert the second part of the code whenever a player collect in a mushroom it's basically saying lives equals the current value of lives than adding one to that number then the final number will be stored back in the variable lives so at the end lives would be equal to four there is also a shorthand version for adding in JavaScript as well which is as follows 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 file as part of this lecture you can take a look at for a full list of shorthand syntax for doing calculations in JavaScript so let's build a program the first thing that we are going to need to do is read to figure it with the visitors ages so we're going to prompt the user what their ages so to make a variable call it visitors age and then write the prompt command something along the lines of asking them for their age once we have that I'll figure it out we could then create another variable and we're going to call this one years alive basically what this variable is going to do is we're going to take that string that they entered in and convert it into to a number and parse int does exactly that so we're going to take our visitors age here and search it in the brackets here and basically what this is doing is we're taking our visitors age taking the string from it converting that string to a number and then saving it as years alive so now that our string is saved as a number we can actually do some multiplication with it so the next line of code we need to take the visitors years live and multiply it by how many days are in a year okay so now we're going to do our math we're going to do is we're going to take our years come at yours the live variable and we're going to multiply it by how many days in a year in this case there are 365 days in a year so basically we're taking the users years alive te next string converting it to a number then multiplying that number by 365 then making a document dot write command and outputting that number and a string there we're going to create here it seems a little bit complicated but once you get the hang of doing math and multiplication in JavaScript that's not too bad 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 going to face entering our strings here then once we are finished we can save the program and then test it and see if everything is working correctly alright so let's add in my age which is 24 we can see I've been alive for eight thousand seven hundred and sixty days that seems like a long time just to be sure though I'm going to 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 make things working perfectly you are now ready to work with the math object which is very important for doing calculations and JavaScript I'll see you guys in the next video in today's JavaScript lesson you are 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 string can have a length property which outputs how many characters are in that string objects also have actions that they can perform which we call methods in JavaScript for example we can take a string and add the lowercase method which will change all the characters to lowercase even if we type them in capital letter in this lesson however we are 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 we get the number of pi which we use 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 are going to be looking at is the math.random method so let's type this in and see what happens I will give this round a number a variable as well so that we can write it to the document you okay so if I run the program we can see a random floating-point number between zero and upto but not including one is displayed I'm going to hit f5 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 a random number but what if we wanted a whole number instead of let's say between 1 and 50 well what we could do is we could multiply our result by 50 if we run our program we can see that we are 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.floor method and the math sealing method mat floor we round the number to the lowest integer and math dot ceiling we're round the number to the highest so if we wanted to make sure that we hit a number between 1 and 50 we would use the math the floor command just in case so we don't get a 51 by accident you now this might look a little bit complicated but it's not too bad just try to follow along with me in JavaScript the code inside the innermost parentheses happens first then we work our way outwards so if we look at this statement the following happens first a random number between 0 and upto but not including 1 is generated then that random number is multiplied by 50 then the decimal is rounded down the code might be complicated but the main thing that is important is that you understand what is going on here we also add the plus 1 at the end so that if we do get a possible 50 since we are rounding down we can only get a max of 49 so that's why we have the plus 1 just in case everyone our program you can see that we now found a solution that gives us a whole integer between 1 and 50 so using all this knowledge that you learned in this lecture let's create a program that generates a random number between 1 and 16 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 1 and with the user inputs for example your user inputs the number 20 your program must then generate a number between 1 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 channel alright so the goal for this challenge was to create a program that would generate a number between 1 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 or any help let's walk through this step-by-step so the first thing I'm going to do here is I'm going to create a variable and call it user number we're going to use a prompt command to ask the user to enter a number you you all right so once we have that all figured out we can then take that number and we're going to change that number to an integer by using the parse and command remember that we need to take our variable into the brackets here so now we're taking our floating-point number and changing it to a whole number or we like to call an integer next we're going to take our whole number and then do our calculations for that number so that our number is going to round between 1 and whatever the user inputs we're going to use the same code we used in the last video you but instead we're going to use the variable user number instead of the 50 that we had before remember to add the plus one at the end otherwise you're not going to hit the top number that these are inputs next we're going to create alert box and alert it the user with the random number is I think I might have mentioned to write it to the page in the last episode but that's okay you can use the alert box fine here all right so I think our code is good to go we're going to 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 to a whole number taking that whole number then using our formula here to generate our number between whatever 1 and whatever the user inputs and then we're just alerting it so that the user knows what the numbers let's give it a run all right so I'm going to enter a number here ok we can see there a random number is 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 going to 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 going to do a quick quiz then after this we're going to move on to conditional statements which are very strong and very powerful in JavaScript I hope you're enjoying the course so far and let me know what you think

Channel: JavaScript Tutorials

Views: 132,990

Keywords: JavaScript (Programming Language), javascript course, learn javascript, javascript for beginners, javascript, java, lavascript course online, javascript beginners lesson, javascript lessons, javascript video, Learning (Quotation Subject), Java (Programming Language), free javascript lesson, free javascript course, web developing javascript, Web Development (Interest), javascript full course, javascript online courses, javascript basics, Learn JavaScript Programming For Beginners

Id: 10ujZygJzMQ

Length: 60min 0sec (3600 seconds)

Published: Fri Nov 06 2015