Codecademy Learn Javascript - 1 - Walkthrough Tutorial

**Understanding JavaScript Console Logs**

The console.log function is a fundamental tool in JavaScript that allows developers to print out values or messages to the screen. This can be useful for testing and debugging purposes, as well as for displaying information to the user. In this section, we'll explore how to use console.log to log different types of data.

**Logging Data Types**

One of the powerful features of console.log is its ability to handle a wide range of data types, including strings, numbers, booleans, and more. For example, we can log the string "hello" using the syntax `console.log("hello")`. We can also log numbers, like 42 or -3.2, by simply stating them without quotes, such as `console.log(42)`.

In addition to numbers, console.log can handle booleans and other data types, including objects and arrays. For instance, we can log an object using the syntax `console.log({name: "John", age: 30})`. We can also log arrays by stating them without quotes, such as `console.log([1, 2, 3])`.

**Logging Multiple Values**

One of the convenient features of console.log is its ability to handle multiple values in a single log statement. To log multiple values, we simply separate each value with a comma, like this: `console.log("hello", 42, true)`. This will print out all three values on the same line.

**Logging Strings**

When logging strings, we can use either quotes or no quotes. Quotes are used to enclose the string, while no quotes indicate that the value is a literal string. For example, `console.log("hello")` and `console.log('hello')` both log the string "hello".

**The Importance of Semicolons**

In JavaScript, it's generally recommended to use semicolons at the end of every statement. This helps ensure that the code runs as intended, without any unexpected errors or bugs. While JavaScript can often infer the correct placement of semicolons automatically, using them explicitly can help prevent mistakes and make the code more readable.

**Running Console Logs**

To run console logs, we simply need to execute the JavaScript code in a console environment, such as Node.js or a web browser's developer tools. The console.log function will display the logged values on the screen, allowing us to see the results of our code.

**Math Operations with Console Log**

In addition to logging data types and strings, we can also perform basic math operations using console log. For example, we can add two numbers together by stating them followed by a plus sign: `console.log(2 + 3)`. We can also subtract one number from another using the minus sign: `console.log(5 - 2)`.

We can multiply two numbers together using the multiplication operator (`*`), and divide one number by another using the division operator (`/`). For instance, we can say `console.log(4 * 25)` to calculate the product of 4 and 25.

"WEBVTTKind: captionsLanguage: enhey guys what's up this is kazy from clever program.com where you learn to code smarter now we are probably going to start the infamous series on series series series yeah on learn JavaScript on code academy okay this is probably going to be the best series on learning JavaScript special in code academy so you know just enjoy and and you'll also learn so let's let's jump right into it what is Javascript about and what does it want us to do so a very quick overview JavaScript lets you do all the cool stuff on the web web what's happening to my English when you click on things It'll like open them up all the graphical interfaces all the beautiful user interface almost all of it is done by JavaScript so at the end of the day JavaScript is what makes the Internet run especially nowadays that's the that's the technology that we use uh for all the front end especially so let's go ahead and click on introduction to JavaScript and we'll get started if you check all of these guys all of this stuff is locked it wants you to upgrade it and um but other things are there so for example function scope arrays and loops and you know you guys know my style what I do is if for those of you who are new basically what I do is if I'm trying to explain something I'll open up another terminal or I'll go on this website called repl.it reel.it where I'll show you the code as we're coding it okay so why don't we just get started so let's click introduction to JavaScript let's go all right welcome to learn JavaScript we got our first achievement that's always good JavaScript is the most widely used programming language on the web and is used on most websites including this one so that's kind of essentially what I was saying in the start by the end of this course you'll have a strong foundation in JavaScript you'll be able to write full-fledged programs make HTML and CSS Dynamic and right impressive web applications and if you follow this course with me you will also not be bored and probably have a lot of fun all right I I can't stand boring programming guys so I'm trying to cure that myself this unit has two parts learn the building blocks of JavaScript do some fun stuff with those parts cool hit next to begin let's get started so here we see that we have three variables one is called um okay one is called my string and we set that to undefined my number is also we set it to undefined and another variable my Boolean we set it to undefined VAR is nothing in itself that's basically you're just saying like hey that's going to be my variable okay so again let me have my good Buy reel.it open so when we go over this stuff you know I can show you guys it everything that we're talking about directly so for example I can say varx is equal to 5 and then I can say uh console. log X this is just saying console. log X is just saying hey show me X on the right hand side of the screen so as you can see it showed you five and our variable X we use that there and we use it here one of my favorite variables for those of you guys who might be new here is banana so we're going to use banana I hate looking at x and most programming you'll almost never be writing things like X and stuff other programmers are going to be like what's wrong with this guy he's writing all this cryptic stuff or she right so let's focus on uh calling him something other than x and put more life into them and VAR is just necessary to announce a variable that's really what's Happening Here cool now do not edit the code under this line what are they doing here they're simply saying your name is whatever this was here your lucky number okay what does this do this plus sign this plus business that they have going on let's check it out all right let's check it out we're GNA take their uh my number we're going to put it here right console.log okay so we're not going to make it undefined that's kind of nonsense we're going to make it like four and if I hit run here you can see how it works essentially what we're doing is we're combining this number four with this little thing in the quotes Okay so in programming what the thing that in quotes we call it a string and we're just basically making the string bigger so if we just wrote it like this that would give you an error which is what you can see on the left side it says hey there's a some kind of error going on you can just do some quotation followed by some other thing like a variable if you want to combine the two you use a plus sign to combine the two okay okay the things in quote you're basically saying give me exactly that thing which is why on the right hand side you see lucky number which is above me probably um or sorry the exact string lucky number with a colon my number is the thing that comes from our variable up at the top at line one that we defined so lucky number exactly that plus our variable that we created which is four in this case add it together and boom we get lucky number is equal to four another thing that I want to tell you guys about uh you know when you are following my program is that I'll have all of these notes available for you so as a matter of fact I'm going to hit save on this it has created a link already and I will share this link with you guys so it's going to be called clever programmer JavaScript code academy one all right so you guys can then enjoy and use this as well to learn all right uh the notes are going to be in the description in the link below okay so they're just saying blah blah blah blah blah uh I I already broke all of this down for you uh except for Boolean so we're going to talk about that in one second but as you can see here string or any groupings of texts and things with within the quotes so here when they say name they literally want exact name they don't want the variable name that might be four or five they are trying to say give me exactly the word name with a colon and space after it so whenever you want something to be very exact you use string because that's the that's the thing that you want you don't want anything else uh number okay any number including numbers with decimals without quotes is is a number so for example uh just for your practice right what is that versus what is that okay uh on line five this is um this thing here okay is a quote this thing here is a number okay that's the difference there so I'll put this here for you guys uh string and then this guy at the bottom this is a number okay without the quotes so what does that mean well uh what's the benefit of this if you try doing 4 minus 4 you're going to get back something that probably doesn't make sense or I might be surprised in JavaScript so yeah in JavaScript I am surprised uh it's able to subtract subst substra sub subtract strings but you can't do that in most of their languages you would have to do four minus 4 like that okay usually you can't compare and subtract strings but JavaScript is being really smart and it's going hey don't worry I know what you mean I'll I'll do I'll do the right thing for you okay 23.4 two is also a number all right now let's move on to Boolean Boolean is something like true or false all right so if you say true or false that's your Boolean the reason why these are going to be important is you can say hey if Johnny cleaned the dishes is true then display you can play Xbox 360 now Johnny or if Johnny cleaned the dishes is equal to false then maybe you can console.log or print out or whatever like no you can't play Xbox 360 or whatever all right so true and false is the heart of programming this is the zero and one or whatever way you hear of it I like the true or false way more than just the zero or one way so that's really essentially what that is okay and those are your Boolean values anything that evalue is to true or false okay is four less than four is that true or false what do you think it's false okay four is not less than four so this is your Boolean kind of logic did um I don't know did your worker or your cowork or your employee work more than 40 hours if so pay them overtime okay so again you're going to have maybe you know uh let's Define a variable called overtime and we can set that to 40 hours and we can say uh yeah so let's see we can have a variable Bob hours and we can say that he worked 41 hours and then we can go down here and check hey did are Bob's working hours greater than the overtime hours let's see what it says and you can see on the right hand side it says true so if this is true then maybe we pay Bob over time okay all right so the stuff that I've shown you guys is you know I'm kind of jumping the gun and showing you guys the stuff that's going to happen next so a lot of the stuff that they're going to show next I'm already showing you guys so if I ever go on tangent it's it's a helpful tangent it's well sometimes it might not be but most of the times it will be all right now let's see what they're talking about about here are their instructions so in the code editor there are three variables we will learn about variables in the next lesson again I already covered this right so you guys kind of know what a variable is replace each variable's value with each corresponding type okay so for my string they want us to put something that's a string so let's say Bob like that okay um for my number let's actually put in a number so we'll say seven and for my Boolean we'll put in a Boolean and remember what booleans are there's something that are either true or false in this case we'll just put in false okay on line one there's a variable named my string so replace undefined with a string your name so sure we can you know put in my name or something all right right and we don't really need the hints let's just run it let's see what happens see what it says it's running it it's running it it's running it for a little bit longer than expected I'm worried if I'm stuck in the infamous code academy Loop oh looks like I'm not so did I win did I pass everything okay so as you can see the first thing is done the second thing is done the third thing is done fourth thing is done so I think we're good um and on the right hand side you can see that it says name is Raf Kazi lucky number seven right this is what line8 is doing it's combining the word lucky number with my number and then on line nine you can also see that it's combining good joke with this so was a joke good false was the lucky what's the lucky number seven my name is rafik Kazi cool and we can't do much programming with our knowledge of types right now so let's build something cool let's learn how to ask JavaScript to talk to us oo how will JavaScript talk to us to do this we need to do two things a way to ask JavaScript to talk and two something for JavaScript to say okay we can ask ask JavaScript to print words to the console with this line of code you guys are already pros at this and I've already shown you this but I'm just going to put that right here and at the bottom you're going to see that it says your message here so that's essentially what that does let's go back in human speak this is saying hey console please print log this thing inside the parenthesis bye thanks they're funny I like their jokes cheeky but writing this line we have also solved the second thing we need something for JavaScript to say we can put a string number Boolean or any other data type inside the parentheses of a console.log again you saw that we were putting less than signs we were putting true and false putting pretty much anything between the console.log function that prints out your thing use console. loock to log a string of your favorite pizza topping okay so we can say console.log and for our favorite pizza topping I don't know let's say jalapeno I I really like jalapenos so we're going to put that we have to put the semicolon that's something you guys will get used to ja JavaScript is really smart even if you don't put the semicolon it'll know what you're talking about but there's certain cases where you're going to run into really weird errors later on in your life that might cost you millions of dollars so there are all kinds of horrific stories about not putting semicolons in JavaScript so don't let javascript's smartness fool you into not putting semicolons go ahead and do that anyways all right let's run this bad boy and let's see what we get we get back jalapeno fun fact we can log multiple things at once by separating them with commas so we can say jalapenos and or jalapeno and we can say I don't know pineapple so by doing this you can have it print out multiple things as you can see here all right cool yes awesome I don't know all right let's hit next and the last thing we're going to leave this off at is do some math and we're going to leave off there all right so it's telling you that you can do some basic math okay you can do things like adding subtracting multiplying dividing okay you want to be that cool kid in the class that extremely cool kid right that uh does math not on his calculator but on his laptop sure that will make you cool but um in the world of people who program they'll definitely give you some bonus points so essentially I can say 5 - 3 and it'll show you on the right hand side I can say uh 5 * 25 console. log I don't know 25 ided 5 let's see what we get 5 divided by 5.2 we get some weird big number here right so all your calculator stuff JavaScript can handle it for you let's see what it says these all work you might guess uh-huh okay so console log add 3.5 to your age so let's do that so I'm going to say 3.5 plus my age is 22 and that's looks good inside another console.log take the current year and subtract so I'm going to say console.log and I'm going to take the current year so 2016 minus 1969 that should give me the difference between 2016 and 1969 probably a lot of years so it's been um oh that will give you the number of years it's been since the moon has land oh since we landed on the moon so we landed on the moon in 1969 they want us to create another console. log that does 65 by 240 so okay console.log divide 65 by 240 so just like that another console.log then multiply the full answer from step three by 100 so I guess what I can do is I can can do 65 / 40 * 100 okay and I can put this guy in parentheses just to say do this operation first and then multiply that result by 100 that's the percent of the Sun that is made up of helium assuming we could stand on the sun we' all sound like chipmunks oh that's pretty cool so 27% of the sun is made up of helium fun fact okay guys so you saw JavaScript lets us do some for now we went through some really basic things but you can see that we're going to be building up to some really great and epic things right we are even going to be able to build our own games with JavaScript if code academy doesn't cover it and they want to make money off of you guys but having all these pro versions then after the code academy course is done I will make up some projects with JavaScript that you guys can follow along and do without having to pay a single scent all right guys I love you guys I appreciate you guys if this is your first time please subscribe to the channel if it's not your first time and you haven't subscribed subscribe like the video you'll see many more coming like this shortly take care guys I'll see you in the next video for forhey guys what's up this is kazy from clever program.com where you learn to code smarter now we are probably going to start the infamous series on series series series yeah on learn JavaScript on code academy okay this is probably going to be the best series on learning JavaScript special in code academy so you know just enjoy and and you'll also learn so let's let's jump right into it what is Javascript about and what does it want us to do so a very quick overview JavaScript lets you do all the cool stuff on the web web what's happening to my English when you click on things It'll like open them up all the graphical interfaces all the beautiful user interface almost all of it is done by JavaScript so at the end of the day JavaScript is what makes the Internet run especially nowadays that's the that's the technology that we use uh for all the front end especially so let's go ahead and click on introduction to JavaScript and we'll get started if you check all of these guys all of this stuff is locked it wants you to upgrade it and um but other things are there so for example function scope arrays and loops and you know you guys know my style what I do is if for those of you who are new basically what I do is if I'm trying to explain something I'll open up another terminal or I'll go on this website called repl.it reel.it where I'll show you the code as we're coding it okay so why don't we just get started so let's click introduction to JavaScript let's go all right welcome to learn JavaScript we got our first achievement that's always good JavaScript is the most widely used programming language on the web and is used on most websites including this one so that's kind of essentially what I was saying in the start by the end of this course you'll have a strong foundation in JavaScript you'll be able to write full-fledged programs make HTML and CSS Dynamic and right impressive web applications and if you follow this course with me you will also not be bored and probably have a lot of fun all right I I can't stand boring programming guys so I'm trying to cure that myself this unit has two parts learn the building blocks of JavaScript do some fun stuff with those parts cool hit next to begin let's get started so here we see that we have three variables one is called um okay one is called my string and we set that to undefined my number is also we set it to undefined and another variable my Boolean we set it to undefined VAR is nothing in itself that's basically you're just saying like hey that's going to be my variable okay so again let me have my good Buy reel.it open so when we go over this stuff you know I can show you guys it everything that we're talking about directly so for example I can say varx is equal to 5 and then I can say uh console. log X this is just saying console. log X is just saying hey show me X on the right hand side of the screen so as you can see it showed you five and our variable X we use that there and we use it here one of my favorite variables for those of you guys who might be new here is banana so we're going to use banana I hate looking at x and most programming you'll almost never be writing things like X and stuff other programmers are going to be like what's wrong with this guy he's writing all this cryptic stuff or she right so let's focus on uh calling him something other than x and put more life into them and VAR is just necessary to announce a variable that's really what's Happening Here cool now do not edit the code under this line what are they doing here they're simply saying your name is whatever this was here your lucky number okay what does this do this plus sign this plus business that they have going on let's check it out all right let's check it out we're GNA take their uh my number we're going to put it here right console.log okay so we're not going to make it undefined that's kind of nonsense we're going to make it like four and if I hit run here you can see how it works essentially what we're doing is we're combining this number four with this little thing in the quotes Okay so in programming what the thing that in quotes we call it a string and we're just basically making the string bigger so if we just wrote it like this that would give you an error which is what you can see on the left side it says hey there's a some kind of error going on you can just do some quotation followed by some other thing like a variable if you want to combine the two you use a plus sign to combine the two okay okay the things in quote you're basically saying give me exactly that thing which is why on the right hand side you see lucky number which is above me probably um or sorry the exact string lucky number with a colon my number is the thing that comes from our variable up at the top at line one that we defined so lucky number exactly that plus our variable that we created which is four in this case add it together and boom we get lucky number is equal to four another thing that I want to tell you guys about uh you know when you are following my program is that I'll have all of these notes available for you so as a matter of fact I'm going to hit save on this it has created a link already and I will share this link with you guys so it's going to be called clever programmer JavaScript code academy one all right so you guys can then enjoy and use this as well to learn all right uh the notes are going to be in the description in the link below okay so they're just saying blah blah blah blah blah uh I I already broke all of this down for you uh except for Boolean so we're going to talk about that in one second but as you can see here string or any groupings of texts and things with within the quotes so here when they say name they literally want exact name they don't want the variable name that might be four or five they are trying to say give me exactly the word name with a colon and space after it so whenever you want something to be very exact you use string because that's the that's the thing that you want you don't want anything else uh number okay any number including numbers with decimals without quotes is is a number so for example uh just for your practice right what is that versus what is that okay uh on line five this is um this thing here okay is a quote this thing here is a number okay that's the difference there so I'll put this here for you guys uh string and then this guy at the bottom this is a number okay without the quotes so what does that mean well uh what's the benefit of this if you try doing 4 minus 4 you're going to get back something that probably doesn't make sense or I might be surprised in JavaScript so yeah in JavaScript I am surprised uh it's able to subtract subst substra sub subtract strings but you can't do that in most of their languages you would have to do four minus 4 like that okay usually you can't compare and subtract strings but JavaScript is being really smart and it's going hey don't worry I know what you mean I'll I'll do I'll do the right thing for you okay 23.4 two is also a number all right now let's move on to Boolean Boolean is something like true or false all right so if you say true or false that's your Boolean the reason why these are going to be important is you can say hey if Johnny cleaned the dishes is true then display you can play Xbox 360 now Johnny or if Johnny cleaned the dishes is equal to false then maybe you can console.log or print out or whatever like no you can't play Xbox 360 or whatever all right so true and false is the heart of programming this is the zero and one or whatever way you hear of it I like the true or false way more than just the zero or one way so that's really essentially what that is okay and those are your Boolean values anything that evalue is to true or false okay is four less than four is that true or false what do you think it's false okay four is not less than four so this is your Boolean kind of logic did um I don't know did your worker or your cowork or your employee work more than 40 hours if so pay them overtime okay so again you're going to have maybe you know uh let's Define a variable called overtime and we can set that to 40 hours and we can say uh yeah so let's see we can have a variable Bob hours and we can say that he worked 41 hours and then we can go down here and check hey did are Bob's working hours greater than the overtime hours let's see what it says and you can see on the right hand side it says true so if this is true then maybe we pay Bob over time okay all right so the stuff that I've shown you guys is you know I'm kind of jumping the gun and showing you guys the stuff that's going to happen next so a lot of the stuff that they're going to show next I'm already showing you guys so if I ever go on tangent it's it's a helpful tangent it's well sometimes it might not be but most of the times it will be all right now let's see what they're talking about about here are their instructions so in the code editor there are three variables we will learn about variables in the next lesson again I already covered this right so you guys kind of know what a variable is replace each variable's value with each corresponding type okay so for my string they want us to put something that's a string so let's say Bob like that okay um for my number let's actually put in a number so we'll say seven and for my Boolean we'll put in a Boolean and remember what booleans are there's something that are either true or false in this case we'll just put in false okay on line one there's a variable named my string so replace undefined with a string your name so sure we can you know put in my name or something all right right and we don't really need the hints let's just run it let's see what happens see what it says it's running it it's running it it's running it for a little bit longer than expected I'm worried if I'm stuck in the infamous code academy Loop oh looks like I'm not so did I win did I pass everything okay so as you can see the first thing is done the second thing is done the third thing is done fourth thing is done so I think we're good um and on the right hand side you can see that it says name is Raf Kazi lucky number seven right this is what line8 is doing it's combining the word lucky number with my number and then on line nine you can also see that it's combining good joke with this so was a joke good false was the lucky what's the lucky number seven my name is rafik Kazi cool and we can't do much programming with our knowledge of types right now so let's build something cool let's learn how to ask JavaScript to talk to us oo how will JavaScript talk to us to do this we need to do two things a way to ask JavaScript to talk and two something for JavaScript to say okay we can ask ask JavaScript to print words to the console with this line of code you guys are already pros at this and I've already shown you this but I'm just going to put that right here and at the bottom you're going to see that it says your message here so that's essentially what that does let's go back in human speak this is saying hey console please print log this thing inside the parenthesis bye thanks they're funny I like their jokes cheeky but writing this line we have also solved the second thing we need something for JavaScript to say we can put a string number Boolean or any other data type inside the parentheses of a console.log again you saw that we were putting less than signs we were putting true and false putting pretty much anything between the console.log function that prints out your thing use console. loock to log a string of your favorite pizza topping okay so we can say console.log and for our favorite pizza topping I don't know let's say jalapeno I I really like jalapenos so we're going to put that we have to put the semicolon that's something you guys will get used to ja JavaScript is really smart even if you don't put the semicolon it'll know what you're talking about but there's certain cases where you're going to run into really weird errors later on in your life that might cost you millions of dollars so there are all kinds of horrific stories about not putting semicolons in JavaScript so don't let javascript's smartness fool you into not putting semicolons go ahead and do that anyways all right let's run this bad boy and let's see what we get we get back jalapeno fun fact we can log multiple things at once by separating them with commas so we can say jalapenos and or jalapeno and we can say I don't know pineapple so by doing this you can have it print out multiple things as you can see here all right cool yes awesome I don't know all right let's hit next and the last thing we're going to leave this off at is do some math and we're going to leave off there all right so it's telling you that you can do some basic math okay you can do things like adding subtracting multiplying dividing okay you want to be that cool kid in the class that extremely cool kid right that uh does math not on his calculator but on his laptop sure that will make you cool but um in the world of people who program they'll definitely give you some bonus points so essentially I can say 5 - 3 and it'll show you on the right hand side I can say uh 5 * 25 console. log I don't know 25 ided 5 let's see what we get 5 divided by 5.2 we get some weird big number here right so all your calculator stuff JavaScript can handle it for you let's see what it says these all work you might guess uh-huh okay so console log add 3.5 to your age so let's do that so I'm going to say 3.5 plus my age is 22 and that's looks good inside another console.log take the current year and subtract so I'm going to say console.log and I'm going to take the current year so 2016 minus 1969 that should give me the difference between 2016 and 1969 probably a lot of years so it's been um oh that will give you the number of years it's been since the moon has land oh since we landed on the moon so we landed on the moon in 1969 they want us to create another console. log that does 65 by 240 so okay console.log divide 65 by 240 so just like that another console.log then multiply the full answer from step three by 100 so I guess what I can do is I can can do 65 / 40 * 100 okay and I can put this guy in parentheses just to say do this operation first and then multiply that result by 100 that's the percent of the Sun that is made up of helium assuming we could stand on the sun we' all sound like chipmunks oh that's pretty cool so 27% of the sun is made up of helium fun fact okay guys so you saw JavaScript lets us do some for now we went through some really basic things but you can see that we're going to be building up to some really great and epic things right we are even going to be able to build our own games with JavaScript if code academy doesn't cover it and they want to make money off of you guys but having all these pro versions then after the code academy course is done I will make up some projects with JavaScript that you guys can follow along and do without having to pay a single scent all right guys I love you guys I appreciate you guys if this is your first time please subscribe to the channel if it's not your first time and you haven't subscribed subscribe like the video you'll see many more coming like this shortly take care guys I'll see you in the next video for for\n"