Resumen semana 6 -11 JAP.pdf

SEMANA 6- API Y MÉTODOS Los métodos HTTP son acciones que indican al servidor qué tipo de operación se quiere realizar sobre un recurso específico. Los más comunes son GET, POST, PUT y DELETE, y se utilizan principalmente en aplicaciones web que siguen el paradigma REST para la comunicación entre cl...

SEMANA 6- API Y MÉTODOS Los métodos HTTP son acciones que indican al servidor qué tipo de operación se quiere realizar sobre un recurso específico. Los más comunes son GET, POST, PUT y DELETE, y se utilizan principalmente en aplicaciones web que siguen el paradigma REST para la comunicación entre cliente y servidor..forEach: es un método disponible en los arrays en JavaScript. Se utiliza para ejecutar una función proporcionada una vez por cada elemento del array. No devuelve un nuevo array, sino que simplemente ejecuta la función en cada elemento del array. document.createElement('p'): Este método del objeto document crea un nuevo elemento HTML del tipo especificado método createElement(...) del objeto document sirve para crear un elemento (etiqueta) según el nombre especificado que puede ser añadido a la página mediante otro método llamado appendChild(...). getElementById es un método, mientras que innerHTML es una propiedad En el Proyecto Final contamos con un Manual del API, el cual sirve para Tener de referencia al momento de ir implementando los requerimientos que se piden en cada entrega.Un API (Interfaz de Programación de Aplicaciones, por sus siglas en inglés) es un conjunto de definiciones y protocolos que permiten que diferentes aplicaciones se comuniquen entre sí. En otras palabras, un API permite que un software interactúe con otro, compartiendo datos y funcionalidades de forma estructurada y controlada. Los software de control de versiones son Git y GitHub, ya que permiten manejar diferentes versiones del código, utilizar ramas, compartir el repositorio en la nube y otras posibilidades que permiten trabajar de manera eficiente en un equipo de programación. SEMANA 7 - UX/UI PRINCIPIOS y EVENTOS JS UX (Experiencia de Usuario): Se trata de cómo una persona se siente al usar una aplicación o un sitio web. El diseño UX se enfoca en entender las necesidades y expectativas de los usuarios. La idea es hacer que el uso sea lo más intuitivo y agradable posible. Preguntas que guía el diseño UX incluyen: ¿Es fácil para el usuario encontrar lo que busca? ¿El proceso es lógico y sin fricciones? Si un sitio web es fácil de navegar y entender, tiene un buen diseño UX. UI (Interfaz de Usuario): Se refiere a cómo se ve y cómo interactúas con una aplicación o sitio web. El diseño UI se enfoca en los elementos visuales como botones, colores, tipografías y disposición de los elementos en pantalla. El objetivo es que la aplicación sea atractiva y fácil de usar. Preguntas típicas para el diseño UI incluyen: ¿Los botones son fáciles de encontrar? ¿El texto es legible? ¿Los colores están bien combinados? EVENTOS EN JS addEventListener es un método en JavaScript que se utiliza para registrar un evento a un objeto específico (como un elemento HTML, el documento, o la ventana). Este método permite que una función, llamada "event listener" (o "manejador de eventos"), sea ejecutada cada vez que ocurre un evento particular en dicho objeto. ¿Para qué sirve? addEventListener se usa para hacer que el código reaccione a eventos del usuario o del sistema, como: Clics de mouse (click) Movimientos del mouse (mousemove) Presionar teclas (keydown) Cambio de un campo de texto (input) Carga de la página (load) Sintaxis: elemento.addEventListener(evento, manejador, opciones); evento (Obligatorio): El tipo de evento que se quiere escuchar. Es una cadena que describe el evento que se debe monitorear, como "click", "keydown", "mouseover", etc. manejador (handler) (Obligatorio): La función que se ejecutará cuando ocurra el evento. Puede ser una función definida previamente o una función anónima. opciones (Opcional): Un objeto o un valor booleano que especifica características adicionales sobre cómo se debe comportar el evento. Preguntas foro: ¿Qué es un evento? Un evento es cualquier interacción o acción que ocurre en la página web, como un clic, una pulsación de tecla, o la carga de una página. Los eventos permiten que los desarrolladores respondan a las acciones de los usuarios o a cambios en el entorno. ¿Cuál es la sintaxis para manejar los eventos? Da un ejemplo. La sintaxis básica para manejar eventos en JavaScript es usando el método addEventListener. Este método se asocia a un elemento y escucha un tipo de evento específico. Ejemplo: document.getElementById("miDiv").addEventListener("click", function() { alert("Hola! Soy el div"); }); En este caso, el evento "click" en el div dispara una alerta. ¿Consideras que es buena práctica utilizar el atributo onclick en el HTML, en lugar de usar addEventListener en el JS? Justifica. No es considerada una buena práctica utilizar el atributo onclick en el HTML porque separa el comportamiento (JavaScript) de la presentación (HTML). Usar addEventListener en JavaScript permite una mejor organización del código, facilita la reutilización y el mantenimiento, y evita posibles conflictos al manejar múltiples eventos en un mismo elemento. Además del evento "click" utilizado en el taller, nombra otros 3:  mouseover: Se dispara cuando el puntero del mouse pasa sobre un elemento. Es útil para mostrar información adicional, como tooltips o efectos de resaltado. keydown: Se activa cuando se presiona una tecla. Lo utilizaría para detectar atajos de teclado o para realizar validaciones en tiempo real mientras el usuario escribe. submit: Se desencadena cuando se envía un formulario. Es fundamental para validar los datos antes de enviar el formulario al servidor. Al dar click en el botón, sucedía que se disparaba el evento click del div también. ¿Cómo podríamos solucionar ese problema? Crea una nueva rama en el repositorio llamada "solucion-click" e implementa la solución allí. Para evitar que el evento "click" del div se dispare cuando se hace clic en el botón, podemos usar el método stopPropagation() en el manejador del evento del botón. Este método detiene la propagación del evento al resto de los elementos padres. Notas del cuestionario: Cuando subo un cambio desde mi repositorio local a GitHub, usualmente decimos que hacemos un "push". Un evento es algo que sucede en el navegador, como por ejemplo mover el mouse, dar click a un botón, la carga de la página, etc. La función fetch sólo sirve para traer archivos en formato JSON. Figma sirve para la creación de prototipos interactivos. SEMANA 8 - JSON ¿Qué es JSON? JSON (JavaScript Object Notation) es un formato de texto para intercambiar datos. Es fácil de leer y escribir para los humanos, y fácil de analizar y generar para las máquinas. Un archivo JSON contiene datos organizados en forma de "objetos" y "arrays" (listas). ¿Qué es fetch? fetch es una función en JavaScript que se utiliza para hacer solicitudes de red (como descargar datos de un servidor). Cuando usamos fetch, estamos pidiendo al navegador que obtenga información de una URL y luego podemos usar esa información en nuestro sitio web. ¿Qué es un data? En este contexto, data se refiere a la información que obtenemos de un archivo JSON. En el ejercicio, data es un objeto que contiene una lista de estudiantes. Queremos mostrar esta lista en una página web. Evento DOMContentLoaded El script se ejecuta cuando el contenido del DOM ha sido completamente cargado, asegurando que todos los elementos necesarios están disponibles para manipulación. Convertir un objeto a una cadena (String) Para convertir un objeto en una cadena JSON, utilizamos el método JSON.stringify(). Este método toma un objeto y lo convierte en una cadena de texto en formato JSON. Convertir una cadena (String) a un objeto Para convertir una cadena JSON en un objeto, utilizamos el método JSON.parse(). Este método toma una cadena en formato JSON y la convierte en un objeto JavaScript. Con estas herramientas, puedes fácilmente convertir entre objetos y cadenas en JavaScript usando JSON. SEMANA 9 - BOOTSTRAP Y RESPONSIVE DESIGN Bootstrap es un framework de desarrollo web front-end ¿Qué Significa que un Sitio Sea Responsivo? Un sitio web responsivo es aquel que está diseñado para funcionar correctamente en una variedad de dispositivos con diferentes tamaños de pantalla. Esto se logra a través de un enfoque de diseño adaptable y flexible que asegura que el contenido y la disposición del sitio se ajusten automáticamente según el dispositivo que se esté utilizando. ¿De qué trata el Responsive Design? El Responsive Design (o diseño responsivo) es el conjunto de técnicas y buenas prácticas que debemos seguir para garantizar que nuestros sitios web se visualicen adecuadamente en todos los dispositivos (celulares, smart TVs, notebooks, etc), y no sólo en la pantalla donde se hizo el diseño. Algunas de estas técnicas son: Incluir la meta etiqueta "viewport" en el HTML: Esta metaetiqueta controla cómo se escala el contenido en dispositivos móviles. Utilizar unidades relativas: Emplear unidades como %, em, rem en lugar de unidades fijas (px) para que el diseño sea flexible y se ajuste mejor a diferentes tamaños de pantalla.  Adaptar el CSS completamente utilizando Media Queries: Las Media Queries permiten aplicar diferentes estilos según el tamaño de la pantalla, la orientación y otras características del dispositivo. Utilizar frameworks como Bootstrap: Frameworks como Bootstrap proporcionan un conjunto de herramientas y componentes que facilitan la creación de un diseño responsivo. Notas del cuestionario: ○ El diseño responsivo es un conjunto de técnicas y buenas prácticas que garantizan una buena experiencia de usuario en distintos dispositivos sin importar el tamaño de su pantalla. ○ Un framework no es lo mismo que una librería. ○ Un componente en Bootstrap se refiere a una pieza de código HTML que colocamos en nuestra página que cumple alguna determinada función. Por ejemplo una barra de navegación es un componente. ○ Los contenedores flexibles nos permiten manejar adecuadamente el diseño en varias filas y varias columnas al mismo tiempo. ○ Para manejar el diseño en muchas filas y columnas, una manera adecuada de hacerlo es utilizar CSS Grid. SEMANA 10 - ARRAYS, OBJETOS Y OPERADORES Un objeto en JavaScript es una colección de pares clave-valor. Las claves son cadenas (o símbolos) que sirven como identificadores únicos para los valores asociados. Se puede acceder de dos maneras: Notación de punto: objeto.propiedad Notación de corchetes: objeto["propiedad"] Un array en JavaScript es una lista ordenada de elementos, donde cada uno tiene un índice basado en su posición. Los arrays se utilizan cuando necesitas almacenar múltiples valores en una sola variable.Los elementos de un array se accede por su índice, que comienza desde 0. Recorrer un array:Para recorrer un array, se suele utilizar un bucle for o el método forEach. En JavaScript, una variable puede almacenar diferentes tipos de datos. Por ejemplo, puedes tener una variable que almacena un número, un texto, o incluso una lista. A veces, cuando estás programando, necesitas saber qué tipo de dato está guardado en una variable para poder trabajar con él de manera correcta. uso del operador typeof permite identificar los tipos de datos almacenados en las variables de JavaScript. función filter de los arrays (listas) para quitar los elementos que no queremos. Esto es especialmente útil cuando trabajamos con listados y queremos darle la posibilidad a los usuarios de realizar búsquedas. función sort de los arrays (listas) para ordenar los elementos que almacena. Esto es útil para facilitarle al usuario la posibilidad de visualizar datos ordenados siguiendo algún determinado criterio. ¿Que es el operador typeof? Este operador te ayuda a descubrir el tipo de dato que tiene una variable en ese momento. Imagina que tienes una caja (variable) y quieres saber qué hay dentro (tipo de dato). El operador typeof es como una etiqueta que te dice qué tipo de cosa hay en la caja. ¿Cómo funciona filter()? La función filter crea una nueva lista con los elementos que cumplen con una condición específica que definen. La condición se expresa mediante una función que devuelve true o false. Si la función devuelve true, el elemento se mantiene en la nueva lista; si devuelve false, el elemento se descarta. ¿Cómo funciona sort()? La función sort en JavaScript te ayuda a ordenar los elementos de una lista (array) según un criterio específico. Es muy útil para organizar datos y facilitar su visualización. El método sort() ordena los elementos de un arreglo (array) localmente y devuelve el arreglo ordenado. Localmente significa que el array original se reordena. Por defecto, sort ordena los elementos de un array como cadenas de texto en orden alfabético. Si necesitas un orden diferente, puedes pasar una función de comparación a sort para definir cómo se deben ordenar los elementos. Funciones flecha Las "funciones flechas" (arrow functions) son una forma concisa de escribir funciones en JavaScript. Su sintaxis es: (parametros) => { cuerpo de la función }. Por ejemplo, element => typeof element === 'string' es una función flecha que toma un element y devuelve true si el tipo de element es string. Las funciones flechas no tienen su propio this y son útiles para funciones pequeñas y expresivas. Local storage: localStorage: Es un objeto que permite almacenar datos en el navegador del usuario. Los datos guardados en localStorage persisten incluso si el navegador se cierra y se vuelve a abrir..setItem('datoGuardado', inputText): Guarda el valor de inputText en localStorage bajo la clave 'datoGuardado'. La clave es como un nombre para el dato almacenado, y puedes usarla para recuperar ese dato más tarde. localStorage.getItem('datoGuardado'): localStorage es un objeto que permite almacenar datos en el navegador. El método getItem recupera el valor asociado con la clave 'datoGuardado' del almacenamiento local. Si no existe ningún valor para esa clave, getItem devuelve null. JSON.parse(...): Convierte la cadena obtenida (ya sea del localStorage o el valor predeterminado) en un objeto JavaScript. El localStorage nos permite guardar pares clave/valor en nuestra página a pesar de que el navegador se cierre (los datos persisten). A continuación se detallan las operaciones que podemos realizar: Para almacenar un valor: localStorage.setItem("clave", "valor que quiero guardar"); Para obtenerlo es: localStorage.getItem("clave"); Para eliminarlo: localStorage.removeItem("clave"); Para limpiar todo el localStorage: localStorage.clear(); Almacenamiento en javascript diferentes mecanismos para almacenar datos en el navegador del cliente.Esta guía cubre tres métodos principales: localStorage, sessionStorage y Cookies Preguntas foro: 1. La función filter() que permite filtrar los elementos del array extraño que fueran de tipo string. 2- El operador typeof , que retorna el tipo de dato variable que estamos trabajando, si es numero, string, booleano, etc. 3- Las funciones de flecha nos permiten escribir sintaxis de función más corta, por ejemplo: Una función tradicional seria: function suma(a, b) { return a + b; } Función flecha equivalente: const suma = (a, b) => {  return a + b; }; 4- La función de sort. Tuve que agregarle el parámetro local compare para asegurarse de que se ordenen correctamente sin diferenciar entre mayúsculas y minúsculas. 5- La función reduce() es útil cuando necesitas combinar o transformar todos los elementos de un array en un solo valor, como por ejemplo Sumar o multiplicar valores en un array, concatenarlos, agrupar elementos o transformarlos en otro tipo de estructuras u objetos. Otros: JSON.stringify sirve para convertir un array en una cadena JSON y JSON.parse para convertir la cadena JSON que representa una lista en un array. Esto es especialmente útil cuando queremos almacenar datos complejos de los usuarios, como objetos y sus propiedades o un arreglo (lista) de elementos. localStorage sólo almacena strings, por lo que no podemos almacenar arrays u objetos sin antes convertirlos a cadena JSON Notas cuestionario: Una función "flecha" nos permite escribir de forma más compacta una función, y en muchos casos es una buena alternativa a las funciones declaradas con la palabra reservada "function". El operador typeof nos permite conocer el tipo de dato de una variable. El método filter() de los arrays, nos permite quitar los valores que no queremos que estén en un nuevo array. Por ejemplo: [ 1, 2, 3, 4, 5, 6].filter(element => element > 3); Nos devuelve un nuevo array con todos los números mayores a 3. El método sort() ordena los elementos de un arreglo (array) localmente y devuelve el arreglo ordenado. Localmente significa que el array original se reordena. El método sort() tiene como parámetro opcional una función de comparación que permite especificar de qué manera se ordenarán los elementos. El localStorage nos permite guardar pares clave/valor en nuestra página a pesar de que el navegador se cierre (los datos persisten). A continuación se detallan las operaciones que podemos realizar: Para almacenar un valor: localStorage.setItem("clave", "valor que quiero guardar"); Para obtenerlo es: localStorage.getItem("clave"); Para eliminarlo: localStorage.removeItem("clave"); Para limpiar todo el localStorage: localStorage.clear();