As usual, before class, I'll ask you four questions: Firstly, have you learned how to manage directories using Visual Studio Code? You know how to open a project, put it inside the folder, better organize your files to facilitate your study further? Another question: is Node.
js installed on your computer? And to that question, I add up to another sub-question: Do you know what Node. js is for?
If you look at a code, do you know to tell me which part is HTML5, which part is CSS, which part is JavaScript? By the way, in JavaScript, Do you already know how to trigger alerts? Fire confirmations?
Questions? Look at these questions. See if you have any questions about them.
And if you have any questions, you already know how it works. It's a sign that you skipped some of the lessons and missed some important concepts ,valuable for this lesson. So do not forget, up here, you press and you'll go to the first playlist.
Which is always the playlist of the full course. Now, if you have been able to answer these questions, no problem at all Welcome to another class of your course. Subtitles: Rayssa Victoria English Subtitles: Henrique Luiz Hello, Little Grasshopper!
Welcome to another class. of your Curso em Vídeo of JavaScript, fully sponsored by Google. My name is Gustavo Guanabara, I'm a teacher, and welcome to the fifth the lesson of your course, where we will talk about data types and variables.
And if you are thinking at this moment: "Gee, I will skip this class, because I already know what a variable is. " Calm Down! Because JavaScript's variables has a small difference and you may not be used to this kind of philosophy of language.
Let's continue. Previously, in your JavaScript course we learned how to shoot three types of very simple windows: The alert, which is up here, is the window. alert() or simply alert().
You also learned the confirmation window, which looks like an alert, but has the option of "Ok" or "Cancel". And we also learned this from below, the prompt(), which is a way for you to interact with the user prompting him to enter something. And we had a little problem Not on top, the alert is just a message, click Ok and keep going I did not teach you a way, in the previous class, of how to check the middle window if the user clicked on "Ok" or "Cancel", so I can take different actions.
Or for example, if I asked the name of the person using a prompt. Where is that name saved? The person typed the name, where did it go?
And so far, these two questions have only one answer: the data has gone nowhere! They simply got lost because we did not know how to save them. And that's exactly what we're going to learn in this lesson.
I will teach you how to store data, to use it later, but before speaking about variables, memory spaces, storage space I have to show you something: a very important thing, comments. Sometimes programmers leave out the use of comments and comment is a very important thing who comments your codes well, keeps them well documented and only when you are a experienced programmer, you will take a code that you wrote five years ago and will look and say like this: "Gee, I do not remember anything about this code. " And if it had commented you would find everything much easier.
In JavaScript, the comments can use two types of symbology first one, the // that appeared here. And second one, the / * * / which is a single symbol, separated into two pieces. The use is very simple you tha already used any programming language, know what this symbology means If you are a new student, beginning now, no problem, I will explain it.
the // are used to post a comment on a single line so anything I write after // is considered a comment. (I'll explain it better) if I put between / * and * / I can comment in more than one line. For example, I'm going to open the code that we did in the previous lesson in lesson four , I'll show you how the comments work.
In the previous lesson I showed you how we create a folder "cursojs" we opened the "aula04", which was previous example And we have ex001. html then this is the file. I'll shrink it here, just click on this blank piece of paper.
it shrinks. I'm going to show this file where it is, within cursoejs / aula 04 and I have exercício 001, I'm going to open a browser so basically what it did here it showed me these three commands, it will run those three commands first and foremost. first it'll give you an alert, my first message, that's exactly this one I click on "ok", then "Are you liking JS?
", "ok" "What is your name? " "Gustavo", "ok" it showed up, and I got rid of the curse. Basically it ran these three commands in JavaScript.
I already asked at the beginning of the lesson, if you know how to differentiate what is HTML, CSS and JavaScript. This comment symbol is only for JavaScript. So that's why I asked in the beginning, it's important for you to know that the JavaScript snippet is this here then the symbol of // and / * only works inside of here.
Out of here are others comment symbols. So I can do the following, for example, if I put // in this first command and in that second command. Did you see that the Visual Studio Code itself was already green?
Have it changed the color of my code? I'll save and update on my browser. When I update, it started by asking for my name.
It means that it simply ignored these first two commands (I'll put here "André"). So it worked, if I put basically everything as a comment I can update and it did not ask any question, because none of the JavaScript commands were placed. And then there comes another thing, since I'm putting // inside all the lines and are multiple lines you can do so, you can put the / * and in the end the * / I delimit all the commands I want as comments.
This way, the result is exactly the same. For example, I'll put */ here it means that everything between these symbols is a comment, this part that was left out, then it will ask my name. Everything I leave out, is out of the comment.
So this is for debugging, this is a great utility of the comments for debugging is to see how the program is working. Another way to comment is to use the // after each command to explain what it is for, For example, I'll put it here. // it will ask the name .
. . Of course this comment is kind of silly, but when you were learning new commands, you will learn how it works.
// window with Ok button and Cancel so this is comment, I'm commenting what the line is for none of this here that is green will be considered. So if I run the program again, it will ask me, first message "Are you enjoying it? " your name, it did all these three, but that part "window with a Ok button" and "Go ask the name" was simply ignored.
You'll use it, more ahead. take a look at the code, or someone else look at your code and understand it clearly So that's what the comments are for. Use them sparingly!
There are people who comment on everything and without need, but it is a very useful tool in the programming world. But our subject here is not comment, it is variable and it is exactly on that subject that we are going to start commenting about now. I'll explain you a bit different variable than the other teachers including myself, some time ago, explained the concept of variable.
pay attention that I'll use a real-life example and you'll understand. Imagine the following situation: you have a lot of land, you are on the street and bought a lot of land. then you want to transform this lot of land into a parking lot, which means, you want to receive cars to be parked on it.
If you start putting your car inside that lot madly, without organization soon, all your lot will be a mess, you are not able to put anything else and much worse: you are not able to get the first cars that you parked. What does commerce usually do? What people usually do is delimit spots, place spaces within the parking lot.
These spots are a physical mark where the cars will stop exactly this is represented here on this side. So what I'm going to do here, below me, is to create six spots as represented here below: it has six spots. Another thing that is important Another thing that is important, even for the person to be better organized, who has never lost a car in the parking lot in the mall Could not remember where parked it?
What is the best way, that is used until today, for you to find your car in the parking? The spots are numbered, they have identification. So, I'll put the identifications here: a1, a2, a3, a4, a5, a6.
One spot I called from a1 to a6. So let's give the names of our spots. This underneath me are the instructions needed to place six parking spaces in my parking lot.
The big problem is that a parking lot can have a vacancy for car, but if I arrive with a truck or a very large truck, I will not be able to stop. So I would have to have vacancies for trucks and vans, vacancies a little larger that I'll call c1, c2, c3, c4, which I would do the same way that we did previously there are also vacancies for smaller cars, for smaller cars such as motorcycles. So I create, for example, smaller slots.
I'll create from m1 to m6, which are six places for motorcycles basically, what we did was organize spaces on our lot specific spaces for cars, trucks and motorcycles because the size of the car will vary, since there I can start putting cars, in their own slot, i can start putting trucks in their own slot and I can put motorcycles in the places related to them. And how do I put a car in the car's slot? Take a look and look at the relationship that I'm creating here.
I have a vacancy that we have represented previously only an enlarged one, I'll say the following, it's getting a new car so put it on, the vacancy a1 gets the car1. This equal sign here for JavaScript, whenever you look at an equal sign you will read as "assign", it is a combination that we have here. Never call JavaScript a single equal sign "equal" .
A single sign of equal we always call "assign" so, this bottom line I read like this: "car assigned to a1. " Deal? And then, continuing with the idea of the real world imagine now that another car arrives to park and it wants to park in that place a1 that is, I want to make a1 get car2.
Is there some physical possibility, looking here the graph, to put two cars in the same place? And, of course, you replied, "It's not possible Guanabara, so I have to take the first car out to place the second car. And that's exactly what happens with computers as well.
To put the second car, to assign car2 to a1, the slot a1 to receive the second car, I have to take the first car out so, only then, place the second car in place. Another thing that I can do, also with this vacancy, is to say "Look, this vacancy a1 will not get any car! I want to get the car out of here and I do not want to leave any car.
" Just do this, assing null to a1, this word "null" also exists in JavaScript. It means that this vacancy will be zero, with nothing inside and from the moment I make this command by assigning null to this "vacancy" I'll take the car that is in at the moment. And if you understood that for the car slot, surely you will understand this for computers.
Computers also have spaces, also have a lot. This computer lot we call memory. Whenever you think of computer memory you think in a lot turn into a parking lot.
It's a giant space where I can put, not cars, yes data. And if I start putting data in a rampant way, I'll lose this data soon enough So I need inside the computer memory, just like I did with the lot, put delimited spaces to receive these values. These yellow spaces, which appeared beneath me, we call variables.
They are very similar to the parking spaces, so I can use these three spaces who are down here instead of the word "vacant" I'm not creating a vacancy I'm creating a variable. So I'll use the word "var". In order to be able to identify each of the three variables I need an identifier.
I need a name. I'll put here n1, n2, and n3 to put three numbers, for example. Lets give identifiers for them.
var n1, var n2, var n3 It will create three spaces in my large lot which is the memory space. I can also Enter values n1 = 5 Remember a symbol of equal is assign. n2 = 8.
5 n3 = 15 Automatically these values 5, 8. 5 and 15 will be placed within the variables. This is called "attribution".
And if you're still kind of lost, no problem just keep watching. Create this relationship in your head, which you will understand right now. Another thing, just like there is in the parking lots different space sizes, there are also variables of different sizes to fit data of different sizes for example, here below I just created three variables of larger sizes.
So, I'll create three var (just look there, in the corner). These variables will be called s1, s2 and s3 for example, I'm going to put a string We call it "string", so the ones that are down here. I'll create s1, s2 and s3.
Within these variables in place of numbers, as I put the 5, 8. 5 and 15 I'll put words. "JavaScript", "Curso em Vídeo" and "Guanabara".
For me to do this I'll put s1 = "JavaScript" s2 = ''Curso em Vídeo' and s3 = `Guanabara` Note that these strings, these words, these phrases Are they between "quotation marks"? And I can use in JavaScript three types of quotes: The "double quotes", the "apostrophe" or single quotation mark and the "crase" This makes a difference to JavaScript use one or the other, but wait until later we talk about it, just be aware that there are three ways to delimit a string within the JavaScript language. So, as I said earlier, I have six spaces, each one has a well defined name, I will not confuse them and these names we have to talk about it.
The name of each variable, we call it "identifier". There are some rules for naming identifiers, I can not put any name pure and simply. The first rule is that they can start with a letter, as I did: n1, n2, n3, s1, s2, s3 You can also start with a dollar sign, and you can also start with the underscore symbol.
That's a rule, we're hardly going to use the dollar sign or the underline ahead, but it's possible. Can not start with numbers, that is s1 I can not call 1s. It would cause an error.
Another thing, it is possible to use letters or numbers, we saw this s1, s2, s3, n1, n2, n3 You can use accents and symbols. In JavaScript, you can create. a variable call "média" with an acute accent on the "e".
You can create variable π using the π symbol for this, there is no problem with JavaScript this will not make your program wrong, slower, or anything like that. They also can not contain spaces I can not put space in the middle of an identifier. I'm going to replace the space with the underscore, which I put up here And finally, they can not be reserved words.
For example, the word "function", the word "alert", I can not create a variable using words that JavaScript uses as commands. I can not, for example, create a variable called "var". I could not put the "var var" command.
Did you understand how confusing it would be? And to start working with variables, we'll use Node. js which we installed in some previous lessons.
So, open your environment and let's open Node. js. I'm already here on my Windows.
To open Node. js, I'll show you two ways the first way, which is simplest one, is to just click the Start button and search for Node. js.
If you installed it like we did there in previous classes. And if you did not see previous lesson, watch it. It's the first playlist here of any card here above is a card (an i).
Just click on it and access the first playlist. Without installing Node. js, your life will be complicated, we will use a lot of it to train.
Once you open Node. js, it shows this prompt, which is the sign of> And I can ask him to show some things like, for example, show "Hi" to me, Node. js And he wrote "Hi.
" Does for me how much is 3 + 2 It says "5" It is very similar to the Python language. The Python IDLE, which will answer this. Another thing I can do is create variable like we did var name = "Gustavo" I just created a variable, a space in memory, called "name" and that name will be "Gustavo".
It gave me "undefined" because I did not tell it show the name I told to create a variable. It created the variable. If I tell to show the name What is the name?
Gustavo Watch out! If I tell to write that name like this, it will write the word "name. " If I tell to write a name like this, it will write the contents of the variable.
If I want I can change the name. Name is no longer "Gustavo", name is now "Paulo". It will lose the "Gustavo" Just like in the car space, I had to take the first car out, to place the other one.
I'll have to take ou the name "Gustavo" To put the name "Paulo". Note here, I've used double quotation marks and here I've used single quotes, whatever, it will work. The name is now "Paulo.
" If I had the name shown, it showed "Paulo" and not "Gustavo". Was it clear? This is the first way to open Node.
js To close it, you just need type . exit and it will close. Allright?
This is the first way The second way is inside the Visual Studio Code, which gets easier since we are learning and is using it a lot. We can do it that way. I'll close my code here (do not even close it, you can leave it open) and you'll do the following: you will click here on Terminal> New Terminal or press Ctrl + Shift + ` Look on your operating system, what is the shortcut key.
I'll open up Ctrl + Shift + `. It opened a terminal down here. I'll maximize and I'll click on the little arrow here to make it full screen.
To get into the node, it's simple. Just type "node", it goes on the same screen. and I can, within my Visual Studio Code, use the node.
For example, I'm going to create a variable age = 18 I created a variable. var salary = 1550. 35 Allright.
var sex = "male" So you have these three variables, if I want to see the age of the person Age 18 What's her salary? 1550. 35 Which sex?
Male In the same way, I can go out with . exit and it will come back to my terminal. I can close the terminal by typing exit.
Do you realize that there are two different environments? the node, the prompt is>, the terminal the prompt is #. Then it will exit the terminal.
How to get out of the terminal I have it open, it's close using that "x". Very careful! Because sometimes the person is opening terminal, I pressed Ctrl + Shift + ` several times.
I just opened ten terminals Sometimes you're feeling like your computer is kind of slow That's because you opened a lot of terminal. I'm going to leave, exit. And you will talk "But did not leave the terminal it's in the terminal.
" It's in another terminal. I have to close each one of them and it's no matter closing the arrow, I have to come and give "exit" in each one of them The seventh . .
. Did you see how slow it gets? The more terminals are open, The slower my computer is gets.
So let's be carefull! Because sometimes when you use the Visual Studio Code, you get excited, open one more terminal and then only It's slow and you do not know why. It's because of this.
These are the two ways of doing I'll open a terminal, I'll open a Node, if you do not want the screen to be full then it's just you click the arrow and it returns to the original position. In the Node, as we have said, let's create a variable var n1 = 8 var n2 = 5 If I have to show n1, 8. If I have to show n2, 5.
If I have to show: n1 + n2 He will add 5 with 8 and will give 13. If by chance this screen starts to get full you just press Ctrl + L. L of "clean", you pressed Ctrl + L, it wiped the screen of my Node.
We have just demonstrated the creation of a variable and the use of these variables. Remembering that there are rules that are here on the side. These are six rules here that we have to follow when choosing a name for the identifier.
I even recommend you as I said earlier, take your notebook, write it down, print the screen (I'll even pose). Took out? Except that only following these six rules is not sign of success.
There are a lot of programmer that has some giant mistake in the process of following these rules and picking identifier names. I have brought some tips for you to choose identifier names. The first tip is: uppercase and lowercase make a difference.
If I create a "a" variable I have to use "a". If I create a variable "a" and try to show a variable "A", it will return error. I'll show it to you.
If I create variable "a" worth 10 and after creating variable "A" worth 20 I just created two variables. If I have to show a is 10, if I do show A is 20. For example, I'm going to create a variable call b = 30.
If I have to show the B it will say "B was not set" And you're going to say, "It was setted ! " It was not because B and b have a difference. So be aware, that first rule is very important.
The second is as follows: try to use coherent names for your variables We've done this before. Want to save a person's name? The name of the variable is "name" Want to save the salary?
The variable is called "salary", at least "sal". Want to keep age? I call it "age" Anyway, names consistent for the Holy Lord!
There are a lot of programmer which says the following: "My variables will be called n1, n2, n3, n4. " For me n1, n2, n3, n4 are 4 numbers "No, n1 is name, n2 is age, n3 is phone and n4 is salary" You're crazy! That makes you what I like to call "alphabet programmer" or "programmer counter".
The "alphabet programmer" is that all their variables are a, b, c, d, e, f, g, h and the "counter programmer" is that all his variables are n1, n2, n3, n4, n5. Get away from it! The "alphabet programmer" also has that x, y, z.
Each variable is x, y, z. Of course, we will use this occasionally to exemplify but at the time of programming: name in variable "name", age in variable "age", phone number in the "tel" variable, for example. Will not call name n1, phone n2 and salary n3.
Get away from this, for God's sake! Thus, variables are used to keep this, which is appearing on the screen data. And take a look that I put several types of data.
Do you realize that they are different data? Take a look, see what kind of data we're putting. some of them are words, some are numbers, even have some numbers with commas, other numbers without the comma (the comma is the decimal point).
I have the value true and false. I'll do a job for you. I'll sort it for you.
I have this data that is separate. In the upper part near the head 5, 18 and -12 are numbers. These numbers have no fractional part, no value after the comma It is what we call "whole number".
The bottom 0. 5, -15. 9, 3.
14, 8. 0 These are numbers that we call "real". They are numbers with floating point or called float.
In fact, JavaScript treats slightly different from other languages. For JavaScript all of these here are of the same type, which is the "number". JavaScript and will not differentiate a priori integer numeric values and real numeric values.
Here below me I have: "Google" 'JavaScript' and 'Maria` Even represented with those slightly different quotation marks, that we will see a little more forward. This data here is called "string". Those are strings.
A string and can also be a set of numbers for example, your phone your SSN (social security), your identity number they are numbers, but they have point, they have dash. So they are not numeric, they are not number. Your SSN is string, it is a set of characters consisting of numbers and dashes and periods.
And finally, the true and false values are "true" and "false" in English. The programming language calls this a boolean, or Boolean value. These three on the side are the three "primordial primitive types" At the beginning of this course, we will talk a lot about the type of data and we will focus, basically, on these first three: number, string, and boolean.
But know that in JavaScript there are many other primitive types Let me give you examples. Number has two very important internal values. What are the "Infinity" and the "Not a Number" (the NaN) If you started learning JavaScript, you probably received this message several times NaN, "Not a Number".
We'll explain a little better about that. We also have the types in "null" and "undefined". which has a lot of people who confuse (let's talk a bit about this later).
We have the object type, since JavaScript is an object-oriented language. Within object we have a lot of thing, including null is considered (later on we talk about this too). There is an inner type, the array, which is an object, is the dreaded "vector" of programming.
Take it easy! It has no stress with vectors, when the right moment arrive, you will learn it, you will see that it is easy peasy. Also a curiosity "function", is a primitive type in the JavaScript language, since it also works in the functional paradigm and considering a function a type is something very interesting.
And to know if these all types, to work with these types there's a command in Java Script very valuable. That is the "typeof" Let's open our Node. js and we'll better understand how this works I already have my terminal and the node already prepared.
I'll do the following: if I want, I can create a "var n" (which is a number) = 200 It gave it there. If I have to show the "n" it will say it's 200, but I want to know which type of this 200. I just type typeof (all in minuscule) n.
It's going to tell me "n is a number" In JavaScript, as I said, it's a bit different from other languages, if I put for example n = "Google". It accept. "But n is a number, number does not accept Google.
"If you come here again and give, typeof n (I did this by pressing the up and down arrow I go back in the history commands) it's there, string. My variable, when I define the variable n, I do not define a primitive type I say that it is a variable, it is a space. It can increase and decrease as the program runs.
This is a JavaScript feature. I can do so for example: typeof direct number, the literal value, which JavaScript calls 6 "literal number". "Literally a number", I did not put it inside a variable.
typeof 6 number 6. 5 it is also a number. Now, if I make "6.
5" like this, remember what I said? If I put quotation marks around it it's a string. If I put typeof, and put anything in square brackets, it will tell me that it is an object.
Actually it is an "array" (which is an object), it also works for keys. If I put typeof function () {} A function, it will say that it is an function type. If I ask for typeof undefined It is undefined.
Like I said, if I put typeof NaN Not a Number, it's a number. If I put infinity it will say that it is also a number. Remember I said you're an inner type?
(a boring curiosity) (I think this is upsetting) typeof null it should write null. Except null for JavaScript is an object You can do typeof any of them, any value or any variable, but basically we're going to focus a lot in types number, string and boolean and will work very lightly with null and undefined differentiating them each other So that's it, Little Grasshopper! We have reached the end of our fifth class.
It's quite a thing, do not forget to keep your notebook up to date. If you jot down everything in the notebook, there's no stress out there because you are slowly learning. Another thing you can not stop doing is practicing.
No use watching this video until the end and consider that just because you saw me doing You already know how to do it. Remember what I said, there at the beginning in the first classes? You do not say you learned how to ride a bike and make radical maneuvers just watching videos, why do you say then that you learned to program in JavaScript just watching I do?
I say goodbye here, do not forget, up here playlists and videos that I deem interesting for each of the classes. Always the first playlist is the JavaScript. I will also put here the playlist of the course of HTML5 and CSS which is important.
In this class, we did not use any HTML, but it's important to know. Down here you subscribe to the channel, access the videos that are available. Within the Curso em Vídeo, we have several other courses.
Do you want to make a Javascript course with a Hardware course? A Networking course? Also on our channel, it's just you watch.
Just go to the YouTube channel Curso em Vídeo youtube. com/cursoemvideo And access our playlist area. You will see the number of courses, the amount of classes we have done during all those years of content production.
Once again, I would like to deeply thank you Google's full sponsorship, and I would also like to thank your audience for watching. all classes that are already available on our channel. A big hug, Good studies and see you later!
