Este documento presenta ejemplos del uso de AJAX para enviar datos de formularios al servidor de forma asíncrona, mostrar un gif de carga mientras se envían los datos, implementar paginación con AJAX para actualizar comentarios sin recargar la página, y cargar opciones dinámicamente en controles tipo select recuperando datos del servidor mediante peticiones AJAX.
Este documento introduce jQuery, una biblioteca JavaScript que facilita la manipulación del DOM y la programación de efectos. Explica qué es jQuery, cómo descargarla e incluirla en un proyecto, y ofrece ejemplos básicos de selección de nodos, manipulación del contenido, encadenamiento de acciones, y uso de plugins como jBox para mostrar ventanas emergentes.
Slides for my talk in FrontFest 2018 (Madrid, Feb 17). It's a technical comparison of the change detection mechanism as implemented in AngularJS, React, Angular2 and VueJS
See demos at https://github.com/jabadia/frontfest-frameworks-demos
Cómo hacer llamadas AJAX correctamente en Wordpress y cómo llamar tus ficheros javascript en el template con ejemplos. Dentro de las sesiones de formación de Artvisual del 2012
Este documento proporciona una introducción a jQuery, incluyendo una descripción de lo que es jQuery y el DOM, las razones para usar jQuery, la referencia de la API de jQuery y plugins destacados. jQuery es un framework JavaScript que facilita la manipulación de documentos HTML y el manejo de eventos. Simplifica tareas como seleccionar elementos, agregar comportamiento interactivo y desarrollar aplicaciones AJAX. La API de jQuery ofrece selectores, eventos, efectos y funciones para manipular el DOM de manera fácil.
Introducción a JQUErY, como agregar recursos a nuestros proyectos web, como animaciones, menús, validaciones, y demás efectos que nos proporciona JQUERY
Este documento presenta tres tecnologías web: jQuery, HTML5 y Apache Wicket. jQuery es una librería que facilita el uso de JavaScript para manipular el DOM, gestionar eventos y efectos. HTML5 incluye nuevas características como drag and drop, geolocalización, vídeo y audio. Apache Wicket es un framework Java para aplicaciones web basado en componentes.
Introducción al desarrollo Web: Frontend con Angular 6Gabriela Bosetti
El documento presenta una introducción al desarrollo frontend con Angular 6. Los objetivos incluyen comprender el desarrollo frontend con Angular, utilizar un framework MVC como Angular, y ser capaz de desarrollar una Single Page App. Se explican conceptos como TypeScript, Bootstrap, servicios y enrutamiento. Finalmente, se muestra cómo crear y extender un repositorio para migrar la aplicación con servicios backend.
Este documento introduce jQuery, una biblioteca JavaScript que facilita la manipulación del DOM y la programación de efectos. Explica qué es jQuery, cómo descargarla e incluirla en un proyecto, y ofrece ejemplos básicos de selección de nodos, manipulación del contenido, encadenamiento de acciones, y uso de plugins como jBox para mostrar ventanas emergentes.
Slides for my talk in FrontFest 2018 (Madrid, Feb 17). It's a technical comparison of the change detection mechanism as implemented in AngularJS, React, Angular2 and VueJS
See demos at https://github.com/jabadia/frontfest-frameworks-demos
Cómo hacer llamadas AJAX correctamente en Wordpress y cómo llamar tus ficheros javascript en el template con ejemplos. Dentro de las sesiones de formación de Artvisual del 2012
Este documento proporciona una introducción a jQuery, incluyendo una descripción de lo que es jQuery y el DOM, las razones para usar jQuery, la referencia de la API de jQuery y plugins destacados. jQuery es un framework JavaScript que facilita la manipulación de documentos HTML y el manejo de eventos. Simplifica tareas como seleccionar elementos, agregar comportamiento interactivo y desarrollar aplicaciones AJAX. La API de jQuery ofrece selectores, eventos, efectos y funciones para manipular el DOM de manera fácil.
Introducción a JQUErY, como agregar recursos a nuestros proyectos web, como animaciones, menús, validaciones, y demás efectos que nos proporciona JQUERY
Este documento presenta tres tecnologías web: jQuery, HTML5 y Apache Wicket. jQuery es una librería que facilita el uso de JavaScript para manipular el DOM, gestionar eventos y efectos. HTML5 incluye nuevas características como drag and drop, geolocalización, vídeo y audio. Apache Wicket es un framework Java para aplicaciones web basado en componentes.
Introducción al desarrollo Web: Frontend con Angular 6Gabriela Bosetti
El documento presenta una introducción al desarrollo frontend con Angular 6. Los objetivos incluyen comprender el desarrollo frontend con Angular, utilizar un framework MVC como Angular, y ser capaz de desarrollar una Single Page App. Se explican conceptos como TypeScript, Bootstrap, servicios y enrutamiento. Finalmente, se muestra cómo crear y extender un repositorio para migrar la aplicación con servicios backend.
Este documento habla sobre Flask, un microframework de Python para desarrollar aplicaciones web. Flask se describe como simple y de pequeño tamaño, sin tomar muchas decisiones por el desarrollador. Se mencionan algunas características como plantillas Jinja, ruteo de URLs, depurador incorporado, pruebas unitarias y extensiones como Flask-Admin. También se discuten algunas razones para usar Flask como su simplicidad y uso en proyectos de código abierto.
El documento describe la evolución de HTML5, incluyendo nuevos elementos como video, audio, canvas y geolocalización. También cubre tecnologías como CSS3, SVG, WebGL y trabajadores web que permiten crear aplicaciones web más ricas e interactivas.
El documento habla sobre las tendencias de diseño web para 2012, incluyendo el uso de grids fluidos, diseños responsivos y animaciones CSS3. También discute los recursos de jQuery que son útiles para el diseño web interactivo, como menús dinámicos, animaciones y efectos 3D. Proporciona varios enlaces a ejemplos y plugins de jQuery. Finalmente, presenta tres casos prácticos de sitios web que utilizan jQuery de maneras interesantes.
Este documento presenta una introducción al lenguaje de programación Python. Explica características como su sintaxis sin llaves, tipos de datos comunes, y estructuras útiles como generadores y decoradores. También cubre el framework Django para desarrollo web, incluyendo organización de proyectos, ORM, enrutamiento, vistas y plantillas. Finalmente, introduce conceptos como formularios, vistas genéricas y el administrador de Django.
Este documento describe cómo crear un sitio web simple con HTML, CSS y JavaScript y luego extender sus funcionalidades mediante frameworks como Angular en el frontend y Express en el backend. Explica conceptos como Single Page Applications, instalación de módulos con NPM, y uso de plantillas como Nunjucks con Express.
Este documento es un manual sobre jQuery que explica el popular framework JavaScript jQuery. El manual tiene varios capítulos escritos por Miguel Ángel Álvarez para ayudar a los usuarios a aprender el uso y programación de aplicaciones del lado del cliente con jQuery de manera que sean compatibles con los principales navegadores. El manual también incluye ejemplos prácticos de jQuery y un video tutorial para aprender paso a paso.
Este documento describe cómo manejar diferentes tipos de imágenes en Liferay 6.1, incluyendo las fotografías de usuario, imágenes en la galería de imágenes y archivos dentro del portlet actual. Explica cómo construir URLs especiales para mostrar estas imágenes y los servicios y clases que se pueden usar para acceder a metadatos de imágenes. También incluye ejemplos de código para mostrar estas imágenes.
Este documento describe cómo crear un token JWT con Node.js y Express para autenticación. Se instalan varias librerías como express, jsonwebtoken y express-jwt. Se crea un endpoint de login que devuelve un token JWT firmado si las credenciales son correctas. Otro endpoint de noticias está protegido por el middleware express-jwt y sólo se puede acceder presentando un token válido en la cabecera de la petición. El código de JavaScript usa jQuery para realizar peticiones al servidor, obtener un token y usarlo para acceder a las noticias protegidas.
A short introduction to Progressive Web Apps shown in .NET Conf UY 2017. The idea was to understand what is a PWA, what is needed to implement one and show some examples.
Este documento presenta una guía para el API de Google Calendar. Explica cómo se puede acceder y modificar eventos de calendario de Google a través de lenguajes de programación como PHP. Incluye ejemplos de cómo consultar, crear, actualizar y eliminar eventos de calendario usando la biblioteca ZendGdata de PHP. También cubre conceptos como autenticación, filtros de búsqueda y eventos recurrentes.
El documento presenta una introducción a los lenguajes de programación web más comunes, incluyendo Javascript, Python, Ruby y Java. Explica brevemente las características y usos de cada lenguaje y proporciona ejemplos de código. También cubre brevemente los formatos de marcado como HTML y los formatos de datos como JSON.
Este documento discute temas avanzados de GWT como pruebas de cliente, depuración, JSNI, enlace diferido, AJAX y RPC. Explica cómo ejecutar pruebas de cliente en diferentes modos como JUnit, Selenium y RemoteWeb. También cubre cómo depurar aplicaciones GWT de forma similar a otras aplicaciones Java y la recomendación de hacer TDD en lugar de depurar. Luego describe características clave de GWT como JSNI para usar JavaScript dentro de Java, enlace diferido para seleccionar implementaciones basadas en el navegador y AJ
1) Los formularios permiten enviar datos desde el cliente al servidor. Symfony proporciona un componente de formularios que facilita su creación. 2) Se construye un formulario mediante un generador que añade campos vinculados a las propiedades de una entidad. 3) El formulario vincula los datos enviados a la entidad y la valida antes de procesarla.
Una introducción a AngularJS. Presentación base de una charla/curso para Intel, Costa Rica. Marzo del 2014. Presenta una introducción a los conceptos principales para empezar a utilizar AngularJS en el desarrollo de aplicaciones Web.
Web Workers permiten ejecutar tareas en segundo plano para evitar que JavaScript bloquee la interfaz de usuario. Sin Web Workers, las tareas largas bloquean todo el JavaScript en la página, pero con Web Workers estas tareas pueden ejecutarse concurrentemente. Web Workers se puede usar para procesamiento intensivo, actualización de bases de datos remotas y precios, y búsquedas. Para usar Web Workers, se crea un objeto worker que ejecuta JavaScript de forma asíncrona, y se comunica con el hilo principal a través de mensajes.
Este documento presenta varios ejemplos del uso de AJAX para enviar y recuperar datos de un servidor sin recargar la página. Incluye ejemplos de cómo enviar datos al servidor mediante los métodos GET y POST, recuperar datos mediante las propiedades responseText y responseXML del objeto XMLHttpRequest, y mostrar los resultados actualizados sin recargar la página.
Jquery para principianes
JQUERY
AJAX ENVIAR FORMULARIOS SIN RECARGAR
ACTUALIZAR UN ELEMENTO SIN RECARGAR
COMBOS DEPENDIENTES AJAX BASE DE DATOS
STAR RATING JQUERY SIN BASE DE DATOS
STAR RATING JQUERY PLUGIN
DROPDOWN MENU DESPLEGABLE
ENVIA CORREOS SIN RECARGAR
PANEL DE IMAGENES CAROUSEL
INTERCAMBIO DE ELEMENTOS ENTRE 2 LISTAS
RECARGAR TEXTO AUTOMATICAMENTE
AGREGAR GRAFICOS ESTADISTICOS PIE
VALIDAR FORMULARIOS
INCLUIR TOOLTIP EN MAPA DE IMÁGENES
SUBIR MULTIPLES ARCHIVOS
WEB MODULAR PHP
SLIDER CONTENIDO DESTACADO
VENTANA MODAL
AGREGAR BORRAR CAMPOS
MODIFICANDO ATRIBUTOS
JQUERY MUSIC PLAYER
OCULTAR /MOSTRAR SECCIONES DE NUESTRO SITIO
Este documento proporciona resúmenes breves de varias técnicas y funcionalidades de jQuery y JavaScript para el desarrollo web. Incluye cómo enviar formularios sin recargar la página usando AJAX, actualizar elementos sin recargar, crear combos dependientes con una base de datos, agregar calificaciones de estrellas interactivas, crear menús desplegables, y más. El objetivo es ofrecer múltiples soluciones comunes con jQuery de una manera concisa y de alto nivel.
Este documento describe PhoneGap, un framework que permite crear aplicaciones móviles utilizando HTML, CSS y JavaScript. Explica cómo PhoneGap funciona compilando el código para hacerlo nativo en diferentes plataformas como Android e iOS. También describe el uso de jQuery Mobile para crear la interfaz de usuario y los diferentes componentes y eventos que ofrece.
Este documento presenta un curso de HTML5. Incluye información sobre el instructor Carlos Azaustre, un temario con 10 temas que cubren etiquetas HTML5, CSS3, responsive design, JavaScript, jQuery y más. También incluye el horario del curso distribuido en 4 días con sesiones por la mañana y tarde, y descripciones breves de los temas principales a cubrir.
Este documento habla sobre Flask, un microframework de Python para desarrollar aplicaciones web. Flask se describe como simple y de pequeño tamaño, sin tomar muchas decisiones por el desarrollador. Se mencionan algunas características como plantillas Jinja, ruteo de URLs, depurador incorporado, pruebas unitarias y extensiones como Flask-Admin. También se discuten algunas razones para usar Flask como su simplicidad y uso en proyectos de código abierto.
El documento describe la evolución de HTML5, incluyendo nuevos elementos como video, audio, canvas y geolocalización. También cubre tecnologías como CSS3, SVG, WebGL y trabajadores web que permiten crear aplicaciones web más ricas e interactivas.
El documento habla sobre las tendencias de diseño web para 2012, incluyendo el uso de grids fluidos, diseños responsivos y animaciones CSS3. También discute los recursos de jQuery que son útiles para el diseño web interactivo, como menús dinámicos, animaciones y efectos 3D. Proporciona varios enlaces a ejemplos y plugins de jQuery. Finalmente, presenta tres casos prácticos de sitios web que utilizan jQuery de maneras interesantes.
Este documento presenta una introducción al lenguaje de programación Python. Explica características como su sintaxis sin llaves, tipos de datos comunes, y estructuras útiles como generadores y decoradores. También cubre el framework Django para desarrollo web, incluyendo organización de proyectos, ORM, enrutamiento, vistas y plantillas. Finalmente, introduce conceptos como formularios, vistas genéricas y el administrador de Django.
Este documento describe cómo crear un sitio web simple con HTML, CSS y JavaScript y luego extender sus funcionalidades mediante frameworks como Angular en el frontend y Express en el backend. Explica conceptos como Single Page Applications, instalación de módulos con NPM, y uso de plantillas como Nunjucks con Express.
Este documento es un manual sobre jQuery que explica el popular framework JavaScript jQuery. El manual tiene varios capítulos escritos por Miguel Ángel Álvarez para ayudar a los usuarios a aprender el uso y programación de aplicaciones del lado del cliente con jQuery de manera que sean compatibles con los principales navegadores. El manual también incluye ejemplos prácticos de jQuery y un video tutorial para aprender paso a paso.
Este documento describe cómo manejar diferentes tipos de imágenes en Liferay 6.1, incluyendo las fotografías de usuario, imágenes en la galería de imágenes y archivos dentro del portlet actual. Explica cómo construir URLs especiales para mostrar estas imágenes y los servicios y clases que se pueden usar para acceder a metadatos de imágenes. También incluye ejemplos de código para mostrar estas imágenes.
Este documento describe cómo crear un token JWT con Node.js y Express para autenticación. Se instalan varias librerías como express, jsonwebtoken y express-jwt. Se crea un endpoint de login que devuelve un token JWT firmado si las credenciales son correctas. Otro endpoint de noticias está protegido por el middleware express-jwt y sólo se puede acceder presentando un token válido en la cabecera de la petición. El código de JavaScript usa jQuery para realizar peticiones al servidor, obtener un token y usarlo para acceder a las noticias protegidas.
A short introduction to Progressive Web Apps shown in .NET Conf UY 2017. The idea was to understand what is a PWA, what is needed to implement one and show some examples.
Este documento presenta una guía para el API de Google Calendar. Explica cómo se puede acceder y modificar eventos de calendario de Google a través de lenguajes de programación como PHP. Incluye ejemplos de cómo consultar, crear, actualizar y eliminar eventos de calendario usando la biblioteca ZendGdata de PHP. También cubre conceptos como autenticación, filtros de búsqueda y eventos recurrentes.
El documento presenta una introducción a los lenguajes de programación web más comunes, incluyendo Javascript, Python, Ruby y Java. Explica brevemente las características y usos de cada lenguaje y proporciona ejemplos de código. También cubre brevemente los formatos de marcado como HTML y los formatos de datos como JSON.
Este documento discute temas avanzados de GWT como pruebas de cliente, depuración, JSNI, enlace diferido, AJAX y RPC. Explica cómo ejecutar pruebas de cliente en diferentes modos como JUnit, Selenium y RemoteWeb. También cubre cómo depurar aplicaciones GWT de forma similar a otras aplicaciones Java y la recomendación de hacer TDD en lugar de depurar. Luego describe características clave de GWT como JSNI para usar JavaScript dentro de Java, enlace diferido para seleccionar implementaciones basadas en el navegador y AJ
1) Los formularios permiten enviar datos desde el cliente al servidor. Symfony proporciona un componente de formularios que facilita su creación. 2) Se construye un formulario mediante un generador que añade campos vinculados a las propiedades de una entidad. 3) El formulario vincula los datos enviados a la entidad y la valida antes de procesarla.
Una introducción a AngularJS. Presentación base de una charla/curso para Intel, Costa Rica. Marzo del 2014. Presenta una introducción a los conceptos principales para empezar a utilizar AngularJS en el desarrollo de aplicaciones Web.
Web Workers permiten ejecutar tareas en segundo plano para evitar que JavaScript bloquee la interfaz de usuario. Sin Web Workers, las tareas largas bloquean todo el JavaScript en la página, pero con Web Workers estas tareas pueden ejecutarse concurrentemente. Web Workers se puede usar para procesamiento intensivo, actualización de bases de datos remotas y precios, y búsquedas. Para usar Web Workers, se crea un objeto worker que ejecuta JavaScript de forma asíncrona, y se comunica con el hilo principal a través de mensajes.
Este documento presenta varios ejemplos del uso de AJAX para enviar y recuperar datos de un servidor sin recargar la página. Incluye ejemplos de cómo enviar datos al servidor mediante los métodos GET y POST, recuperar datos mediante las propiedades responseText y responseXML del objeto XMLHttpRequest, y mostrar los resultados actualizados sin recargar la página.
Jquery para principianes
JQUERY
AJAX ENVIAR FORMULARIOS SIN RECARGAR
ACTUALIZAR UN ELEMENTO SIN RECARGAR
COMBOS DEPENDIENTES AJAX BASE DE DATOS
STAR RATING JQUERY SIN BASE DE DATOS
STAR RATING JQUERY PLUGIN
DROPDOWN MENU DESPLEGABLE
ENVIA CORREOS SIN RECARGAR
PANEL DE IMAGENES CAROUSEL
INTERCAMBIO DE ELEMENTOS ENTRE 2 LISTAS
RECARGAR TEXTO AUTOMATICAMENTE
AGREGAR GRAFICOS ESTADISTICOS PIE
VALIDAR FORMULARIOS
INCLUIR TOOLTIP EN MAPA DE IMÁGENES
SUBIR MULTIPLES ARCHIVOS
WEB MODULAR PHP
SLIDER CONTENIDO DESTACADO
VENTANA MODAL
AGREGAR BORRAR CAMPOS
MODIFICANDO ATRIBUTOS
JQUERY MUSIC PLAYER
OCULTAR /MOSTRAR SECCIONES DE NUESTRO SITIO
Este documento proporciona resúmenes breves de varias técnicas y funcionalidades de jQuery y JavaScript para el desarrollo web. Incluye cómo enviar formularios sin recargar la página usando AJAX, actualizar elementos sin recargar, crear combos dependientes con una base de datos, agregar calificaciones de estrellas interactivas, crear menús desplegables, y más. El objetivo es ofrecer múltiples soluciones comunes con jQuery de una manera concisa y de alto nivel.
Este documento describe PhoneGap, un framework que permite crear aplicaciones móviles utilizando HTML, CSS y JavaScript. Explica cómo PhoneGap funciona compilando el código para hacerlo nativo en diferentes plataformas como Android e iOS. También describe el uso de jQuery Mobile para crear la interfaz de usuario y los diferentes componentes y eventos que ofrece.
Este documento presenta un curso de HTML5. Incluye información sobre el instructor Carlos Azaustre, un temario con 10 temas que cubren etiquetas HTML5, CSS3, responsive design, JavaScript, jQuery y más. También incluye el horario del curso distribuido en 4 días con sesiones por la mañana y tarde, y descripciones breves de los temas principales a cubrir.
Este documento describe un proyecto para implementar una página web de noticias utilizando Ajax y PHP. La página mostrará noticias inicialmente y permitirá filtrarlas por fecha a través de un formulario. Las solicitudes Ajax actualizarán el contenido sin recargar la página. El proyecto usa PHP para acceder a una base de datos MySQL y devolver las noticias en formato XML, el cual es procesado por JavaScript para mostrarlo en la página.
1. El documento discute posibles soluciones para implementar un chat por HTTP como Iframe scripting y propone que AJAX es una solución elegante. 2. Explica el esquema de funcionamiento de AJAX donde el navegador realiza peticiones asíncronas al servidor y actualiza el DOM sin recargar la página. 3. Revisa herramientas para desarrollo AJAX como Firebug que permiten debuggear aplicaciones AJAX.
Este documento proporciona una introducción al framework jQuery Mobile. En 3 oraciones o menos: jQuery Mobile es un framework HTML5 para crear aplicaciones web móviles multiplataforma utilizando HTML, CSS y JavaScript. Proporciona componentes como listas, botones, formularios y transiciones entre páginas. Los desarrolladores pueden crear interfaces de usuario ricas para dispositivos móviles de manera rápida y sencilla con este framework.
HTML Tour - Programación de Videojuegos HTML5Plain Concepts
En la charla veremos características comunes de los juegos y su aplicación práctica en canvas HTML5. Analizaremos varios tipos de juegos, tanto 2D como 3D y estudiaremos las diferentes maneras implementarlos mientras comentamos las partes clave de su estructura. Para finalizar echaremos un vistazo al framework desarrollado por PlainConcepts para la creación de diferentes tipos de juegos 2D y 3D en HTML5.
Si se da clic en alguno de los iconos del lado izquierdo, estos abrirán páginas web o documentos relacionados. Si los datos de inicio de sesión son incorrectos, aparecerá un mensaje de error antes de regresar a la página de inicio. Si los datos son correctos, se mostrará el menú de navegación de la página principal una vez iniciada la sesión.
Este documento presenta un examen para el segundo grado del primer bimestre. Contiene 12 preguntas sobre diferentes temas académicos para evaluar el progreso de los estudiantes.
Este documento introduce jQuery, un framework de JavaScript que facilita la selección de elementos DOM, la manipulación del árbol DOM y la interactividad mediante eventos y efectos. Explica cómo descargar e incluir jQuery, crear objetos jQuery y usar selectores para acceder a elementos. También cubre cómo manejar eventos como click mediante callbacks y cómo crear animaciones y efectos con los métodos de jQuery.
Este documento presenta un curso de desarrollo web que enseña sobre tecnologías modernas como HTML5, CSS3, JavaScript, APIs REST, DOM, BOM, jQuery y AJAX. Explica conceptos como el modelo de objetos del documento y navegador, peticiones asincrónicas, almacenamiento local y geolocalización.
jQuery es una biblioteca JavaScript que simplifica la manipulación del DOM, el manejo de eventos y la interacción AJAX. Se puede descargar o incluir desde un CDN como Google. La sintaxis básica es $(selector).acción() para seleccionar elementos y realizar acciones. jQuery también facilita el manejo de eventos como click, hover, focus y blur.
Con Selenium 2.0 y Webdriver la ejecución de TDD y BDD se ve beneficiado por las fortalezas de ambos proyectos.
Introduciremos el API Java basado en PageObjects y veremos ejemplos de creación de pruebas cross-browser para un interfaz de aplicación web con Ajax
Este documento proporciona instrucciones para insertar Cooliris en un blog, crear un puntero de texto que sigue el cursor, subir presentaciones de PowerPoint a un blog, hacer collages y videos con fotos usando Picasa, y subir y organizar videos en YouTube mediante listas de reproducción.
Este documento describe jQuery, un framework de JavaScript. Explica que jQuery permite la manipulación fácil de documentos HTML y la estructura DOM. También menciona algunas alternativas a jQuery como Mootools, Prototype y Yui. Luego, enumera algunas razones por las que jQuery es popular, como su uso en muchos sitios web principales y su licencia gratuita de código abierto.
El documento explica el modelo de objetos del documento (DOM), que permite representar cualquier página web como un árbol de nodos y objetos, y cómo JavaScript puede manipular el DOM para modificar el contenido, estructura y estilo de una página. Se describen las propiedades, métodos y eventos que ofrece el DOM para buscar, modificar y agregar/eliminar elementos HTML, y cómo se pueden manejar eventos del usuario con JavaScript.
Este documento presenta los fundamentos de Javascript para el desarrollo de aplicaciones web. Explica brevemente qué es Javascript, sus propósitos y dónde se puede insertar código. Luego describe elementos como variables, operadores, estructuras de condición, funciones, iteración y manejo de eventos. Finalmente, recomienda recursos adicionales y poner en práctica los conceptos aprendidos.
Ofrecemos herramientas y metodologías para que las personas con ideas de negocio desarrollen un prototipo que pueda ser probado en un entorno real.
Cada miembro puede crear su perfil de acuerdo a sus intereses, habilidades y así montar sus proyectos de ideas de negocio, para recibir mentorías .
En la ciudad de Pasto, estamos revolucionando el acceso a microcréditos y la formalización de microempresarios informales con nuestra aplicación CrediAvanza. Nuestro objetivo es empoderar a los emprendedores locales proporcionándoles una plataforma integral que facilite el acceso a servicios financieros y asesoría profesional.
ACERTIJO DESCIFRANDO CÓDIGO DEL CANDADO DE LA TORRE EIFFEL EN PARÍS. Por JAVI...JAVIER SOLIS NOYOLA
El Mtro. JAVIER SOLIS NOYOLA crea y desarrolla el “DESCIFRANDO CÓDIGO DEL CANDADO DE LA TORRE EIFFEL EN PARIS”. Esta actividad de aprendizaje propone el reto de descubrir el la secuencia números para abrir un candado, el cual destaca la percepción geométrica y conceptual. La intención de esta actividad de aprendizaje lúdico es, promover los pensamientos lógico (convergente) y creativo (divergente o lateral), mediante modelos mentales de: atención, memoria, imaginación, percepción (Geométrica y conceptual), perspicacia, inferencia y viso-espacialidad. Didácticamente, ésta actividad de aprendizaje es transversal, y que integra áreas del conocimiento: matemático, Lenguaje, artístico y las neurociencias. Acertijo dedicado a los Juegos Olímpicos de París 2024.
José Luis Jiménez Rodríguez
Junio 2024.
“La pedagogía es la metodología de la educación. Constituye una problemática de medios y fines, y en esa problemática estudia las situaciones educativas, las selecciona y luego organiza y asegura su explotación situacional”. Louis Not. 1993.
1. UNIDAD 3 AJAX
Ingeniería en Sistemas Computacionales
Antonio Álvarez de la Rocha
Campos Muñoz Iosdy Gisela
1
2. Objetivo de la Actividad:
Entender y exponer conceptos y ejemplos relacionados con AJAX.
2
•Agenda
13 - Mostrar un gif animado mientras se envían y reciben los
datos del servidor.
14- Paginación con AJAX
15-Cargar un control de tipo select
3. 3
• Hasta ahora mientras se actualiza la página mostramos
un texto: 'Procesando...', es muy común utilizar un gif
animado que represente tal operación.
4. 4
• Haremos una serie de paginas que nos permitan enviar los datos
cargados en un formulario al servidor en forma asíncrona y
mostraremos un gif animado mientras dura el envió de datos.
6. Código Java Script
addEvent(window,'load',inicializarEventos,false);
function inicializarEventos()
{
var ref=document.getElementById('formulario');
addEvent(ref,'submit',enviarDatos,false);
}
function enviarDatos(e)
{
if (window.event)
window.event.returnValue=false;
else
if (e)
e.preventDefault();
enviarFormulario();
}
function retornarDatos()
{
var cad='';
var nom=document.getElementById('nombre').value;
var com=document.getElementById('comentarios').value;
cad='nombre='+encodeURIComponent(nom)+'&comentarios='+encodeURIComponent(com);
return cad; }
6
7. 7
var conexion1;
function enviarFormulario()
{
conexion1=crearXMLHttpRequest(); conexion1.onreadystatechange = procesarEventos;
conexion1.open('POST','pagina1.php', true); conexion1.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
conexion1.send(retornarDatos());
}
function procesarEventos()
{
var resultados = document.getElementById("resultados"); if(conexion1.readyState == 4)
{
if (conexion1.status==200)
resultados.innerHTML = 'Gracias.';
Else
alert(conexion1.statusText);
}
else
{
resultados.innerHTML = '<img src="../cargando.gif">';
}
}
//*************************************** //Funciones comunes a todos los problemas
//*************************************** function addEvent(elemento,nomevento,funcion,captura)
{
if (elemento.attachEvent)
{
elemento.attachEvent('on'+nomevento,funcion);
return true;
}
Else
if (elemento.addEventListener)
{
8. PHP
• <?php
• header('Content-Type: text/html; charset=ISO-8859-1');
$ar=fopen("comentarios.txt","a") or
• die("No se pudo abrir el archivo");
fputs($ar,"Nombre:".$_REQUEST['nombre']."n");
fputs($ar,"Comentarios:".$_REQUEST['comentarios']."nn");
• fclose($ar);
• sleep(1);
• ?>
8
10. 14. Paginación con AJAX
10
• Un lugar donde puede ayudar el uso de AJAX es en la
paginación de datos mientras otro recurso en la página se está
ejecutando. Confeccionaremos una página que muestre un video
e inmediatamente en la parte inferior mostraremos los
comentarios del video paginados.
• Sin utilizar AJAX estamos obligados a recargar completamente
la página lo que haría imposible ver el video y recorrer los
comentarios en forma completa (considerando que solo parte de
los comentarios están en la página)
11. Ejemplo de paginación.
11
• Una pagina que muestre un video e inmediatamente en la parte
inferior muestre los comentarios del video paginado. Actualizar los
datos de forma asíncrona.
13. • addEvent(window,'load',inicializarEventos,false);
function inicializarEventos()
{
cargarPagina('pagina2.php');
}
function presionEnlace(e)
{
if (window.event)
{
window.event.returnValue=false;
var url=window.event.srcElement.getAttribute('href'); cargarPagina(url);
}
else
if (e)
{
e.preventDefault();
var url=e.target.getAttribute('href');
cargarPagina(url);
}
}
13
16. 15.Cargar un control de tipo select
16
• Confeccionaremos un problema que contenga dos controles de
tipo select. En el primero almacenaremos una lista de carreras
de estudio ("Analista de Sistemas", "Telecomunicaciones" y
"WebMaster")
• Cuando se seleccione una carrera enviaremos una petición al
servidor para que retorne todas las materias que tiene esa carrera
y procederemos a la carga del segundo select.
17. Código HTML
• <script src="funciones.js" language="JavaScript"></script>
• </head>
• <body>
• <h1>Prueba de cargar un control de tipo select recuperando datos del servidor
• mediante AJAX</h1>
• Seleccione la carrera:
• <select id="carreras" name="carreras">
• <option value="0">Seleccionar....</option>
• <option value="1">Analista de sistemas</option>
• <option value="2">Telecomunicaciones</option>
• <option value="3">WebMaster</option>
• </select><span id="espera"></span><br>
• Materias de la carrera:
• <select id="materias" name="materias">
• </select><br>
• </body>
• </html>
17
18. JavaScript
• addEvent(window,'load',inicializarEventos,false);
• function inicializarEventos()
• {
• var select1=document.getElementById('carreras');
• addEvent(select1,'change',mostrarMaterias,false);
• }
• var conexion1;
• function mostrarMaterias(e)
• {
• var codigo=document.getElementById('carreras').value;
• if (codigo!=0)
• {
• conexion1=crearXMLHttpRequest();
• conexion1.onreadystatechange = procesarEventos;
• conexion1.open('GET','pagina1.php?cod='+codigo, true);
• conexion1.send(null);
• }
• else
• {
• var select2=document.getElementById('materias');
• select2.options.length=0;
• }
• }
18
19. PHP
• <?php
• $car=$_REQUEST['cod'];
• if ($car==1)
• {
• $materias=array('Programacion I','Analisis Matematico',
• 'Estructura de las Organizaciones','Etica Profesional');
• }
• if ($car==2)
• {
• $materias=array('Fundamentos de Fisica','Analisis Matematico 1',
• 'Ingles Tecnico I','Sistemas de Comunicaciones I
• ');
• }
• if ($car==3)
• {
• $materias=array('Informatica I','Multimedia I','Bases de Datos');
• }
19
22. • Contratiempos presentados al realizar la actividad.
• Nos salían algunos errores al implementar el código.
• Tiempo Aproximado de la realización.
• 10 Horas
22
23. Conclusión.
23
Uno de los beneficios de AJAX es que es una herramienta
que viene a revolucionar la interacción con los sitios web.