{"id":2008,"date":"2023-11-25T09:49:59","date_gmt":"2023-11-25T12:49:59","guid":{"rendered":"https:\/\/stackcodelab.com\/blog\/?p=2008"},"modified":"2023-11-25T09:50:00","modified_gmt":"2023-11-25T12:50:00","slug":"capitulo-5-interactividad-con-javascript","status":"publish","type":"post","link":"https:\/\/stackcodelab.com\/blog\/capitulo-5-interactividad-con-javascript\/","title":{"rendered":"Cap\u00edtulo 5: Interactividad con JavaScript"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><strong>Secci\u00f3n 5.1: Introducci\u00f3n a JavaScript<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">JavaScript es un lenguaje de programaci\u00f3n esencial en el desarrollo web. Permite agregar interactividad a las p\u00e1ginas HTML y controlar el comportamiento de los elementos HTML. Aqu\u00ed est\u00e1n los conceptos fundamentales:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>JavaScript es un lenguaje de alto nivel: <\/strong>Esto significa que es f\u00e1cil de leer y escribir, lo que lo hace accesible para los desarrolladores de todos los niveles de experiencia.<\/li>\n\n\n\n<li><strong>Integraci\u00f3n con HTML:<\/strong>&nbsp;Puedes incluir JavaScript directamente en tu documento HTML usando etiquetas <code>&lt;script&gt;<\/code>.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Por ejemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\r\n    \/\/ Tu c\u00f3digo JavaScript aqu\u00ed\r\n&lt;\/script>\r<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Manipulaci\u00f3n del DOM:<\/strong> Puedes usar JavaScript para acceder y modificar los elementos del Document Object Model (DOM), lo que te permite cambiar el contenido y la apariencia de una p\u00e1gina web en tiempo real.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Secci\u00f3n 5.2: Variables y Tipos de Datos<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">En JavaScript, puedes declarar variables para almacenar datos. Los tipos de datos comunes en JavaScript incluyen n\u00fameros, cadenas de texto y booleanos. Aqu\u00ed hay ejemplos:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var numero = 42; \/\/ Variable num\u00e9rica\r\nvar nombre = \"Juan\"; \/\/ Variable de texto (cadena)\r\nvar activo = true; \/\/ Variable booleana\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Secci\u00f3n 5.3: Funciones en JavaScript<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Las funciones son bloques de c\u00f3digo reutilizables que realizan tareas espec\u00edficas. Aqu\u00ed hay un ejemplo simple de una funci\u00f3n en JavaScript:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function saludar(nombre) {\r\n    alert(\"Hola, \" + nombre);\r\n}\nsaludar(\"Juan\"); \/\/ Llama a la funci\u00f3n y muestra una alerta\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Secci\u00f3n 5.4: Eventos y Manipulaci\u00f3n del DOM<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">JavaScript se utiliza com\u00fanmente para responder a eventos, como clics de rat\u00f3n o env\u00edos de formularios. Puedes seleccionar elementos HTML y agregar funciones que se ejecutar\u00e1n cuando ocurran estos eventos.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ejemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Selecciona un bot\u00f3n con id \"boton-click\" y agrega un manejador de clic\r\ndocument.getElementById(\"boton-click\").addEventListener(\"click\", function() {\r\n    alert(\"Has hecho clic en el bot\u00f3n\");\r\n});\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Secci\u00f3n 5.5: Ejemplos y Ejercicios Resueltos<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejemplo de Uso de Variables:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var precio = 29.99;\r\nvar descuento = 5.00;\r\nvar precioFinal = precio - descuento;\r\nconsole.log(\"Precio final: $\" + precioFinal);\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejercicio 1: Saludo Personalizado<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Crea una funci\u00f3n en JavaScript que solicite al usuario su nombre y luego muestre un mensaje de saludo personalizado.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function saludar() {\r\n    var nombre = prompt(\"Por favor, introduce tu nombre\");\r\n    alert(\"Hola, \" + nombre + \"!\");\r\n}\r\n\r\nsaludar();\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejercicio 2: Calculadora Simple<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Crea una p\u00e1gina web con dos campos de entrada de n\u00fameros y botones para sumar, restar, multiplicar y dividir. Utiliza JavaScript para realizar las operaciones y mostrar el resultado en la p\u00e1gina.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;input type=\"number\" id=\"num1\">\r\n&lt;input type=\"number\" id=\"num2\">\r\n&lt;button onclick=\"sumar()\">Sumar&lt;\/button>\r\n&lt;button onclick=\"restar()\">Restar&lt;\/button>\r\n&lt;button onclick=\"multiplicar()\">Multiplicar&lt;\/button>\r\n&lt;button onclick=\"dividir()\">Dividir&lt;\/button>\r\n&lt;p id=\"resultado\">&lt;\/p>\r\n\r\n&lt;script>\r\n    function sumar() {\r\n        var num1 = parseFloat(document.getElementById(\"num1\").value);\r\n        var num2 = parseFloat(document.getElementById(\"num2\").value);\r\n        var resultado = num1 + num2;\r\n        document.getElementById(\"resultado\").innerText = \"Resultado: \" + resultado;\r\n    }\r\n\r\n    function restar() {\r\n        \/\/ Haz lo mismo para restar, multiplicar y dividir\r\n    }\r\n&lt;\/script><\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Estos ejemplos y ejercicios te ayudar\u00e1n a comprender los conceptos b\u00e1sicos de JavaScript y c\u00f3mo interact\u00faa con el HTML para crear p\u00e1ginas web interactivas. Con la pr\u00e1ctica, podr\u00e1s desarrollar aplicaciones web m\u00e1s sofisticadas y din\u00e1micas.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Secci\u00f3n 5.6: Validaci\u00f3n de Formularios con JavaScript<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">La validaci\u00f3n de formularios es esencial para garantizar que los datos ingresados por los usuarios sean correctos y coherentes. JavaScript es una herramienta poderosa para realizar esta validaci\u00f3n. Aqu\u00ed est\u00e1n algunos conceptos clave:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Eventos de Formulario:<\/strong> Puedes utilizar eventos como \u00absubmit\u00bb para interceptar el env\u00edo del formulario y validar los datos antes de enviarlos al servidor.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>document.getElementById(\"miFormulario\").addEventListener(\"submit\", function(event) {\r\n    \/\/ Realiza la validaci\u00f3n aqu\u00ed\r\n    if (!validarFormulario()) {\r\n        event.preventDefault(); \/\/ Evita que el formulario se env\u00ede\r\n    }\r\n});\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Validaci\u00f3n de Datos:<\/strong> Puedes verificar que los campos cumplan con ciertas condiciones, como longitud adecuada, formato de correo electr\u00f3nico o n\u00fameros v\u00e1lidos.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function validarFormulario() {\r\n    var nombre = document.getElementById(\"nombre\").value;\r\n    if (nombre.length &lt; 3) {\r\n        alert(\"El nombre es demasiado corto\");\r\n        return false;\r\n    }\r\n    \/\/ Agrega m\u00e1s validaciones aqu\u00ed\r\n    return true; \/\/ Si todas las validaciones son exitosas\r\n}\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Secci\u00f3n 5.7: Mejora de la Experiencia del Usuario en una Tienda en L\u00ednea<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">La experiencia del usuario es un aspecto cr\u00edtico en una tienda en l\u00ednea. JavaScript se utiliza para crear caracter\u00edsticas que mejoran la experiencia del usuario. Algunos ejemplos son:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Carrito de Compras en Tiempo Real:<\/strong> Permite a los usuarios agregar productos al carrito y ver su contenido sin necesidad de recargar la p\u00e1gina.<\/li>\n\n\n\n<li><strong>Filtros y B\u00fasquedas Avanzadas:<\/strong> Los usuarios pueden refinar su b\u00fasqueda de productos utilizando filtros interactivos sin salir de la p\u00e1gina de resultados.<\/li>\n\n\n\n<li><strong>Valoraci\u00f3n y Comentarios de Productos:<\/strong> Los usuarios pueden calificar productos y dejar comentarios directamente en la p\u00e1gina de productos.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong><br><\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Secci\u00f3n 5.8: Ejemplos y Ejercicios Resueltos<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejemplo de Validaci\u00f3n de Formulario:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function validarFormulario() {\r\n    var email = document.getElementById(\"email\").value;\r\n    var contrase\u00f1a = document.getElementById(\"contrase\u00f1a\").value;\r\n\r\n    if (email === \"\" || contrase\u00f1a === \"\") {\r\n        alert(\"Por favor, completa todos los campos.\");\r\n        return false;\r\n    }\r\n\r\n    if (!validarCorreoElectr\u00f3nico(email)) {\r\n        alert(\"El correo electr\u00f3nico no es v\u00e1lido.\");\r\n        return false;\r\n    }\r\n\r\n    return true;\r\n}\r\n\r\nfunction validarCorreoElectr\u00f3nico(correo) {\r\n    var expresi\u00f3n = \/\\S+@\\S+\\.\\S+\/;\r\n    return expresi\u00f3n.test(correo);\r\n}\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejercicio 1: Mejora de la Experiencia de Compra<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Mejora la experiencia del usuario en una tienda en l\u00ednea al permitir que los usuarios a\u00f1adan productos al carrito y vean el resumen del carrito sin salir de la p\u00e1gina de productos. Utiliza JavaScript para lograr esto.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!-- Bot\u00f3n para agregar al carrito -->\r\n&lt;button onclick=\"agregarAlCarrito('Producto 1', 19.99)\">Agregar al Carrito&lt;\/button>\r\n&lt;button onclick=\"agregarAlCarrito('Producto 2', 29.99)\">Agregar al Carrito&lt;\/button>\r\n\r\n&lt;!-- Div para mostrar el resumen del carrito -->\r\n&lt;div id=\"resumen-carrito\">\r\n    &lt;h2>Carrito de Compras&lt;\/h2>\r\n    &lt;ul id=\"lista-carrito\">&lt;\/ul>\r\n    &lt;p id=\"total-carrito\">Total: $0.00&lt;\/p>\r\n&lt;\/div>\r\n\r\n&lt;script>\r\n    var carrito = &#91;];\r\n\r\n    function agregarAlCarrito(producto, precio) {\r\n        carrito.push({ producto, precio });\r\n        mostrarResumenCarrito();\r\n    }\r\n\r\n    function mostrarResumenCarrito() {\r\n        var listaCarrito = document.getElementById(\"lista-carrito\");\r\n        var totalCarrito = document.getElementById(\"total-carrito\");\r\n        listaCarrito.innerHTML = \"\";\r\n        var total = 0;\r\n\r\n        carrito.forEach(function(item) {\r\n            var listItem = document.createElement(\"li\");\r\n            listItem.textContent = item.producto + \" - $\" + item.precio.toFixed(2);\r\n            listaCarrito.appendChild(listItem);\r\n            total += item.precio;\r\n        });\r\n\r\n        totalCarrito.textContent = \"Total: $\" + total.toFixed(2);\r\n    }\r\n&lt;\/script>\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Este ejemplo mejora la experiencia de compra permitiendo a los usuarios agregar productos al carrito y ver el resumen del carrito en tiempo real. Los ejercicios y ejemplos presentados ayudar\u00e1n a los lectores a comprender c\u00f3mo utilizar JavaScript para validar formularios y mejorar la experiencia del usuario en una tienda en l\u00ednea.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Secci\u00f3n 5.1: Introducci\u00f3n a JavaScript JavaScript es un lenguaje de programaci\u00f3n esencial en el desarrollo web. Permite agregar interactividad a las p\u00e1ginas HTML y controlar el comportamiento de los elementos HTML. Aqu\u00ed est\u00e1n los conceptos fundamentales: Por ejemplo: Secci\u00f3n 5.2: Variables y Tipos de Datos En JavaScript, puedes declarar variables para almacenar datos. Los tipos [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2009,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[39],"tags":[],"class_list":["post-2008","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5-y-otras-hierbas"],"uagb_featured_image_src":{"full":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Interactividad-con-JavaScript.jpg",1000,667,false],"thumbnail":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Interactividad-con-JavaScript-150x150.jpg",150,150,true],"medium":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Interactividad-con-JavaScript-300x200.jpg",300,200,true],"medium_large":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Interactividad-con-JavaScript-768x512.jpg",768,512,true],"large":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Interactividad-con-JavaScript.jpg",1000,667,false],"1536x1536":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Interactividad-con-JavaScript.jpg",1000,667,false],"2048x2048":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Interactividad-con-JavaScript.jpg",1000,667,false]},"uagb_author_info":{"display_name":"arquitecto","author_link":"https:\/\/stackcodelab.com\/blog\/author\/arquitecto\/"},"uagb_comment_info":0,"uagb_excerpt":"Secci\u00f3n 5.1: Introducci\u00f3n a JavaScript JavaScript es un lenguaje de programaci\u00f3n esencial en el desarrollo web. Permite agregar interactividad a las p\u00e1ginas HTML y controlar el comportamiento de los elementos HTML. Aqu\u00ed est\u00e1n los conceptos fundamentales: Por ejemplo: Secci\u00f3n 5.2: Variables y Tipos de Datos En JavaScript, puedes declarar variables para almacenar datos. Los tipos&hellip;","_links":{"self":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts\/2008","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/comments?post=2008"}],"version-history":[{"count":1,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts\/2008\/revisions"}],"predecessor-version":[{"id":2010,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts\/2008\/revisions\/2010"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/media\/2009"}],"wp:attachment":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/media?parent=2008"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/categories?post=2008"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/tags?post=2008"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}