Javascript Tutorial - Programming Tutorial for Beginners Pt 1

Key Takeaways

hey hey we're going to be learning JavaScript today and I am super excited about this because this is where you move from designer world to developer World HTML CSS hey that stuff's great it's considered more A Little More Design because it's outputting looks and when you move JavaScript now you're starting to move into functionality and the good news is is if you learn JavaScript you're set up to learn a bunch of other languages cuz programming is programming is programming they're all very very very similar um so what we're going to do is go ahe to open up Google Chrome and hit view developer JavaScript console or if you're on the Mac App uh Apple Alt J or command Alt J so I can hit command Alt J and toggle listing open closed Chrome you can do JavaScript two ways you can do it in your HTML code like in your text editor or to learn it and to do a lot of things you can do it straight in the browser this is the easiest way to learn so this is what we're going to do cuz basically we're typing real time into JavaScript and it's going to real time give us what we're doing so for instance I can go alert open up a colon and then go in quotes hi there close out the colon and hit semicolon or not colon these are uh whatever they're called brackets braces uh so there you go alert hi there and look we created an alert and it says hi there so that's great there you go you're a programmer um I can also go alerts you can do two commands on one line as long as there's a semicolon there it's going to know that you're done with a command and it's going to look for the next thing as a new command so that's one of the important things of semicolons hi there I say okay hi again see programming is not that terrifying people it's it's not this actual other language people call them languages but the languages are in English it's more or less just a list of commands so another thing you can do is console we're in the console right now so I can do console.log hi there oh and then it spits out hi there and so now I can go console.log high there alert hi there so now it's going to log High there and then it's immediately going to alert hi there so there you go so that's kind of your Basics I'm running commands and I'm putting in the commands my they're called arguments uh I'm basically telling the command alert whatever I give you as an argument so in this case I'm telling it to alert a text string of hi there let's get into what is a text string I just use that weird word don't don't freak out on me it just basically means remember that all these characters are a thing so if I go hi there it knows that hi there is a text string let me kind of tell you the difference between a text string and a non-text string uh or a string so if I go two if I go 20 it does not know that that's the number 20 it just knows that that's a string I.E it's a letter two and a letter zero if I do 20 without quotes well okay now it knows that that's a number see if you spit out there's no quotes there it knows that that's the number 20 here watch let me show you something if I do quotes and go 20 + 1 it's a string it's a two a zero a space A plus a space a one that's what a string type is it's not smart it just knows it's these characters if I go 20 + 1 well now it's doing math for me cuz I'm using numbers so that's kind of the difference between a string type and a number type they're called types um and that's that's a key word you want to remember as you move forward is there's probably five types in JavaScript uh maybe there's six there's there's basically just a few types not an endless amount of types string and number are things you'll have in any any any programming language um and across most languages these are going to be the same so let's get into how we actually do programming and then once we kind of get comfortable with the basics of programming the next video I'll show you how to actually do some stuff on your web page with it but first we got to get a little bit more comfortable uh with JavaScript as a language so I'm going to clear this out I'm going to introduce the concept of variables a variable it's just a lot easier to think of it as a container tell you what I won't even explain it I'll just show you how it works it'll make sense their name so I'm making a variable called name equals will there we go so now I basically said hey name equals will so anytime I hit name it goes huh will so if I go alert name without quotes I'm not giving it a string now I'm giving it a variable which is already defined my name is Will so if I hit alert it says will let's do that again I'm going let's go let's call this one message equals hello there so now I can go alert message hello there if I go alert messaging quotes then it says message because I gave it a string I didn't give it a variable I didn't give it a container we already defined I gave this a brand new thing that I created as a string anytime I do quotes I'm creating a new thing I'm creating a new string if that makes sense what happens if you try to alert something you haven't defined yet alert um new message which we've not created it says app new message is not defined you haven't created something called New Message yet well let's make a variable called New Message now I can do alert new message and there you go my new message so hope that wasn't too redundant for you but that's kind of how you're going to do things I can also create a variable called my number and I can make this one a number instead of um so now if I do my number it knows 200 and notice there's no quotes around it it knows that it's a it knows that it's an integer or a number so what I can do is bear my age equals 33 shh don't tell anyone so now I can go my age plus 20 if I spelled my age correctly it knows that in 20 years I'll be 53 so you can do math with variables if as far as JavaScript is concerned there is no difference between saying my age equals 20 and going 33 + 20 it's like well let's just look up what my age is okay my age is exactly the same as 33 so what variables do is they give you the ability to store information and pull it back up at a later time this is very very useful it's basically the core of programming you're saving information you're looking it up at another time so let's get into an if else statement if you're not in too far over your head if not just watch the video over again it it'll make sense pretty quickly for you we can do this let me Define age equals 33 again not I don't know why I did triple equals so age is 33 and I'm going to go if and then I'm going to do brackets again age is less than remember from your math School greater than less than symbols yep so age is on the little side of the arrow so if age is less than 35 and then I'm going to do these guys and then for this you're going to have to hold shift and hit enter Because if you hit enter it's going to execute the command so I hit shift and hit enter I'm going to go you're still young and then I'm going to hit shift and enter again and I'm going to close out that bracket so let's look at what I did I said we're going to do a check here if and then whatever is in here equals true then it's going to go execute whatever's between these braces which in this case is just a single alert so at this point I go if my age is younger than 35 alert that I'm still young let's hit enter and see what happens still young so now watch this I'll go age I don't have to hit ver because age has already been defined a age equal 37 now you only need to use ver the very first time you're oh yeah for very first time you only have to use ver the very first time you're defining a variable so now if I run the same thing if age is less than 35 nope doesn't alert that I'm still young so what I can do now is I can go else holding shift and return again so if age is less than 35 alert still young oh oh man getting old so now it's going to check it out if you're if you're younger than 35 or if this number is less than 35 alert that you're young else alert getting old and this is called an if statement and then it's an if else statement uh and that's another core thing that you're going to use programming in any language it's just for checking stuff out say you've downloaded the user from Twitter and you want to see if they have tweets if uh if tweets let me see uh let me give you an example of what we do here tweet count equals zero so then you can go you know you've loaded up your user if tweet count is less than one you need to make some tweets and so it's going to alert that to the user or it's going to spit out a message on the page it's going to do something that's a lot prettier than this ugly generic alert um so that's kind of the concept of how you use JavaScript in programming uh you can also say if there's more than five tweets then you only show five if you know you can this is basically where you get some of those programming basics in there um let's do one more thing and then we'll move on to in the next video where we actually do some cool fun stuff in our page if you're not freaking out so far we we did a string type we did a number type we did if else let's do some arrays so arrays are the third type we're going to learn in javascripts clear that again my list an array is basically a list of things and a an array is done with brackets so whenever you do brackets like that it creates something of an array type and what you do is you just give it a bunch of values uh I'll do a grocery list here so eggs and I'm doing each one in quotes you'll notice you can use single quotes or double quotes it's kind of interchangeable with JavaScript eggs milk fruits so now if I go my list I've got a list of three items eggs milk fruit and so that's what an array is an array stores a list of items for you usually if you were to download a friend's list from you know Twitter or whatever you would get an array of all of your friends so that's kind of what arrays are for they're kind of like a ulli thing you know a UL is a list of items and this is kind of the JavaScript equivalent of a UL it's a list of things um so you can go my list zero and that's going to get the first the Zero Entry which is eggs um a lot of people that kind of is weird to them index number zero I thought that was the first item that should be one yeah well for whatever reason programming Lang languages usually use a it's called a zero Index this is zero this is one this is two so I can go my list0 equals and I can change this to a different string I can call it now Vig so now if I go my list you'll notice they work just like variables it's basically just a group of variables except for each one doesn't have a name they have an index now I can go my list to one equals old do one eggs and I go my list so now we go veggies eggs fruit so you notice we're just kind of changing this thing I can also go my list three which there is no three equals I don't know we'll add friends to the list hit my list now we have four things in here and you can also at any point in time go my list. length and see yep we got four items in there so we have four items items 0 1 2 and three which is a little confusing to people but now that you know it you know it um and that's pretty much how you'll use arrays um and if you're um yeah and that's pretty much it we'll go ahead and end this video for now and the next video I want to get you into something that's usable that's fun right away so we're going to skip JavaScript knowledge Point 2.0 and we're just going to go straight into using jQuery to do fun stuff hope you enjoyed this lesson