+ INFORMATION

Share on social networks!

Create your first hello world with JavaScript

Today we bring you something different, we are going to do a small “tutorial” to start programming JavaScript and generate our first “Hello world”. We have opted for Visual Studio Code, to download it, we have to go to https://code.visualstudio.com/download and there we will select our operating system and file system.

Image

Visual Studio Code allows us to use extensions to make your work easier when it comes to “chopping” code and previewing pages. In our case we are going to install 2 extensions, to do this we go to the extensions section, we write the name of the extension and in the part that appears on the right we click to install it. The first of them will be Prettytier. This extension will format our code so that it looks cleaner and is easier to understand. It works for both JavaScript and Html either css.

Image

The second extension will be Live Server. With it we can visualize the changes we make to a web page in real time. Live Server executes the file that we are modifying in an explorer, updating it with each change in the file (Remember to check auto-save). It is installed in the same way as the previous one.

Image

We could install a multitude of more extensions, but with these two we can begin to program our Hello World.

The next thing we are going to do is create a folder to save our project. In my case, I created the test folder on the desktop and dragged it to the Explorer. Once we have the folder created we just have to click create file and name it index.html for example.

Image

Now inside our index We write html and from the options, we choose html5 to generate the basic block of a web page.

Image

Finally, what we are going to do is within the <body> create the label <script> que nos permitirá ejecutar el código JavaScript que escribamos dentro. Te muestro el ejemplo finalizado, hemos cambiado el título de la página, le hemos dado un encabezado y por último generamos nuestro código JavaScript. A la derecha de la imagen podemos ver la vista generada en el navegador, para ello debéis dar botón derecho en el código y clickear en Open with Live Server

Image

If you like the world of programming and want to stand out from the rest of the developers, we recommend our Master in Fullstack Web Development, where you can learn from scratch and with the possibility of internships in companies. Learn with the best. We will wait for you!!

Subscribe to our newsletter to stay up to date with all the news

EIP International Business School informs you that the data in this form will be processed by Mainjobs Internacional Educativa y Tecnológica, SA as the person responsible for this website. The purpose of collecting and processing personal data is to respond to the query made as well as to send information about the services of the data controller. Legitimation is the consent of the interested party.
You can exercise your rights of access, rectification, limitation and deletion of data in compliance@grupomainjobs.com as well as the right to file a claim with the supervisory authority. You can consult additional and detailed information on Data Protection in the Privacy Policy that you will find in our Web page
Web Development Fullstack Web Min

Leave a comment