Desarrollo de Aplicaciones Web I– Sesión 04

Aprendizaje Virtual
Instructor: Maiko Urizar Miranda

www.senati.edu.pe
Bienvenida
• Bienvenidos alumnos a otra sesión del curso Desarrollo de Aplicaciones Web I
en el cual utilizaremos HTML , CSS y JS para la creación de nuestras páginas
web.

www.senati.edu.pe
Modelo de Objetos del Documento (DOM)
• Document Object Model o DOM ('Modelo de Objetos del Documento) es una interfaz de
plataforma que proporciona un conjunto estándar de objetos para representar
documentos HTML, XHTML y XML.

• Facilita una representación estructurada del documento y define de qué manera se puede
acceder y modificar su estructura, estilo y contenido.

www.senati.edu.pe
Eventos en JavaScript
• Los eventos son la manera que tenemos en Javascript de controlar las acciones de los
visitantes y definir un comportamiento de la página cuando se produzcan. Cuando un
usuario visita una página web e interactúa con ella se producen los eventos y con
JavaScript podemos definir qué queremos que ocurra cuando se produzcan.

www.senati.edu.pe
Algunos Eventos de JavaScript
Nombre con prefijo on Descripción
onclick Click sobre un elemento
ondblclick Doble click sobre un elemento
onmousedown Se pulsa un botón del ratón sobre un elemento
onkeydown El puntero del ratón entra en el área de un elemento
onmouseleave El puntero del ratón sale del área de un elemento
onselect El puntero del ratón se sitúa encima del área de un elemento
onkeyup El puntero del ratón sale fuera del área del elemento o fuera de
uno de sus hijos
onmouseup Un botón del ratón se libera estando sobre un elemento
onkeypress Se pulsa el botón derecho del ratón (antes de que aparezca el
menú contextual)

www.senati.edu.pe
AJAX
AJAX significa JavaScript asíncrono y XML (Asynchronous JavaScript and XML). Es un conjunto de técnicas
de desarrollo web que permiten que las aplicaciones web funcionen de forma asíncrona, procesando
cualquier solicitud al servidor en segundo plano.

Básicamente AJAX funciona de la siguiente manera:

• El navegador crea una llamada de JavaScript que luego activará XMLHttpRequest.

• En segundo plano, el navegador web crea una solicitud HTTP al servidor.

• El servidor recibe, recupera y envía los datos al navegador web.

• El navegador web recibe los datos solicitados que aparecerán directamente en la página. No se necesita
recargar.

www.senati.edu.pe
Ejecución del código JavaScript
• Implementaremos un formulario en HTML que interactúe con JavaScript.

• Para ello crearemos 2 archivos: Uno con extensión .html y otro con extensión .js
con el nombre respectivo del archivo como se muestra a continuación:

www.senati.edu.pe
 • En el archivo index.html escribe el siguiente código

www.senati.edu.pe
 • En el archivo script.js escribe el siguiente código

www.senati.edu.pe
Creando un Sitio Web Completo
Con la finalidad de que tengas un ejemplo completo de un sitio web te recomiendo veas este
video y lo realices utilizando sublime text.
Parte 01:
https://www.youtube.com/watch?v=4Gk1OQrei8U
Parte 02:
https://www.youtube.com/watch?v=-OXIrOZY8_0&t=1234s
Parte 03:
https://www.youtube.com/watch?v=A-J5vgOxYA8
Descargar Imágenes del Proyecto
https://mega.nz/file/QBtDwJxb#wTBuPVT-B3fKunOHf0S3fhMRIFW3v7A12kZOEa4pksM

www.senati.edu.pe
www.senati.edu.pe