An Introduction to JavaScript - Course for Beginners

Key Takeaways

hello everybody and welcome to this javascript course for beginners so this course is going to aim to teach you the fundamentals of javascript and give you a really good introduction so you can follow along with some more intermediate and advanced topics after completing this this is not going to be a full comprehensive overview of javascript it's really just an introduction and this is going to be great for beginners or people that are just getting started so don't worry if you've never programmed before you can definitely follow along with this and if you have then that's just going to make it easier to understand all of the topics that i'm going through so one last thing i'll say before we get started this course that you're looking at right now used to be 16 individual videos so if you look at my youtube channel i actually have a javascript series what this video is is simply a combination of all of those videos into one and i've re-edited them so it's a little bit easier to see understand and hopefully will just be a better experience for you guys when you're following along with it that being said if you want to skip through or look at the different sections in this course you can do so by going to the description there should be some time stamps and with that being said that's all i wanted to tell you guys so i hope you enjoy if you do make sure you leave a like and subscribe and well let's get into the course content [Music] now i actually know javascript i used to do it a lot when i was younger so maybe 14 or 15 i'm 19 now for any of you that are wondering and i really wanted to get back into it because it's growing as a language rapidly and there's a lot that you can do if you know both python and javascript you can move into kind of a full stack developer position where you understand the front end and you understand the backend so that's an advantage for any of you guys if you do know another programming language especially something like python or kind of a back-end web technology if you learn something like javascript that is really a complementing skill and that's the reason that i want to teach it to you guys but what really is javascript now i'm sure some of you guys don't really understand exactly how it works or what it is but essentially javascript is a language that is run primarily from your browser so unlike python which is typically a server side language which is going to run off a linux server and be responsible for doing the back end of websites and http requests and all of that when you have javascript what it's going to be doing is dealing with some front-end information so it's actually going to run directly in this chrome web browser and it's going to be responsible for your interaction with the page so essentially say i click a button so here download for windows we're going to talk about this in a second that will run a javascript function that will actually you know download this and same thing with a lot of other features on this page and just other web pages in general if you see any kind of games made in the browser chances are they might actually be made with javascript and there's just a lot of things that you do kind of front end wise using that technology now this is great and makes this language super flexible and really great to learn because this essentially means you can develop for any platform if you know javascript whereas something like python you know you need to make sure you have a compiler on that actual computer and it might not necessarily work depending on what environment you're in whereas javascript all you need is a web browser to actually run that code which means essentially one javascript will work on any device any computer so long as it has a web browser that being said javascript is also a massively growing language a lot of high-tech companies are looking for people that know javascript it's a really easy way to get into kind of web development and actually secure a job especially if you don't have an education or a background in computer science or software engineering or something like that so anyways that's enough for kind of the information about that sorry if i bored any of you guys but now let's get into the environment setup start writing a basic hello world program and then we'll end off at the end of there and move into some more advanced stuff in the next video so the first thing that we need to do if we're going to write javascript is we need a place to write it now what i'm going to be using is sublime text which is just a pretty standard text editor which will allow us to have some syntax highlighting and some autocomplete while we write our code so i'm going to leave a link in the description but if you need to start off by downloading this editor you can also use any other editor that you want but this is what i'm going to be using for these videos once we do that what we need to do is open up sublime text you might get some pop-ups just scroll through them don't worry we need to create a new file which is actually going to be an html file so what i'm going to do in sublime here is go to file new file you'll see it pops up as untitled as a new tab you can go file save as or simply hit control s and then type in the name of your file make sure i'm just going to call this one tutorial1 although i do already have that file make sure it says all files and add your extension of dot html the reason we're going to do this is because the way we're actually going to look at our javascript code is by running it through the browser which involves us having an html file now you can see here i've already made one so i'm going to kind of omit this step here but that's what you guys need to do now once we have this you should see tutorial one at the top here which is now actually gonna allow us to start writing some code that we can run in our browser now just notice though and i'm gonna try to find this folder wherever i had it so desktop javascript javascript tutorial that when you create a file that's dot html you should see the icon beside it change to be you know chrome or edge or whatever web browser you're using openable now what that essentially means is if i double click on this file you can see that it's going to open it in my web browser now for some reason that's not working for you what you can always do is type in the direct path to your file in your web browser and that will actually open up and the reason we're going to do this is because when we make changes to this html file we'll refresh our web browser and we'll see those changes affect here so this is kind of going to be our console and our output our web browser whereas where we're going to be writing is inside of this actual text editor now i'm going to get started right away and i'm just going to start doing some things you guys might be a little bit confused at first if you've never seen this before but whenever we write kind of javascript code we need to display it on an html page so the basic syntax for creating an html page is simply putting html tags and then you're going to put these body tags like this now i'm not going to focus too much on this syntax because it's pretty simple you can probably understand it fairly easily and i'm sure most of you know it but essentially open tags just simply have the word and then close tags have this slash before the same word so this is our body tags this is our html tags our body tags are inside of our html tags now inside of body what we're going to start by doing is just writing some basic html just to show you how some things work here so i'm going to say h1 tags which stands for header one is hello now i'll demonstrate that when i refresh the page here hello pops up means everything's working you guys should test that as well to make sure everything is proper now that's great but how do we write javascript well when we want to write a script inside of our html what we can simply do is type script now nice for me in sublime text you want to hit enter it's automatically going to fill in some options for me you can see we have the type equals text slash javascript so you don't necessarily need to include that but this is going to specify exactly what language you're writing in because you can do scripts for other types of things inside of html so inside of here is where we're always going to be writing our javascript code unless we're putting it in a separate file and importing it which we'll talk about later so here allows us to actually you know start writing a different language so not html now we're going to write in javascript so what's the first thing that we need to demonstrate in javascript that we can do well the first thing that i like to demonstrate is simply the console so just like in any other language the first thing you typically do is you print something out and you know do the hello world application so let's do that so what console.log is going to do is simply put a log or log a message to the html console or whatever the console is in our browser it says hello world console means we're not actually interacting with the html page we're interacting with the console and you typically do this for debugging purposes and not in a production environment so anyways let's have a look at what this actually does and how we can even see the console up here so if i refresh this page obviously nothing's happening but we've put console.log hello world inside of our script text how do we see this well we need to open up the console now this might be a little bit different depending on what web browser you're using but in chrome it's pretty easy to do this right click anywhere on the page and click inspect this is going to be probably similar steps for edge or any other web browser like that you need to inspect element you'll see that we get something that pops up on the side or maybe below your web page and it says elements and then there's some place that says console now my case i'm just going to zoom in so you guys can actually see this you can notice at the top of my console here it says hello world with an exclamation point and says that that came from tutorial.html 5 which stands for line 5 and that is the most basic step on how we actually log something to the console now that's great but what if i want to actually display something on my web page well what i can do if i want to show something on my web page is use something called document now this is kind of the main thing that we need to understand here in javascript we have two main areas that we can kind of write to we have log or sorry console and we have document console is going to be something that you know the user doesn't see it's in the background it's in that console tab whereas document is actually referencing the html document itself which means we can write information directly into the html document now when we want to write some html directly into the document what we do is document.write and then inside of here we're going to put quotation marks and we're going to put whatever it is that we want to write so in this case maybe i want to write an h1 tag like this that says hello then we'll do h1 hello like that and what this is actually going to do is write this directly to the document now there's something that i noticed i didn't mention here so i'm going to add it quickly whenever we write a line in javascript we need to add a semicolon at the end of it this simply ends for terminate the current line which means get ready to read the next instruction that we're going to have below this now this is kind of the basics this is involved in a lot of different languages but there will be some specific lines we don't need semicolons for but i'll talk about those when we get to them i also want to mention what i'm doing in here notice that i put this in quotation marks and that i haven't just left them like this and then what i put in quotation marks it actually ends up changing colors now this is important and typically when we're writing things inside of here and we're just typing them in we need to put them inside of quotation marks we're going to talk about this more in detail in later videos as we go into data types and all of that but just understand that for right now if you're going to be writing something or logging something you're going to need to put it inside of quotation marks for that to work and what i've done here is simply put some h1 tags hello and i've written this into the document and we'll add an exclamation point so we can see the difference here and now what i'm going to do is just refresh the page and show you what happens so now you can see that we actually don't get anything in the console because we haven't logged anything and we get hello directly underneath it with an exclamation point because that's what we wrote so we can actually write you know html directly to the document by doing that now i'm just going to show you two more things that we can do with console uh with the console and then we're going to end this video and move into some more advanced stuff in the next one so just like we can log some information to the console so console.log you know like hello this is a lock we can also do some other kinds of things in the consoles we can do what's called an error and what's called a warning so i'm going to show you both of them so just like we have console.log we also have console.warn and you'll see the difference in this one immediately i'm just going to call this warning exclamation point now what's going to happen when i refresh the page is we get this little icon that pops up and says that we have a warning and it tells us where this warning came from and what line it was at so that can be useful sometimes when you're creating an application and you want to warn the user that they're doing something that maybe they shouldn't do or not the user but you know yourself if you're developing this and you want to look at it that can be useful to do as well and you get that little icon popping up and we can also do a console.error which is a little bit more strict than a warning and we'll just say this is an error like that and remember our semicolon at the end of that line so let's run this we get this is an error tutorial 8 and you know we get this little x here and you notice this is obviously a stronger kind of statement than this warning so log warning error and this was document.write and those are kind of the fundamental things that you know we always learn when we start learning a language how do we do logs how do we write some stuff and obviously this document all right to write some html directly to the document well it's kind of boring to just like write some stuff and you know do some errors and warnings how can i actually change the value of this how can i move it around how can i change the color i'm not going to show all of this but i'm going to give you the basics and that's something we're going to work towards as we move to this videos and this is hopefully something you guys will notice that i start small make sure you guys really have the fundamental concepts down and then i slowly kind of move into some more advanced topics where you guys will start to understand a lot of people like to kind of do everything in isolation and go really hard on one topic that's good in some instances but if it's too advanced and you don't get it it's really detrimental to kind of the learning process in my opinion so anyways let's now just look at what we did last time so we see we have this hello hello hello to the log warning this is an error that's great what i'm going to do is actually remove all this now and we're going to do something so we can modify this htmh1 tag and actually get the value of it now in html we have something called ids and ids are typically the way that we're actually going to reference and access specific elements in our document so in this case what i'm going to do is set an id for my h1 tag and i'm just going to call this header now you can make this id whatever you want but make sure you put in quotation marks and make sure it kind of looks like this format here so header and what i want to do is i want to get the value or change the value of this h1 tag now how to actually reference this element well like we talked about in the last video we have something called console and we have something called document now the difference between console and document is that console is going to be referring to you know that little console window that we had here and document is actually referring to the html document itself so this whole thing so if i want to reference the h1 tag here with the id of header what makes sense to use console or document well in this case i'm going to say document because this is not a part of the console it is a part of my html document so the method that we use to actually get gain access to this element is something called get element by id now if you've ever seen javascript before chances are you've seen this and that's because this is a very common syntax now what i need to do is actually give the id of the element that i want to access so in here i'm going to type header now let me just kind of break down this line for you because if you've never programmed before this might be a little bit confusing what's going on here document is referring to this html document this dot here means that we're about to call a method on this html document now a method is simply an operation a function something that happens it can get a value it can you know create a value it can do all kinds of different things and you call it by doing dot the name of the method an open bracket a close bracket and then some kind of parameters or parameter inside now there's not always something in here sometimes it's blank like this but usually we have something called a parameter now a parameter is something that you pass to the method a value you give it so that it can do something with that value in this case what this method is going to do is get the value header and return to us the actual h1 tag here that has the id of header to allow us to do some operations on it so the first operation i want to do is actually change the value of hello to be something else the way that i do that is using another method well not really method it's going to be actually a property called innerhtml so here we have document.getelementbyid header that's going to give us this h1 tag dot innerhtml which is actually referring to what's inside of these tags so whenever it says inner html that means pretty much what's between the two tags and now what i can actually do is use something called an assignment operator which is just going to be the equal sign and set this value to be whatever i like so here i'm going to make this tech with tim exclamation point now remember we have to end our line with a semicolon because that's how we know the operation and kind of statement is finished but let's try this i think i've broken this down enough that you guys should understand and when i refresh the page notice all our logs go away and we get tech with tim as the new value for h1 tag so i think that's pretty cool and i mean with very minimal knowledge you can already modify the elements on your page now that's awesome but what if i actually want to get the value of my inner html say maybe this changes to something whatever it is and i actually want to get the value how do i do that well what i can do is rather than changing the value here i can simply print it out and show it on the console or i can actually write it to a new tag and that's something interesting that we can do as well so let's try that so if i actually want to display this on the html page sorry and i don't want to display it in the console am i about to use document or am i about to use console well i would hope you guys would answer with document because that means i'm actually going to display it in the html document so like i showed before i'm going to use document.write and all i'm actually going to do is simply write whatever the value is of the inner html of the element id header so in this case i should write hello but i'm not going to write it inside of any h1 tags so it should look a little bit different and you guys should notice this so let's refresh and now we get hello and we get hello so we've simply just written that you know next word by doing this document to our right get element by id header awesome that is you know pretty much how that works now what i'm going to do is actually create a new tag here and i'm going to call this one an input tag so i'm going to say h1 or sorry what am i saying h1 i'm going to do input type if i could type here equals text and then id equals inp now what this is going to do is simply create a little text box that i can type it the reason i want to do this is because i want to show you how we can change the value of this text box and as we go through we'll be changing some different values and you guys will see how this works for all different kinds of html tags so in this case if i want to change the value of a text box what i need to do is similar to what i've done before so obviously this text box is in my document so i'm going to type document dot get element by id and in here i'll just add my semicolon at the end here what i'm going to do is simply put the id which is inp so what i've done now is you know reference this text box so now how do i get the value of it well i just simply do value now you might think that it would be like dot text but that is actually not the case in this case we're going to do dot value and we're simply going to do what we've done in the previous one it just changed the value so in here we'll do it hello now before i do this i actually just want to show you what the text box looks like without this change so i'm going to introduce to you something called a comment now essentially what a comment is is it is something that is there but is not going to be read by the computer it's a line that's going to be skipped over that you can still have there but it's not going to mean anything so in this case what i've done to actually create a comment is i've done two slashes now two slashes simply means comment it's the same syntax as java if you've ever seen that before and notice that my line gets grayed out and watch when i run this code here you can see that all that actually changes is we get this text box here we don't end up changing the value to a low because this was a comment now if i uncomment this by removing those you'll notice when i go back here the value of my text box changes to hello so that is kind of the basics of how that how that works right now i'll show you a multi-line comma as well which is essentially this so you do a slash a star another star and then a slash now what this allows you to do is comment on multiple lines right so these are all comments this is obviously not you know proper coding syntax just type in hello so this will allow us to kind of skip over that because whereas here if i do something like hello and then i go the next line i type hello you can see this isn't commented out because what this stands for is a single line comment you may see me use some of these so i just want to make sure you guys were aware of how those work all right now what i'm actually going to do is i'm going to make an error here in the code because i want to show you guys what it looks like when you make a mistake because chances are you guys will be doing that quite often as you learn how to do this so for example let's try to just type x in my line here okay and let's run our javascript code and notice that if we're looking at the console here we get uncaught reference x is not defined now these are error messages that you guys will see all the time as you start going through this you'll start to understand what these messages mean i'm not going to explain exactly what this is but it's very important that you actually read these messages so say you know you get an error and like you're commenting down below you're like tim it didn't work i don't know what the issue is what i'm going to ask you to do is give me what this error message is and what line this message is on so that i can help understand what the issue is so these are meant to be useful messages that kind of tell you you know what's going on in your program what's wrong and here we're getting a message saying x is not defined which essentially means we don't know what x is right this is not valid we can't put it here and don't worry if you get an error because all you need to do is fix it and there we go the error goes away so that's what i wanted to show you you guys will get all kinds of these and it's really important that you kind of look up those error messages and start understanding what it is that you've actually done wrong because that's the fastest way to learn rather than you know just sitting there and kind of going how is this work right it's really easy just go to the internet look it up figure out what the issues okay so that i think is really all i wanted to cover i'll show you one more thing which is let's say we want to print out the value of our text box and this is uh let's see actually console.log document.element so in theory what this should do is print out what the value of our text input box is right and that's exactly what it's going to do so i'm going to show you now how this works so what we've done is we've simply logged the value of document.getelementbyid input value right so when we look here you can see that up in here we get nothing but what if i type hello does do we get a log that says hello we are printing out the value of whatever's in our input box is the reason that in the log here i don't get that answer what if i refresh the page i still am not getting hello printed out well the reason i'm not getting that is because what actually ends up happening when you run this code here is we read each line line by line so what happens is we have html we read body read h1 we read this we read this and we execute them in sequence so we start by doing hello then we make this text input box then we go into the script tag we run whatever's in the script so this means we run this console.log and we print the value and this happens immediately whenever we run the web page now can you think about why this might be problematic well essentially if i want to print out the value of what the user typed in this box i can't do that by just you know logging whatever it is immediately because immediately when i refresh the page that text box is blank so if we want to do that we need to use something called a function which i'm going to talk about in later readings variables and data types now variables and data types are kind of the core fundamentals of any programming language and they're usually fairly similar but you need to understand them before we can move any further so let's start by talking about data types and we'll get into variables so in java we have something called primitive data types now you're not going to know the difference between a reference and a primitive data type which are the two data types we can have until much later in the series but i will tell you the ones i'm going to show you today are called primitive now primitive essentially means these are defined at a programming language level they are kind of standard to this specific language and the way that they work has a defined you know set of things that you can do on them i'm having trouble explaining them because if you don't know reference it's hard to give you kind of a comparison but for now everything we're using is going to be primitive and just that's all you really need to understand anyways let's talk about our data types we have and actually i'll do these in comments we have a string we have a number we have a boolean we have undefined and we have null and these are the five primitive java data types so let's add that here primitive i definitely prim it to butcher that word anyways there we go okay primitive so what is a string well we'll do it actually before the comment a string is essentially anything inside of double or single quotation marks and that is all that a string is essentially the rule for a string is if it's inside of quotation marks double or single it is a string doesn't matter what's inside of it if it's inside of there it is a string and that is the only thing you need to know to remember strings now a string is a kind of collection of characters so if i do something like this this is a string and the value is hello if i do something like 23 this is a string the value is 23. why is it a string because it's inside quotation marks that's all you need to know collection of characters i can do random characters i can do you know anything i want inside these quotation marks okay number what is a number well that's pretty straightforward it is literally a number so any time we see something like 2.0 8.99 negative 98. 1 000. 0.00009 these are all numbers and notice that they highlight in purple and that they're not inside of quotation marks so that is what a number is but as soon as i decide to put quotation marks around any of my numbers they immediately become a string awesome now just in case you see in other languages i'm just going to let you know that if you do something that doesn't have a decimal point that's typically referred to as an integer and an integer is anything that is you know doesn't have a floating decimal point representation whereas if i do something like 1.0 this is now what we call a float or a double now this isn't important for java because these are all classified under the name number sorry javascript but for other languages you might hear that so i feel like i should mention that to you guys okay boolean this one's pretty easy this is literally the values true or false so boolean just simply stands for true or false you can either have true or you can either have false there's no other values that fit into this category other than those two and notice that when i do true with a capital t that is not the same as true with a lowercase t so these two words exactly the two words i've typed here are the only values that are considered boolean and we'll talk about those later and why we use them undefined now i'm not going to type anything here the reason for that is because undefined simply means that we haven't defined something yet and it's actually a type of its own you can't really set a value to be undefined it becomes undefined if you don't give it a value and we'll understand that when we go into variables now null is very similar to undefined except it's actually a set value so null means you know we're not storing anything yet it's almost like hey we've set up kind of this empty container we want to put something there just so like you know it's okay we have something but it doesn't mean anything and that's what null is so when you type the word no that's the type itself that's all that's considered no and we'll talk about the difference between no and undefined later but they are very similar in nature okay so those are our java data types and i'm going to get rid of them and we're going to start talking about variables so variables are capable of storing any kind of data type now that could be a primitive data type or it could be a reference data type again you don't need to know the difference but a variable is capable of storing some value now the way that we define a variable inside of java was a few different ways or sorry i keep saying java but i really mean javascript just because i do program in java so sometimes i mix them up but anyways the way that you define a variable in javascript is using the var keyword now the first step when you're using a variable or gonna make one is to declare it and that's what this statement is going to be here declaring creating defining those are kind of the words we use to say that so here what i'm going to do is i'm going to create a variable and i'm going to give it a name of x so i'm going to say var x and i'm going to use what i call the assignment operator which is an equal sign to assign a value to the variable x so in this case i'm going to put 6. now i'm going to put my semicolon to denote that we're ending this line this operation and what i've done here is simply to find a variable x which is equal to 6. now i'm going to show you and i'll just do this here and you guys can guess what's going to happen what happens when i do console.log x so if i run my webpage and i do console.log x what am i going to get well before i tell you let's run this and you guys can have a guess here so there we go and notice i was looking up if you need to even use this before because i totally forgot but anyways we get six printing out to the screen so how did that work well the variable named x stores the value six and when i gain access to the variable x so when i type x here it looks for the value of x which in this case is six kind of subs it in so we go six there and then it prints that out to the screen and this is the very fundamental basic way that variables work there's some name some kind of pointer almost to an object and when we access that name it gives us the value that's stored inside of it so just like what you know when you have in math and you say like 3x plus 2 equals 9 whatever you want some value like that x is a variable and it has some value you need to determine the value of it so a little bit different in programming because we just typically set up variables that are going to hold some information we modify them and change them but that's the basic concept behind a variable some name that points to some value holds some value when we access that name we can simultaneously access that value now let's talk about changing variables so here we've defined a variable called x equals 6 but what if i want to change this variable to be the value 9 well since i've already defined my variable by putting this var keyword here all i need to do is simply say x equals 9 and now if i log x notice that our value changes to not so that's how easy it is to change the values now i want to talk about some rules when we do deal with variables and kind of how we name them appropriately so typically and for right now there's a lot of different ways to define variables we're going to stick with this var keyword but we'll talk about some others later and we need to define a name after we put var that's going to be whatever we're going to store now usually we need this variable name to be meaningful it needs to store something that makes sense and the reason for this is when we look back at our program later we're going to see all these different variables all these different names we're going to have no idea what anything means if we kept naming them like t z c we don't know what those variables mean so we typically name them something that makes sense for what the value they're going to store so let's change this up a bit and let's say actually i want to create a variable that's going to store my name well what i would do is i would say variable name which is going to be the name of my variable but coincidentally actually the value name is equal to in this case tim now quick quiz for you what data type is tim well tim is a string so what i've done here is to find a variable called name that's storing the value tim which is of type string so these variables can store obviously all those different things but it's important we know these different types because the type of variable will allow us to do different things with us different things with it sorry so let's print out name and just make sure this is working there we go we got tim awesome good to go okay so let's create some other kind of variables so let's say var t hello equals five now this actually has an issue with it the variable that i've created here and this is what i want to get into my next point in how do we make valid variable names well there's a few rules when we define a variable one of which is that we cannot include any spaces in our variable name if we want to do something that looks like a space what we are allowed to do is underscores but if i do a space watch what's going to happen when i run my program we're going to get an error in our console now why did that happen well because it's saying there's an unexpected identifier now this is what i want you guys to do whenever you know you make a mistake something happens open up your console and see if you have any errors here if you do you can google search them you can figure out what the issue is and then hopefully that will help you kind of fix your problem but those error messages have meaningful information in them so try to read through them you probably won't understand what they mean immediately but if you google search them hopefully the next time you run into that error message you might understand where you might have gone wrong so anyways in this case that's because our variable name is named incorrectly so what i need to do is either add an underscore or change it so that it has the rules applied to it now some more rules for variables are that you're allowed to use any character so any characters on your keyboard that are letters or digits that means i cannot use like brackets and you know all these other symbols inside of variable name i need to use only letters and numbers and those letters can be uppercase lowercase that doesn't matter obviously you can do the numbers how you'd like another rule that applies to variables is you cannot start your variable with a number so i can't do something like five hello and you can see we're getting highlighted like this there's an error here what we need to do is we can do something like hello five we could do you know h3 lo that's fine we just can't start with a number so those are kind of our basic variable names now if we want to do a variable that you know says has like three or four words combined into it say for example hello world it makes sense to typically separate your words with an underscore or to do some camel case like this so hello and then capital on the next word so it's easier to read so i just figured i mentioned that to you guys okay so there we go we have our variable name we have a variable hello world now what i'm going to do is do something you guys probably haven't seen before which is actually set the value of hello world to be equal to name well what is this going to do well what we're going to do is we're going to look at hello world we're going to say okay this is equal to 5. what we're going to do now is change the value and we're going to change it to name what is name store names towards the value tim so that means if i print out hello world like this we get the value tim so that is totally valid we can definitely do that we can set a variable to equal another variable and that is totally okay and notice that if i actually change the value of name so i say name equals hello like this let's see what happens nothing changes and that's what i want you to notice because i defined hello world equals name before i change the value of name hello world is still going to have tim as its value and that's because when i defined it here tim was the value of name but then i changed name after here so let's actually console.log name like this and show you what that is so we'll do it before like this so we'll do it right when we define it then what we'll do is we'll set this we'll change it and we'll print it again so let's have a look so we get tim obviously we get tim again because we printed hello world which was equal to name and then we get hello so that's kind of what i wanted you guys to understand is that the sequence in which we do this is very important just like if i try to print say hello world up here at the beginning of my program and we run this we get an issue we get undefined and the reason we get undefined is because we don't know what hello world is we haven't defined that variable yet and that's what's printing out so anyways that has been variables i've tried to go through a few different examples of you know issues that you guys could run into using variables the different naming conventions for variables as well as the different data types so again remember you know we have our strings which is our quotation marks we have our numbers which is essentially any numbers oops i don't want a character there can't have decimals doesn't need to have decimals it can be negative as well and then we obviously have our booleans which are true false we have our null values and we have our undefined values what is an operator well essentially an operator is something that allows us to perform some operation on data or on operands now to demonstrate this to you i'm just going to start by declaring two variables i'm going to set x equal to 10 i'm going to set var y equal to 5. now someone was mentioning to me in previous tutorials that i do not need these semicolons so apparently you don't need those while you're actually writing your javascript code i'm just so used to the other languages i write in that need the semicolon so anyways that's something to note you don't need to add those but by habit i probably will the benefit of adding these though is that if you do that you can actually assign or do more than one thing in the same line so for example if i wanted to define another variable z and i didn't want to do it on a new line as long as i'm separating these statements by semicolons i'm actually able to do that okay so anyways let's continue now all right so let's just get in and talk about what the operators are and what they do they're pretty straightforward i'm certain most of you will understand so what i'm going to do is create a variable called z and what i want to do is i want to store the result of the addition between x and y now i'm sure you guys can guess how you do this x plus y in this instance our operator is called plus or the addition operator which is right here and our operands are x and y and that is you know the basics of doing this of what operators are anyways what i'm going to do is just log my results to the console here so you guys can see it so let's refresh that we get the value 15 and you know we're certain now that this edition operator is working now i'll go through a few other operators pretty quickly just because it says fairly straightforward so we obviously have our subtraction operator which is going to do a subtraction between x and y so our value is 5 here we also have our multiplication operator which is an asterisk so that's above the eight on your keyboard that's obviously going to do multiplication so 50 is our answer there we have our division operator which is simply one slash this will do our division give us a value of two and we have one more operator that i'm sure a lot of you may have seen before which is called modulus now i'm going to stick on this one for a second just because a lot of people get confused with this operator what this operator does is give you the remainder of a division so if you remember back kind of to elementary school when you didn't really deal with decimal numbers when you used to divide two numbers what you would do is figure out how many times the divisor or whatever i guess the thing is that's going into the number can go into it and then you would calculate a remainder so to give you an example let me just change our values here so we do something like 10 divided by 4 and we say we're not allowed to use decimals we're only allowed to use whole numbers for finding the answer this well what our answer is going to be is okay how many times can 4 go into 10 well 4 can go in twice so that means we're going to have automatically we know we're going to have 2 as our starting number and now we know it's going to be like 2.42 or something like that but the thing is we can't use decimal numbers so we say well we can divide it by 2 and we have a remainder of 2. and that is our answer to this question so what this modulus operator does is give you the remainder aspect of any division so in this case we know the remainder is going to be 2 so let's actually run this and see our remainder is 2. no it didn't change but anyways let's change this to 3 now and i'll show you so if i do 10 divided by 3 what's my answer going to be well how many times can 3 go into 10 it can go in 3 times that's a value of 9 10 minus 9 is 1 remainder is 1 and there we go our remainder is 1. so that's what this operator does if you're confused by it literally just think okay let's you know figure out how many times this number can go into it and then what's left over after that it's actually very useful and there's a lot of instances where you may want to use it okay so that is um sweet so now let me just show you though and i'm actually going to ask the question here since i've done you know x modulus y i've done x plus y or whatever like this and stored it in the value z do the values of x and y change here are they changing as we do this now think about your answer i'm going to print them out and i will show you guys and explain why they don't change okay so let's run this there we go so we have 13 10 and 3. i'll zoom out a little bit and obviously we can see that the value of x and the value of y did not change after we perform this operation and the reason they did not change is because i am actually not changing the values of x and y here i'm simply getting them by writing them and storing the results of their addition in the variable z so the only variable that's going to be changed or declared is going to be the variable z even if i decide to do something like x plus y here you know we'll add our semicolon and we run this again we can see that those values still aren't changing because we haven't told x and y to change we've simply got the result of their addition so what if we want to change x and y and perform some kind of operation on them so let's get rid of all this and let's talk about how we can do this now so actually there's another kind of a kind of assignment operator that we have that has to deal with these logical operators too which is something called plus equals now what x plus equals is going to do is say x is going to be equal to x plus whatever value i put on this right side here so in this case if i put 5 and i go console.log and we put x now x is going to be changed to be 15. the reason again is because what this is doing is when i say plus equals rather than just plus it's going to say all right x is going to be equal to whatever it was before plus 5. let's run this there we go we can see now we are printing out 15. now this works the same for all our other logical operators so minus equals obviously works as well we get our value of 5 we can do times equals that's going to give us 50. we can do divided equals that is going to give us 2 and we can do modulus equals which is actually just going to give us 0. and the reason it's giving us 0 is again because 5 can evenly divide 10 so there is no remainder to that division awesome so that is how those work now i'll do the next example with y just because why not and essentially what we can do here is increment or decrement y so there's another operator called increment and another one called decrement increment is plus plus and decrement is minus minus now increment simply means add one very easy really straightforward and if i run this now we can see that y gives us a value of 4 rather than 3 because this plus plus simply adds 1 and stores that in the value y rather than if i were to do y plus 1 like this you can see the value of y actually doesn't change all right so y plus plus we know that works what about y minus minus well this is decrementing so simply subtracting one that gives us the value of two and those are our logical operators now these operators only work on numbers or at least most of them only work on numbers and i'm going to talk about the specifics now all right so let's define a variable which is a string let's just call it str because why not and let's call this string hello now what do you think i'm going to get if i try to do str plus x well actually in this instance that'll work but let's do something like this var z equals and str plus x let's see what happens when i print z what do you guys think we're going to get here all right so let's run this and you can see we get hello 10. now whenever we have a string and a number and we're adding them together what ends up happening is we simply convert the number to a string and just mush it together with whatever that string is so what we've done here is we said okay we're going to have hello we're going to add that to 10. well obviously these are not both numbers so we can't get some logical answer that makes sense so what we'll do is we'll convert 10 to a string and we'll just kind of append it and put it on the end of hello and that's exactly how that works and this is another thing that we call string concat concatenation now concatenation is typically done between two strings but i guess it works here with a number because we just convert them into numbers but let me show you what happens if i do something like str2 equals hello world and let's now actually get rid of this value zed and let's simply do str plus str2 well you can guess based on what happened when we added 10 to this string what our result is going to be well in this case what w