{"id":66776,"date":"2022-08-24T09:02:28","date_gmt":"2022-08-24T07:02:28","guid":{"rendered":"https:\/\/eiposgrados.com\/?p=66776"},"modified":"2022-08-30T09:16:27","modified_gmt":"2022-08-30T07:16:27","slug":"create-your-first-hello-world-with-javascript","status":"publish","type":"post","link":"https:\/\/eiposgrados.com\/eng\/blog-web-development\/create-your-first-hello-world-with-javascript\/","title":{"rendered":"Create your first hello world with JavaScript"},"content":{"rendered":"

Today we bring you something different, we are going to do a small \u201ctutorial\u201d to start programming JavaScript and generate our first \u201cHello world\u201d. We have opted for Visual Studio Code, to download it, we have to go to https:\/\/code.visualstudio.com\/download<\/a> and there we will select our operating system and file system.<\/p>\n\n\n\n

\"Image\"<\/figure>\n\n\n\n

Visual Studio Code allows us to use extensions to make your work easier when it comes to \u201cchopping\u201d 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. <\/em>This extension will format our code so that it looks cleaner and is easier to understand. It works for both JavaScript and Html <\/strong>either css<\/strong>.<\/p>\n\n\n\n

\"Image\"<\/figure>\n\n\n\n

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.<\/p>\n\n\n\n

\"Image\"<\/figure>\n\n\n\n

We could install a multitude of more extensions, but with these two we can begin to program our Hello World.<\/strong><\/p>\n\n\n\n

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. <\/strong>Once we have the folder created we just have to click create file and name it index.html for example.<\/p>\n\n\n\n

\"Image\"<\/figure>\n\n\n\n

Now inside our index <\/em>We write html and from the options, we choose html5 to generate the basic block of a web page.<\/p>\n\n\n\n

\"Image\"<\/figure>\n\n\n\n

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<\/strong><\/p>\n\n\n\n

\"Image\"<\/figure>\n\n\n\n

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<\/strong><\/a>, <\/strong>where you can learn from scratch and with the possibility of internships in companies. Learn with the best. We will wait for you!!<\/p>","protected":false},"excerpt":{"rendered":"

Today we bring you something different, we are going to do a small \u201ctutorial\u201d to start programming JavaScript and generate our first \u201cHello world\u201d. We have\u2026 Read more<\/a><\/p>","protected":false},"author":90,"featured_media":66810,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[419,1149],"tags":[],"class_list":["post-66776","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-desarrollo-web","category-blog-desarrollo-web-fullstack"],"acf":[],"_links":{"self":[{"href":"https:\/\/eiposgrados.com\/eng\/wp-json\/wp\/v2\/posts\/66776","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eiposgrados.com\/eng\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eiposgrados.com\/eng\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eiposgrados.com\/eng\/wp-json\/wp\/v2\/users\/90"}],"replies":[{"embeddable":true,"href":"https:\/\/eiposgrados.com\/eng\/wp-json\/wp\/v2\/comments?post=66776"}],"version-history":[{"count":0,"href":"https:\/\/eiposgrados.com\/eng\/wp-json\/wp\/v2\/posts\/66776\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/eiposgrados.com\/eng\/wp-json\/wp\/v2\/media\/66810"}],"wp:attachment":[{"href":"https:\/\/eiposgrados.com\/eng\/wp-json\/wp\/v2\/media?parent=66776"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eiposgrados.com\/eng\/wp-json\/wp\/v2\/categories?post=66776"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eiposgrados.com\/eng\/wp-json\/wp\/v2\/tags?post=66776"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}