How to code in 30min - FOR ABSOLUTE BEGINNERS

Key Takeaways

hello everyone the purpose of this video is going to be to give you a high level overview of programming how it works and what programmers actually do with code to make a computer do something smart we're going to use the language javascript because it's the most popular language on earth right now and if you learn basics in javascript it applies to a ton of other programming languages like python or java or many other things because programming is generally programming in all languages the concepts are the same almost across the board so if you want to follow along go to jsbin.com in your web browser and turn on the javascript and the console tabs we're going to turn all the other ones off because we do not need them we are just going to focus on the programming piece not the web development piece which is what html and css are also used for so in programming no matter what you're doing let's let's picture an example of a robot or let's say a tesla which is a robot car there are some things in common with all programs they have inputs usually they have a program that makes decisions and does something smart and then it usually has outputs as well so if we had a tesla let's say we had a tesla and we wanted to make it go to the finish line on a straight course and then stop our inputs would be some sort of distance sensor that could tell us how far we've gone or maybe it could actually see how far there is to the finish line and that would send an input into our program or we could say distance is ten distance is five distance is three right we're we're getting closer so the input to a tesla would be the distance sensor and then we'd have a program that takes that distance and determines do i push the gas do i push the brake what do i do right that's our program it makes that decision and then the output says gas to 1 or gas to 5 or break to one break to five right there are outputs we're actually telling that gas pedal and that brake pedal to go so the programming side of it is it's taking the inputs making some smart decisions and then sending the outputs if there are any in this case we're going to learn how to apply all those concepts in programming languages the first thing we're going to do is we're going to learn how to set a variable a variable is a value so the first value i'm going to put in my program for our fake tesla is distance i'm going to say let distance equal 10. let is this fancy little word that makes you feel like your god and you can say let distance equal 10 the first time i declare that there is a value in my program which is called distance i use the word let after that i can just say hey distance equals five i've just changed my distance now i could also say distance equals three and i've changed it again and now i can do an output so let's set an output here to console we have one command we're going to use all this time for our output and that is console.log that is a standard javascript command that lets us put something out to the console i'm going to log distance and see what it is so if i hit run over here or command enter control enter depending if i'm on mac or windows you can see that it set out three if i were to get rid of this line and run it again you can see that it put out 5 instead because i said hey my distance is 10 i'm going to change that distance to 5. let's put out what the distance is and that's going to put out 5. so what i've done here is i have defined a variable now variables can be different types that's a keyword this type right here in javascript is called a number because it's a number i can do math on it i can say distance plus 6 which is going to be 11 right because we said distance is 10 and then distance changed to 5 and then we added 6 more to it and we got 11. i could say plus 6 plus 1. so it's going to actually spit out 12 no matter how many times i run my program it's always going to spit out 12. i'm going to go ahead and clear this so the number type is is very basic you can use math with it you can do plus you can do minus -1 star or asterisk is what you do four times so if i do times two it's going to say 10 because that's 5 times 2 and if i want to do divided by 2 then it's going to be 2.5 the slash is how you do divide it so you can do math on number types but there are other types in every language so one of the first things you learn when you're learning a programming language are what are the different types that's the first question you want to ask what are the types of variables in this language another type is a string type so if i say will let's call this name name equals will and then i'm going to say log name you can see that it spits out will in javascript i can use double quotes or i can use single quotes there really is none that is right or wrong you can see the console puts out double quotes but i'm entering it as single quotes some languages are very picky about this some are not as picky some languages single quotes and double quotes mean slightly different things but in javascript it doesn't matter we're going to use double quotes it's a maybe a little bit more of a standard thing that people do i can also say name plus one now this is interesting i'm mixing a string type which is what this is think about if you're building a necklace and you're putting little beads with letters on that string that's kind of the idea of why this is called a string this is a w plus an i plus an l plus an l so we're going to take a string type we're going to add a 1 to it now in some languages this will freak out and say you can't do this but javascript just says well let's just add a 1 to the end of the string so it's will 1. and then if i do one plus one well now it's will one one it's kind of what javascript does when you mix strings but a lot of programming languages will actually throw an error right here and say ah you can't do that i could also add another string here i could say will plus i'm going to do a space here i don't know will friend that doesn't even make sense but whatever i did it i added two strings together so those are two different types of variables in javascript okay so now that you understand what variables are let's use variables and write a program that does something a little bit smart again the first time you ever create a new variable a new value in your program you're going to use let in javascript this word might be a different word in other languages but it's all the same i'm declaring that a new variable called name exists and i'm setting its value to will at the same time that's variables if you know what your types are and if you know how to define variables in a programming language it's pretty much the same across all programming languages so let's go back to that tesla automatic self-driving car example let's say that we have a variable called distance and that we are 10 away from the finish line i don't know call it 10 miles 10 feet 10 meters who cares it's 10. and now we are going to get into the second big concept of programming and that is flow control flow control means we need to make decisions and have our code go in different directions based on what the variables are the first thing we can do here is we can say hey if the distance is greater than three turn on the gas and turn off the brake if the distance is less than three let's turn off the gas and turn on the brake okay so that's our first thing we're going to do a flow control statement that does exactly that and we're going to do that by saying if we are going to do an if statement now if statements work like this you say if and then you do parens and then you do curly braces and it's it's as simple as this if whatever's in here is true run the code in between here so in this case we can say if distance is greater than 3 you guys remember those greater than less than symbols for math if distance is greater than 3 we're going to run the code in here and then i can come down here and say if distance is less than 4 then run the code in here so if it's 4 5 6 7 8 9 10 whatever up to infinity then it's going to run this code block if not it's going to skip right over it then if the distance is 3 2 1 or 0 or in the negatives which hopefully we're never negative then you can run the code in this block these are called blocks of code so let's just go and do console logs here i'm going to say console.log grader and then over here i'm going to say console.log less i'm going to run my program and it said greater it did not say less because the distance was 10. so if i make this distance 2 and run my program it says less and if i make the distance 3 and run my program it says less now in a real world program you wouldn't be outputting to the console log you would be outputting to a controller that actually controls the gas pedal or the brake pedal those commands might look something like this set gas to true so we're going to turn on the gas and set break to false and that would basically say hey if the distance is greater than 3 we got to go let's turn on the gas let's turn off the brake and this would actually be connected to a wire that then sets the gas pedal on and this would be another wire that comes out of your computer box that turns the brake pedal off so that's it's the exact same logic though so to simulate this let's just kind of console log gas on break off there we go and then let's go ahead and do the exact opposite for if the distance is getting lower and now we can run our program and you can see let's go ahead and hit clear and if the distance is three we're gonna do the gas off we're gonna do the brake on if the distance is six we're gonna do gas on break off so there you go the if statement is your very basic level of flow control if something's true let's do this if not let's not do it at all there are some other things that you can do you can use if in a different way you can do if else statements so i could say if distance is specifically something which i do by saying triple equals if distance is one then we're going to run this it's one and then i can say else do something else so if it's not one we're gonna automatically run this block you can see it says it's not one let's go and clear that run it again it's not one and if i change it to one and run it it says hey it's one if i change it to one one one one one well that's uh not one that's a hundred and eleven thousand one hundred eleven uh and i can also add some else ifs in here let's say i wanna do several different things else if let's uh get this cleaned up else if distance is two so if it's one let's run this block else if it's two let's run this block otherwise every other condition we're going to run that block so you notice when we chain them together whichever one matches first it will run does it match here if so let's run this block and then forget every other block in this if else statement we have going on uh otherwise okay that one didn't match all right let's check this one did this one match sweet let's run this and if nothing else matches eventually it's going to run else so in this case if i change it to 2 it's going to say it's 2 and that's it if i change it to 1 it's going to say it's 1 that's it so when we kind of chain them together in an if-else statement they will only ever run one code block out of all the code blocks if we want it to run multiple ones well then we create brand new if statements we can create another if statement here and whether any of these ran or not we don't care it's going to start another if statement and make some more decisions from there so that's how if else statements work those are in all the major languages you're going to see them they just look a little bit different do you do triple equals or double equals do you do curly braces or something else right that's that's really the differences between most of the programming languages but if else statements are generally all the same okay let's look at our next major flow control tool and that is loops maybe we want to do something over and over and over and over again until a certain condition is met so let's set our distance back to 10 here and i'm going to do a while loop now while is a little bit different what while's going to do is as long as what's in here is true let's do this and start over again and recheck what is in here so what we can do for this is we can say as long as distance is greater than one run what's in this block and then run what's in this block again and again and again so the way we tell it to eventually stop is we're going to say console.log let's say distance is distance so that's going to actually spit it out and then we're going to take one away from distance now we're going to say okay we're going to console.log we're going to take one away and then it's going to re-run our while loop again and again and again so let's step through what actually happened here uh it set distance at 10 and then it started our while loop it said hey is the distance greater than one yes it is run the code in this block so we spit out a console log and then we made distance one less which is nine and then it started the while loop all over again is distance which is now nine is nine greater than one yes it is run the code block is eight greater than one yes it is run the code block eventually it got down to one is one greater than one no okay stop and continue on down our program our program was actually finished you can see that it said it stopped at distance is two so at this point we could say console.log put on the brakes made a little typo here so now if we clear our program and run our program uh let's actually put on a console log up here hit the gas so our program is going to hit the gas and while the distance is greater than one well let's just run it hit the gas 10 98765432 put on the brakes we're gonna put on the brakes at two maybe we wanna put on the brakes at one so we could say hey if the distance is greater than zero do it so now it's gonna go ten all the way down to one then it's gonna put on the brakes we have a computer program like this is the exact kind of program that could tell a very dumb car that has no concept of steering or obstacles to go until it hits the distance and then stop just with a little bit of flow control and a couple basic variables and output commands this is how programming works the last thing we can do is we can use what are called functions so i'm going to create a new tab over here to just illustrate what functions are a function is essentially a command or a capability you're adding to your program that you can reuse over and over and over again a picture you had a robot and you wanted the robot to step well stepping is not just a simple command it's going to have a knee joint it's going to have an ankle joint it's going to have a left knee joint so step might be pretty complicated take one step might be lift right knee upwards pull right ankle under the knee move right leg forwards and then stand on right leg lift left leg up right it could be 10 or 15 things together but you don't want to have to type those 15 things over and over and over again you just want to be able to say step or step right step left so what you do is you can batch all of those commands together into one function and then just call the function we've been doing that a lot there's this function that comes built into javascript called console.log we basically give it anything and it's going to spit that value out over here into the console we've been using this function over and over and over again because console.log is probably doing a lot of different things behind the scenes and we just want to be able to say hey put this into the console i want to see the output of my program so we're going to make a basic function over here let's make a function called step and so basically we're going to do is we're going to do step open and close parens open and close curly braces anything inside of these curly braces runs whenever we call step so if i call step later on then it's going to run this so let me just add three console logs in here so there's my three commands if i run my program you can see that it's going to lift leg move leg forwards whoops two w's double use there let's run step twice here i'm gonna copy and paste now let's run it three times let's clear and you can see that it did this boom boom boom boom boom boom boom boom boom i have created a step function and now i can call step as many times as i want but even cooler functions can be reusable to do different tasks so let's say i want to be able to step the left leg or the right leg let's say i want to be able to say step left and then step right and then step left how would i accomplish this well you can see that i'm passing one thing into step but if i clear this and run it does the exact same thing we've not given our step function the ability to accept kind of inputs to this little function but we actually have the capability right here in between these two parentheses inputs are called arguments we're giving it an argument we're giving it an input um and we just have to name it up here and then we can start using it so i'll call it which leg so basically anywhere inside of this code block i'm going to have a variable called which leg and that's going to be left or right depending on whatever i pass in here so if i go here lift leg plus which leg plus which leg because if you'll remember we can add strings together and i'll just add a colon here now if i run this i will be stepping left stepping right stepping left so now if i run it you can see that i'm going to lift my left leg move my left leg forwards lower my left leg then i'm lifting my right leg moving my right leg and then back to left ta-da i've made a function that has an argument argument really just means an input for this one function it's a named variable that exists only inside of this which leg does not exist out here uh if i console log which leg it doesn't exist let's go ahead clear this run this you can see which leg is not defined what are you talking about which leg does not exist out here in this whole world of program which leg only exists inside of my function i am giving which leg in and then which leg is available as a variable inside of the function again a function variable is called an argument and you can give things multiple arguments let's say i want to do a big step or a tiny step like let's say this is a tiny step and this is going to be a huge left step i can add a comma up here and i can say which leg and how big these are the two arguments that my function gets the two inputs that my function gets and then my function is going to let's see move leg forwards um by this much so now if i clear and run my program you can see i'm going to lift my left leg i'm going to move it forward by one and then lower it lift my right leg move it forward by two lower it and again these would all be basic commands functions that we'd call to wires going outside of our program or we'd be talking to our web page to update the values you see on the screen in this case our outputs are all console logs but in programming you just have to learn how to connect your outputs to the thing you want and then the programming is exactly the same as what we're doing right now you're just connecting the outputs to different types of commands so again functions are reusable chunks of programming that can also be configured when you run them so we're running step with the left leg and the one bigness of step right those are the configuration those are the arguments of this command we want to run and this is a reusable command let's go ahead and take this concept back over to our fictitious tesla really dumb self-driving car that can only do gas and brake um and in here let's uh create two commands let's do a set gas command and a set break command we're going to set gas and set break uh sure let's say that there can be how much let's say it can be a value from 1 to 10. uh in here we can set gas to we're setting gas to however much and then we're also going to call the set break function in here whenever you set the gas we're going to set the break to zero so we're going to set the break to zero and if you ever call set break then we're going to say we're going to set the breaks however much you told it to and we're also going to set the gas to zero so if you call set break of three then it's going to say setting break to three and it's also going to set the gas to zero and if you'll notice there's a programming problem in here you guys may or may not have caught it we'll see and then let's add an if statement in here if distance is greater than 3 let's set gas to 10 else set break to 10. so we're basically going to say hey if the distance is greater than 3 let's floor it if the distance is greater than three let's stomp on the break and then we're going to automatically just have the distance go on let's get rid of these two console logs because those aren't what's happening now so now here's our program our final really unintelligent self-driving car the distance is 10 right this is coming from the distance sensor we're also going to pretend that every time in here we're getting a new distance from the distance sensor which is not really happening we're just automatically decreasing it by one every time but whatever let's pretend this is actually coming in and then if the distance is three we're going to stomp on the gas we're defining two functions here we're pretending that this right here is actually talking to the gas pedal and this right here is talking to the brake pedal really they're just going to spit out to the console let's see what our program does tada oh look at this it's running forever oh no what's happening why is it doing this well if you look let's step through our program if the distance is greater than 0 it is it's 10 okay so we're going to run this block of code if the distance is greater than 3 it is okay so we're going to run this block of code let's set gas to 10 okay so it's going to run set gas how much will be 10 setting gas to 10 nice we're gonna set break to zero okay so that's going to run this function right here how much inside of here will be zero let's set up and look and then it sets gas again so now it's going to set gas which will set break which will set gas which will set break it's doing this loop forever set gas tells it to set break set break tells it to set gas it's never going to stop it's just going to run this forever so what we actually have to do is we actually have to say here if how much is greater than zero so if how much is greater than zero if we're going to actually give it some gas we're going to stop the break but otherwise if you've set the gas to zero we're not going to do anything and then same thing over here if you're setting the brake if you're actually wanting us to push the brake then we're going to turn off the gas otherwise if you're setting the break to zero we're not going to run this block of code at all okay so if i clear it out and i now run my program ta-da we're good it only did it a few times so you can see i set my gas to 10 i set my break to zero kept my gas on 10. kept my gas on 10. i kept kind of resetting that gas pedal setting to make sure it was at 10. it was at 10 it was at 10 it was at 10 it was at 10. and then all of a sudden at the very end i set my break to 10 and turn the gas to zero so we could do some improvements on this we could say hey if the distance is is 10 then we'll set the gas to 10 but if the distance gets closer then we're going to set the gas to a lower level right obviously our our if else statements our flow control statements are a little aggressive he either hits the gas all the way or hits the break all the way right so we want to make this program better over time but what we've done what we've actually accomplished here is we've taken variables some flow control statements and two functions and we've made a stupid self-driving car in just a few minutes while explaining it all to you and you didn't know what you're doing going into this so this is how programming works this is how programming takes inputs from the real world or from a web page or from a user using a mouse and now it actually spits out outputs and does something this is programming these concepts are the same in almost every language i hope this video helped you if you liked it if you stuck all the way through you got a thumbs up and you gotta subscribe we've got a lot of great content coming out have yourselves a great day bye