{"id":25263,"date":"2024-01-03T12:29:20","date_gmt":"2024-01-03T11:29:20","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/aprende-javascript-desde-cero-ejemplos-practicos-para-iniciarte\/"},"modified":"2024-06-03T18:44:31","modified_gmt":"2024-06-03T17:44:31","slug":"aprende-javascript-desde-cero-ejemplos-practicos-para-iniciarte","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/learn-javascript-from-scratch-practical-examples-to-get-you-started\/","title":{"rendered":"Learn JavaScript from Scratch: Practical Examples to Get You Started"},"content":{"rendered":"<p>JavaScript is the essential programming language for creating interactive websites and dynamic web applications. If you&#039;re just starting your journey into the world of web development, mastering JavaScript will be an invaluable skill. To help you on this path, I have prepared a selection of basic JavaScript code examples that will guide you through the fundamentals of the language.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #ffffff;color:#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #ffffff;color:#ffffff\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nelkodev.com\/en\/blog\/learn-javascript-from-scratch-practical-examples-to-get-you-started\/#Variables_en_JavaScript\" >Variables in JavaScript<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nelkodev.com\/en\/blog\/learn-javascript-from-scratch-practical-examples-to-get-you-started\/#Tipos_de_Datos\" >Type of data<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nelkodev.com\/en\/blog\/learn-javascript-from-scratch-practical-examples-to-get-you-started\/#Estructuras_de_Control\" >Control Structures<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nelkodev.com\/en\/blog\/learn-javascript-from-scratch-practical-examples-to-get-you-started\/#Condicionales\" >Conditionals<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nelkodev.com\/en\/blog\/learn-javascript-from-scratch-practical-examples-to-get-you-started\/#Bucles\" >Loops<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nelkodev.com\/en\/blog\/learn-javascript-from-scratch-practical-examples-to-get-you-started\/#Funciones\" >Features<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nelkodev.com\/en\/blog\/learn-javascript-from-scratch-practical-examples-to-get-you-started\/#Eventos\" >Events<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nelkodev.com\/en\/blog\/learn-javascript-from-scratch-practical-examples-to-get-you-started\/#DOM_%E2%80%93_Modelo_de_Objetos_del_Documento\" >DOM \u2013 Document Object Model<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nelkodev.com\/en\/blog\/learn-javascript-from-scratch-practical-examples-to-get-you-started\/#JSON_%E2%80%93_JavaScript_Object_Notation\" >JSON \u2013 JavaScript Object Notation<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nelkodev.com\/en\/blog\/learn-javascript-from-scratch-practical-examples-to-get-you-started\/#AJAX_%E2%80%93_Asynchronous_JavaScript_and_XML\" >AJAX \u2013 Asynchronous JavaScript and XML<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/nelkodev.com\/en\/blog\/learn-javascript-from-scratch-practical-examples-to-get-you-started\/#Herramientas_de_Depuracion\" >Debugging Tools<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Variables_en_JavaScript\"><\/span>Variables in JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Variables are containers for storing data. In JavaScript, you can declare variables with <code>var<\/code>, <code>let<\/code>, either <code>const<\/code>.<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">let message = &#039;Hello, world!&#039;; console.log(message); \/\/ Output: Hello, world!<\/code><\/pre>\n<p>In this code, <code>message<\/code> is a variable that contains the text string <code>&#039;Hello, world!&#039;<\/code>. Then we use <code>console.log<\/code> to print the contents of the variable to the console.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Tipos_de_Datos\"><\/span>Type of data<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>JavaScript is a weakly typed language, which means that you do not need to declare the data type of a variable. Basic data types include:<\/p>\n<ul>\n<li><strong>String<\/strong>: Text string.<\/li>\n<li><strong>number<\/strong>: Integer or floating point numbers.<\/li>\n<li><strong>Boolean<\/strong>: Values true (<code>true<\/code>) or false (<code>false<\/code>).<\/li>\n<li><strong>object<\/strong>: Data collections.<\/li>\n<li><strong>array<\/strong>: Ordered lists of data.<\/li>\n<li><strong>undefined<\/strong>: A variable that has not been assigned a value.<\/li>\n<li><strong>null<\/strong>: A null or &quot;empty&quot; value.<\/li>\n<\/ul>\n<pre><code class=\"&quot;language-javascript&quot;\">let name = &#039;Nelko&#039;; \/\/ String let age = 25; \/\/ Number let isDeveloper = true; \/\/ Boolean let object = { name: &#039;Nelko&#039;, age: 25 }; \/\/ Object let list = [&#039;HTML&#039;, &#039;CSS&#039;, &#039;JavaScript&#039;]; \/\/ Array let notDefined; \/\/ undefined let nullValue = null; \/\/null<\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Estructuras_de_Control\"><\/span>Control Structures<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Condicionales\"><\/span>Conditionals<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Conditionals allow you to execute code depending on whether a condition is true or false.<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">let age = 18; if (age &gt;= 18) { console.log(&#039;You are of legal age.&#039;); } else { console.log(&#039;You are not of legal age.&#039;); }<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Bucles\"><\/span>Loops<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Loops are useful when you want to execute a block of code multiple times.<\/p>\n<ul>\n<li><strong>for<\/strong>: Executes a block of code a specified number of times.<\/li>\n<\/ul>\n<pre><code class=\"&quot;language-javascript&quot;\">for (let i = 0; i &lt; 5; i++) { console.log(&#039;The value of i is: &#039; + i); }<\/code><\/pre>\n<ul>\n<li><strong>while<\/strong>: Executes a block of code while a specified condition is true.<\/li>\n<\/ul>\n<pre><code class=\"&quot;language-javascript&quot;\">let i = 0; while (i &lt; 5) { console.log(&#039;The value of i is: &#039; + i); i++; }<\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Funciones\"><\/span>Features<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Functions are blocks of code that perform a specific task and you can reuse them in your code.<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">function greet(name) { return &#039;Hello, &#039; + name + &#039;!&#039;; } console.log(greet(&#039;Nelko&#039;)); \/\/ Output: Hello, Nelko!<\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Eventos\"><\/span>Events<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Events in JavaScript are actions that can be detected by your script. For example, when a user clicks a button.<\/p>\n<pre><code class=\"&quot;language-html&quot;\"><button id=\"botonSaludo\">Greet<\/button><\/code><\/pre>\n<pre><code class=\"&quot;language-javascript&quot;\">document.getElementById(&#039;greetingbutton&#039;).addEventListener(&#039;click&#039;, function() { alert(&#039;Hello, nelkodev.com visitor!&#039;); });<\/code><\/pre>\n<p>This binds a click event to the button with <code>id<\/code> &quot;greeting button&quot; and when clicked, displays an alert message.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"DOM_%E2%80%93_Modelo_de_Objetos_del_Documento\"><\/span>DOM \u2013 Document Object Model<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The DOM is a representation of the HTML of your web page. With JavaScript, you can manipulate the DOM to change the content, structure, and style of your site.<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">document.getElementById(&#039;title&#039;).innerHTML = &#039;Welcome to nelkodev.com!&#039;;<\/code><\/pre>\n<p>This code will search for an element with the <code>id<\/code> &quot;title&quot; and it will change its internal HTML content.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"JSON_%E2%80%93_JavaScript_Object_Notation\"><\/span>JSON \u2013 JavaScript Object Notation<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>JSON is a text format for data exchange. It is easy for humans to understand and easy for machines to analyze.<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">let Jsondata = &#039;{&quot;name&quot;:&quot;Nelko&quot;,&quot;website&quot;:&quot;nelkodev.com&quot;}&#039;; let object = JSON.parse(Jsondata); console.log(object.name); \/\/ Output: Nelko console.log(object.website); \/\/ Output: nelkodev.com<\/code><\/pre>\n<p>First, we define a text string in JSON format. Then, we use <code>JSON.parse<\/code> to convert that string into a JavaScript object.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"AJAX_%E2%80%93_Asynchronous_JavaScript_and_XML\"><\/span>AJAX \u2013 Asynchronous JavaScript and XML<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>AJAX is a technique that allows parts of a web page to be updated without having to completely reload it, by sending an asynchronous request to the server.<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">let xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState == 4 &amp;&amp; xhr.status == 200) { console.log(xhr.responseText); } }; xhr.open(&quot;GET&quot;, &quot;https:\/\/api.nelkodev.com\/data&quot;, true); xhr.send();<\/code><\/pre>\n<p>This example shows how you can make a GET request to a server to get data without reloading the page.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Herramientas_de_Depuracion\"><\/span>Debugging Tools<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Learning to debug your code is as important as writing it. Most browsers have built-in developer tools to help you with this.<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">let badNumber = &#039;5&#039; + 9; \/\/ There is an error here, it should be a sum of numbers console.log(incorrectNumber); \/\/ Output: &quot;59&quot; console.assert(typeof badnumber === &#039;number&#039;, &#039;The variable badnumber is not a number&#039;);<\/code><\/pre>\n<p>The method <code>console.assert<\/code> will display an error message in the console if the condition you pass to it is false.<\/p>\n<p>With these examples, you have taken your first steps in JavaScript. To delve deeper into these topics and many others, I invite you to visit <a href=\"https:\/\/nelkodev.com\/en\/\">nelkodev.com<\/a>. And if you have questions or need additional guidance, don&#039;t hesitate to get in touch at <a href=\"https:\/\/nelkodev.com\/en\/contact\/\">nelkodev.com\/contact<\/a>. The path to JavaScript mastery is exciting and I am here to support you in your learning!<\/p>","protected":false},"excerpt":{"rendered":"<p>JavaScript es el lenguaje de programaci\u00f3n esencial para crear sitios web interactivos y aplicaciones web din\u00e1micas. Si reci\u00e9n est\u00e1s comenzando tu viaje en el mundo del desarrollo web, dominar JavaScript ser\u00e1 una habilidad invaluable. Para ayudarte en este camino, he preparado una selecci\u00f3n de ejemplos b\u00e1sicos de c\u00f3digo JavaScript que te guiar\u00e1n a trav\u00e9s de [&hellip;]<\/p>","protected":false},"author":1,"featured_media":25264,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420,2207],"tags":[486,205,176,177,977,795,185,2208,60,1303],"class_list":["post-25263","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-nodejs","tag-aprende","tag-blog","tag-cero","tag-desde","tag-ejemplos","tag-iniciarte","tag-javascript","tag-nodejs","tag-para","tag-practicos"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/25263","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/comments?post=25263"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/25263\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/25264"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=25263"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=25263"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=25263"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}