Criando o seu primeiro script - Curso JavaScript #04

As it's already getting traditional in your JavaScript video course, before the class I have some questions for you: Can you remember what was the recommended bibliography? What are the sites? What are the documents I recommend you to read and facilitate your learning in JavaScript?

Also: for a person to be a programmer, not just a JavaScript programmer Is it really needed to speak English well? Is it a prerequisite? Another thing: can you remember the tips I gave you to study, to learn the right way?

Do you remember the tricks I gave in order to remember the contents? And most important of all: Do you remember what were the programs we have installed on your computer? so that we can get to this class and make our first program?

If you are unable to answer some of these questions I just asked you, Return to the previous class. Just click here above and always choose the first link, which is the full course playlist And in this class, we will start to develop our first JavaScript scripts 🎵 Introduction music 🎵 Hi, little Grasshopper, welcome to another class of your "Curso em Vídeo". JavaScript course fully sponsored by Google, my name is Gustavo Guanabara I am your teacher, and now that we have passed these first classes what we're going to do as always here in the "Curso em Vídeo" is to build our first scripts And after so many years creating content for YouTube I know, there are a lot of people who skip the first classes and come straight here to know what is the first script Some people think it is "waste of time" to study the basis of the language seeing the history and the evolution of things.

But trust me, it's not a waste of time. If you could not answer some of these questions, and things like: Is JavaScript the same as Java? What is ECMAscript?

We have seen all this things in the first classes of this course. And just giving a reminder, We have seen that every document, when we are going to start creating websites, and JavaScript will help a lot of people to do this Our documents are divided into three parts: the Content Part, which is the HTML language that we will use. The Design Part, which is the part to make things a little bit more beautiful, We'll use CSS.

And the part of Interactivity we will use it entirely in JavaScript (client-side interactivity). And if by chance you did not attend the previous classes, there I made a relation explaining the difference among content, style and interaction. We saw a whole panorama So do not go into being too lazy to attend the first classes Go back there and invest your time.

It is not a waste of time, it is investment. But now what we are going to do is to open our system and put everything we have installed in the previous class to work. Follow the steps with me I'm already here on my computer, I will always use Windows because the vast majority of our students uses Windows as a base, and what I'm going to do is I'm going to open Google Chrome, and the Visual Studio Code that we have installed in the previous class.

What I am going to do here during the initial learning is: to drag Visual Studio Code to the left side, and on the right side of the screen I'll put this here, then I'll leave it here. I even increased the code size so that we can have a better use of the screen and you will leave it opened in parallel here. And the tip I give you, if you do not have two monitors on your computer is: use your cell phone.

You keep it by your side You watch me on your cell phone and use the computer so that you can to create your scripts with me. Because as we have seen previously, it is not just by watching the video of cycling, or just by watching the video of guitar playing that you learn how todo it. The same way, you only learn how to program getting your hands dirty.

That is why down there on the screen it's written "to get the hands dirty". If necessary, watch this video in full-screen, to get a better view seeing. So let's go there, the first thing we are going to do is to organize our files.

And a good programmer organizes the files, otherwise in the future we end up getting confused So we are goint to start our course here, in the first practical part We're going to organize a folder. I opened My Documents where I have day-to-day documents, and I'll right-click New> Folder. This folder I have just created, I will name : CursoJS.

I'm going to open the CursoJS folder and it's empty. I can even close this here, and now in Visual Studio Code I click in File> Open Folder and it will ask: what folder do you want to open? I want to open My Documents CursoJS, select the folder and ready.

It is going to open the folder, in the corner you see your files you can, to save screen space, click on these white papers then this part of the left side disappears, and every time you need to see it again, you click here and open the little paper The CursoJS folder is empty. The first thing I'm going to do: Let's organize by classes, so I'm going to click on this second icon here New Folder, which is "new folder". It's going to create the new folder here, I'm going to name it: aula04 and we're going to organize our files.

I press Enter, the folder has been created. And I'm going to click on this first one here, the New File, and we're going to create our first exercise. And I'm goint to name it: ex001.

html Always put the end, the file extension is ex001 all in lowercase letters filenames that we will put on the Web are all in lowercase letters, so ex001. html press Enter and it already created the file. I can even hide that tab.

Another thing I can close is this "Welcome" tab, so that I only have file ex001. html opened on the screen. If you come here in Explorer I'm going to leave the Explorer already open, the folder is CursoJS the folder aula04 is already created, opening the aula04 folder, I have the ex001 exercise.

If I double click on it it opens the file here in my browser. From now on, everything I modify here, I press this Reload button and it will update for me OK? The first thing we're going to do with Visual Studio that will help us a lot: let's start creating a code here, in lowercase letters you just type "html" when you type "html" this Intelisense, will help you giving several options.

One of them, this "html5" which is the version that we will use, the most updated version. Clicking on it, look at this. It already created a HTML5 code easy, simple, without you needing to know any line.

As I said earlier. If you are a student who already knows HTML, no problem at all, you already understood most of the code created here on the screen. Now, if you're well beginner and you have never seen HTML (as I said earlier) it is very important that you know how to use HTML but this is not an essential prerequisite for this course You can do the JavaScript course without knowing the basic HTML part we will see the essential, but it's important that you go ahead and take the HTML Course and here in the "Curso em Vídeo" we also have, clicking up here always our second link is our "HTML Course with CSS" and we see HTML5 technologies and CSS3, step-by-step, detail by detail But here we go to the screen, what we have is basically the following: I have my document which is the <html> tag, which is important for HTML5 Here I have my language, It is in English I'm going to put it in Portuguese like this: pt-BR.

That way I'm saying to the browser that my site is in Portuguese Then I have two areas in my document I'll close here, click on this minus sign, I have two basic areas: the head area <head> and the body area, the <body>. Every site has these two areas: the head and the body. The head part is the part of settings And the body part is the part that will appear on this white area.

Just so you have an idea. For example in the <title> tag (HTML is made of tags). All the marks,everything between the sign of < and > are our tags are our marks.

Here, for example, the <meta> tag is being used twice for two different configurations. First, for the characters settings for us to use accents, which Portuguese has (and several other languages have) and the viewport configuration the (actually used three times), compatibility, (especially with Internet Explorer and Edge) and the viewport and keyboard configuration . Do not worry about those lines at first, just leave them there and I have the title.

The title is what will appear exactly here above We can see it's as ex. html. I'll close that other flap here.

It up here as filename If I want, I'll put here "My first program" when I save it how do you realize you have to save? Notice here above, next to the filename, there is a little ball This ball indicates that the file has been changed you typed something but have not saved yet. To save you go in File> Save Another way you can see it is that I have here a '1' Wich is saying that 'one' file hasn't been saved.

If you press Ctrl + S both number and little ball disappear. If I make any other change for example type 'Hi' It means that I have a file that has been changed but has not yet been saved If you look here on the side it's saying that the changed file was exactly this one I'll press CTRL + S again and you'll see the difference between "My first program" and "Hi". .

. I mean, I'll tell you something. There is a "curse" if you have been a Video Course student for a long time, already knows about this curse that is the " Hello World curse" Legend has it that if you are going to learn any kind of technology, any kind of programming language and do not put "Hello World!

" to write in your first example you will end up not learning this technology or language the right way. In fact, I do not know if this works, if it's true, but let's agree: I will not risk it. I'm going to put "Hello, World!

", To make sure everything goes well. Writing it right, ok? Then we will see where it is written "My first program" and where it will come inscribed "Hello, World!

" The ball here still indicates that it was not saved. Ctrl + S. I'm going to come here and press Ctrl + R or F5, or simply click here See?

Here it's giving me the option to translate this page because it's in English I will not save, "never translate website". Then look, the "My first program" is my <title> or the title and "Hello, World! " is inside of my body.

We can also put some tags, for example. I'm going to turn the "Hello, World! " in a title When you are reading a newspaper story, the newspaper story has a title.

To create this title is going to <h1> To end the title you put </h1> As you can see I simply open tag And insert / and it already fills in the rest cause it knows the title has been opened and that it will close the title here in the end. Let's save again. Update It's already has a larger letter.

It is important to say: <h1> does not increase the letter size. <h1> says that this text here (in the 'Hello world! ' case) is a "level 1 title".

Another thing I can create here is a paragraph, <p> I've rid myself of the curse </ p> Let's save, upgrade. See the difference between title and paragraph? That's the content part.

And all the content is inside an HTML file. Let's do it all inside the same HTML file, right? We also have the the style part, which we saw previously The style part is usually set up in the head area where I'll place a tag called <style>.

Just put "style", press enter and it's already created. Just put it in lowercase: write "style" I just put "sty" and it already said: 'do you want to create a style tag? ' Then I just click or press the Enter to confirm.

Here inside I'll put the style. For example, I'll mark this. .

. Note that this part here is another technology(CSS). All outside of it is HTML.

All I write here inside is CSS. For example, I have a body. I can start typing "body" then it already creates a selector here.

I open curly brackets, then I put: background-color, for example, I just put "bac" and it's helping me background-color. It gives you several options I'm going to put blue here; in CSS every end of markup has a semicolon. And another interesting thing.

This blue is too strong. I'll save and update It was very strong, I want another blue, a little lighter. Just stop the mouse over the word "blue" that window will appear.

I can choose a lighter blue clicking and dragging I'm going to make this blue a little clearer. He already filled in the code, you do not even have to worry about the color code. In the course of HTML I taught you how to assemble this color code, this RGB You can even upload the RGB format here, in the format hexadecimal, which we learned during the course of the HTML course (do not worry about it at the moment), in HSL and returning to RGB.

Basically he'll help you out. I'll save, update again, and now I'm with that blue, my handwriting may turn white. So I'm just going to like it color.

Just clicked on color, it will give me the option is white is "white". I can write white and it worked. Updating, you will see that the letter went white.

If you want to configure the font, this is the style part If you want to configure the font, this is the style part I'm trying to make the code more pretty. You can, for example, put here our source My source will be normal, 25pt which is the size of it when you choose there in Word the font size 25pt and the source I will use the Arial font, remembering the semicolon at the end of each. Ctrl + S, I updated it and it is already here (25 is too big) 20, refresh, beauty.

20 is the size of this letter. This one was proportional to her. So this part of style, let's start out pretty simple.

So we saw, already HTML content. This part here, where is the mouse, that I will select now is the part of style tag, which is inside the <style> tag. There are other ways to do it, putting in separate file and everything.

We'll work on that later, but in the HTML course I I would recommend here on our channel will teach you the step-by-step for this. Its missing the third form, which is how to interact. I put there "hello, world!

", I got rid of the curse, and the JavaScript part is missing. The JavaScript part, usually we will put before closing the body, before </ body> Here is the opening of the body, here is the closing of the body. Here at the end, so that the scripts are loaded after the base code, we will create a script.

Just write in lowercase <script> (it already gave me here). Do not choose the one from the bottom, do not choose the one from the top. I clicked, he already created a script here.

You can also create external scripts, but let's do this later. The first thing we are doing is a basic example And do not worry about the size of the code, even because you did not type almost anything. We just put "html" and the Visual Studio Code itself made our life easier So, inside the script I'm going to program in JavaScript.

You do not say that you will "program in HTML" you do not say you're going to "program in CSS", but you can tell that you will "program JavaScript" because it is a programming language HTML is a markup language content, and CSS is a style language, they are style sheets So you do not say you program in any of them, Just in JavaScript In here, I can write whatever command I want. JavaScript Commands are always in lowercase letters most of the time, when it's not, I'll let you know because there's a difference in the case of JavaScript I'm going to writeThe following: let's get started showing an alert on the screen, if you have taken a HTML, any basic JavaScript course, you did this command here. In lowercase I'll type window.

alert () and in parentheses you will put Open quotation marks and close (you'll notice that when I open quotation marks it already closes here) everything that I'm going to write on the screen, I have to put quotation marks around, but you'll see that too. So I wrote here "my first message". In JavaScript you used to have a semicolon at the end of each command.

Nowadays it is not mandatory and I will not use it during this course, although a lot of people there at that very moment are very hurt with me "No! JavaScript has to have a semicolon! " It's of one's choice Do you like using semicolons?

use your semicolon Throughout this course, I will not use semicolon. apart from once in a while, I make a little slip and I put a semicolon because of PHP and the Java language, but it is not necessary, trust me, then I will not use it here. Let's play it now, let's save again I'm going to update, and I realize the following: I'm going to update in another way, I'll hold Shift and refresh.

You notice that the style part has already been taken style picked up, only content has not yet appeared. The "Hello world! " did not appear back here , so as the "I got rid of the curse" , but it already said "This page says," this page says "my first message.

So, this window. alert () is your first JavaScript command (this is a JavaScript command), I can even simplify it to just alert (), no problem The window I can omit, but I'll leave it here at the beginning the window. alert () And he will say there: 'my first message'.

Let's run it here, 'my first message', press Ok Then the content will appear. Even putting <script> here at the end, it appeared, it executed this command without these ones appearing on the screen. I will update again, you can see that the content does not appear 'My first message' appeared.

Only when I click Ok. See? This is the interactivity that we will create.

At this moment you may be thinking: "but this is very simple" Yes! It's meant to be simple JavaScript is very simple. Of course our commands will increase, we will have more functionalities, but as a rule, programming in JavaScript is very simple.

Do not let anyone tell you "JavaScript (Its usually like that) JavaScript it's difficult. The base is easy, but wait until you get to array, wait until you get to vectors " Look . Maybe you have not known me for that long, but believe me, people who say this, just want to take the frustrations they had out on you.

Perhaps, the ones they had while learning how to program. Or, this kind of people do not want a lot of competition. Trust me, programming is extremely easy So, as we reviewed at the beginning of the class, we have content in HTML, CSS style, JavaScript interaction.

Translating this panorama for the code that we just created. All that here is the HTML part do you see it here? When I zoom in (there is a +) All of that is the CSS part.

This part here: content. this part here: style. The part that made it "pretty" I'll even add another style here.

I'll put, I do not know, the h1 of one of a color I do not know ( oh my god, this is going to be too ugly here) I'm going to put yellow here just stop the mouse over it. I'll make it a little darker I do not know, a little more orange I'll leave it in this color (man, this color is horrible). Ok.

Whatever is h1 is with that yellowish color The "Hello world! " is my <h1> it will get "first message" exactly this color (I'm going to change a little bit here, with a slightly more vivid color) Opacity at maximum. Once again, updating So that's the style part.

I will shrink the style, just click on this minus sign in Visual Studio Code, this bottom of the script, when I zoom in, that's my part of JavaScript It's my part of interactivity. And now you can see the whole set on the same screen. So when it comes to developing a website, you have to combine: content, style and interactivity.

That's how good programmers do. In fact there are techniques to improve this code that is here on the side, (and this is even recommended), but we are in the first steps The first step is really like that, slowly, slowly. It's just like that class, when I talked about the bike movements.

You're not going to get the bike and pull some stunts right away. You go on the bike, go up a ramp, go down the ramp It will not start with something harder. It's exactly the same with programming.

You can not go too fast, otherwise the fall will be great and frustrations begin to appear. And before I finish this class, I'll show you two more commands So you do not think it's just a command and thats it. I'll show you two more commands, look.

Under the window. alert () I'm going to use the window and two more things. First thing I'm going to put window.

confirm () and here I'll put "Have you been enjoying JavaScript? " Let's run it. It will at first make the alert, then ask for confirmation I'll save (Ctrl + S) Update here (F5) There is "my first message" This command is the alert (), since you put it first it runs first When I click Ok, it will return here "Have you been enjoying JavaScript?

? " Then there is a confirmation option: Ok or Cancel. I'm enjoying it, okay.

See? So we have two commands that can be used. I'll show you a third one, which is.

. . (do not forget to type because you only learn when you practice) we will type window.

prompt () Then it will ask: "What is your name? ". So I just saw the third command So, alert () it throws an alert, where it only has the option of Ok, do you want to see?

Let's save, never forget, if you have a "1" here it's a sign that you're not ready yet The "1" or "2", whatever. I updated. The first command executed is my windows.

alert () My first message, Okay. Windows. confirm () is asking "Have you been enjoying JS?

", Ok or Cancel. This time I'm canceling. Do you see this third one,wich is the prompt()?

"What is your name? " I'll put "Gustavo" and I'll hit Ok. Then you'll say, "Gosh, but my name did not appear on the screen" Of course!

Did not appear because you have not sent it yet. We, in the next classes, will learn how to do that. In fact, you can't even test it at the moment, the way the code is now , what was the button that the person pressed, wether she pressed Ok or Cancel.

At the prompt (), I do not know the name entered by the person. That's because we have to use here in front of these functionalities some variables. And variable is the subject of the next class because this one is already getting too big.

Do not forget to practice a lot practicing is very important in such cases. It's of no use just to watch the video and think that you have already learned. In fact, if you watched the video until the end and understandood everything, it does not mean you already know it.

It means you just proved that I know JavaScript. Prove to me and prove to yourself that you also know JavaScript. It's very simple.

Do not forget, as always. to subscribe on our channel, the Curso em Video has a lot of courses. Up here you have some courses selected, but you just go to our channel that is youtube.

com/cursoemvídeo go there in the playlists, see all the courses we have been creating for many years over here. Also enable the bell when you sign up, so you can receive notifications and do not forget: interact with us down here in the comments, leave your doubts, like the video and share it with everyone. Do you know that college group, or school group that everyone is studying together?

Recommend our course to them. You have a Facebook group of information sharing, have a lot of group of developers there inside Facebook Put the link there, recommend the Curso em Video there too. Almost every day I get notifications from people who are indicating the Curso em Video to a larger number of people.

I take my leave now, do not forget to practice before moving on to the next class, where we'll see a little more about variables. A big hug and see you next time!