Java
Script
2a parte
Trabajando con Objetos
• A manera de aprendizaje
creamos un objeto usando const;
• La sintaxis es:
Const nombreObjeto = {
propiedad1: ‘valor’,
propiedad2: ‘valor’,
propiedad3: num
}
• Para mostrar valor:
[Link]([Link]);
Marco Alameda Desarrollo de Aplicaciones WEB II 2
Trabajando con Objetos
• Dentro de los objetos puede haber funciones y se
declaran:
Const nombreObjeto = {
propiedad1: ‘valor’,
propiedad2: ‘valor’,
propiedad3: num
nombreFuncion: function() {
[Link](‘texto: ’ + [Link]);
}
}
• Y se manda a “traer” o se accede mediante:
[Link]();
Marco Alameda Desarrollo de Aplicaciones WEB II 3
Trabajando con Objetos
Para hacer
referencia a las
propiedades del
objeto dentro de la
misma función no
se puede solo
escribir la
propiedad
Marco Alameda Desarrollo de Aplicaciones WEB II 4
Trabajando con Objetos
• Uso del THIS
• This hace
referencia al
mismo objeto y a
las mismas
propiedades sobre
el cual se esta
mandando a
llamar esta función
Marco Alameda Desarrollo de Aplicaciones WEB II 5
Seleccionar Elementos
en Js
Seleccionar Elementos con
QuerySelector
• Supongamos que queremos seleccionar Blog de
café con consejos y cursos
• Este se encuentra dentro del h2 y dentro del
elemento (usando Beem) de Header__texto
Marco Alameda Desarrollo de Aplicaciones WEB II 7
Seleccionar Elementos con
QuerySelector
• 1ero se declara una variable de tipo document,
document hace referencia a todo el archivo html
• Document es un objeto, por lo tanto para acceder a
propiedades le sigue un punto, y se usa
querySelector(), que es un selector, este devuelve
el primer elemento del documento que coincida
con el grupo especificado de selectores
Marco Alameda Desarrollo de Aplicaciones WEB II 8
Seleccionar Elementos con
QuerySelector
Marco Alameda Desarrollo de Aplicaciones WEB II 9
Seleccionar Elementos con
QuerySelector
• Para hacer una selección mas especifica se puede
ubicar la clase padre y después hacer referencia al
elemento html, como se ve en el ejemplo (puede
haber muchos h2), pero siempre muestra el 1o
• Quedando de la siguiente manera
Marco Alameda Desarrollo de Aplicaciones WEB II 10
Manipular Elementos
en JS
Manipular elementos html en JS
• En Firefox es posible ver mas propiedades
Marco Alameda Desarrollo de Aplicaciones WEB II 12
Manipular elementos html en JS
• Para manipular elementos html, una ves que se usa
el selector, se usa el objeto con la propiedad y el
nuevo valor, por ejemplo
Marco Alameda Desarrollo de Aplicaciones WEB II 13
Manipular elementos html en JS
• También es posible agregar clases
Marco Alameda Desarrollo de Aplicaciones WEB II 14
Manipular elementos html en JS
• Regresando a querySelector, si se coloca una clase
que no existe, devuelve el valor null, hay que tener
cuidado en colocar el selector
Marco Alameda Desarrollo de Aplicaciones WEB II 15
Seleccionar Elementos con
QuerySelectorAll
• Para seleccionar todos los elementos que coincidan
con el selector, se puede ubicar la clase padre y
después hacer referencia al elemento html, como
se ve en el ejemplo (puede haber muchos a)
Marco Alameda Desarrollo de Aplicaciones WEB II 16
Seleccionar Elementos con
QuerySelectorAll
• Para acceder a un enlace en especifico, se coloca la
posición del NodeList al que se quiere acceder
Marco Alameda Desarrollo de Aplicaciones WEB II 17
Seleccionar Elementos con
QuerySelectorAll
• También es posible modificar el texto usando las
propiedades del objeto seleccionado
Marco Alameda Desarrollo de Aplicaciones WEB II 18
Seleccionar Elementos con
QuerySelectorAll
• Por otro lado también puedes modificar el enlace al
que te llevara el link
Marco Alameda Desarrollo de Aplicaciones WEB II 19
Seleccionar Elementos con
QuerySelectorAll
• También es posible agregar o eliminar clases, como
se ve en el ejemplo
Marco Alameda Desarrollo de Aplicaciones WEB II 20
Seleccionar Elementos con
QuerySelectorAll
• También es posible agregar o eliminar clases, como
se ve en el ejemplo
Marco Alameda Desarrollo de Aplicaciones WEB II 21
Crear código HTML
con JS
Crear HTML a partir de JS
• Se crea código HTML con createElement, se
recomienda escribir en mayúsculas y sin apertura ni
cierre
Marco Alameda Desarrollo de Aplicaciones WEB II 23
Crear HTML a partir de JS
• Para crear un enlace completo como se ve en la
imagen, esto es en HTML
• Esta es la forma de hacerlo con javaScript
Marco Alameda Desarrollo de Aplicaciones WEB II 24
Crear HTML a partir de JS
• Lo siguiente es agregarlo al documento, es decir se
creo pero hay que indicar en que parte del HTML,
se agregará, en este ejemplo lo agregaremos en la
barra de navegación
• Para esto usamos el querySelector para buscar la
clase que contendrá el elemento, en el ejemplo
será la clase .navegación, pero existen 2 por lo que
solo se usará querySelector para que nos regrese la
primera clase que encuentre
Marco Alameda Desarrollo de Aplicaciones WEB II 25
Crear HTML a partir de JS
Ejercicio porque
esta diferente a
los demás
enlaces?
Marco Alameda Desarrollo de Aplicaciones WEB II 26
Crear HTML a partir de JS
La clave esta en
la clase que
tiene los estilos
aplicados
Marco Alameda Desarrollo de Aplicaciones WEB II 27
Crear HTML a partir de JS
• En donde se usamos la generación de código HTML
con JS, cuando validamos las base de datos, cuando
se valida un formulario y se genera una alerta si se
envío correctamente la información o no o si hizo
falta información en un campo
Marco Alameda Desarrollo de Aplicaciones WEB II 28
Eventos en JS
Eventos en Js
• Cuando alguien visita un sitio web o una aplicación web,
existen muchos eventos a lo largo de toda la aplicación.
• Desde el simple hecho de hacer scroll, eso ya se le conoce
como eventos el evento de scroll.
• Cuando yo doy clic en un formulario al botón de enviar, eso
es un evento y ese evento se conoce como click.
• Cuando llenas un formulario y escribes también son
eventos.
• Hay bastantes eventos y son muchos eventos los que
suceden en todos los sitios web y en todas las aplicaciones.
• Y gracias a estos eventos podemos crear sitios de
aplicaciones web más dinámicos que reaccionen a lo que el
usuario va haciendo en nuestro proyecto.
Marco Alameda Desarrollo de Aplicaciones WEB II 30
Eventos en JS
• Windows es lo que se conoce como el objeto global, es decir, es
todo el documento incluso HTML y JS, es digamos, un nivel más
alto de document y tiene mucha información.
• Aquí vas a encontrar todas las funciones, incluso contiene
funciones y algunos array methods.
• Entonces Windows también hará referencia a todas las funciones
en JavaScript.
Marco Alameda Desarrollo de Aplicaciones WEB II 31
Eventos en JS
• Recordemos que la
ejecución es de arriba
hacia abajo, es este
ejemplo estamos
esperando que un
evento termine para
que se ejecute el
código que esta
dentro de la función
• AddEventListener, se
usa para registrar los
eventos
Marco Alameda Desarrollo de Aplicaciones WEB II 32
Eventos en JS
• El evento DOMContentLoaded, solo espera que se
descargue el código HTML, a diferencia de load,
que este evento espera que se descargue todo el
código html, css, Js y al final ejecuta la función
Marco Alameda Desarrollo de Aplicaciones WEB II 33
Eventos en JS
• Otro evento es onscroll, el evento activa la función
cuando se hace scroll con el mouse
Marco Alameda Desarrollo de Aplicaciones WEB II 34
Seleccionar Elementos y asociar un
eventos en JS
Vamos a enviar el evento Click para validar un formulario
• Puede llamarse con cualquier variable
Marco Alameda Desarrollo de Aplicaciones WEB II 35
Eventos en teclado (JS)
• Vamos a seleccionar el id = “nombre”, para revisar
lo que el usuario esta escribiendo
Marco Alameda Desarrollo de Aplicaciones WEB II 36
Eventos en teclado (JS)
• El evento change no funciona en tiempo real, es
mejor el evento input
Marco Alameda Desarrollo de Aplicaciones WEB II 37
Eventos en teclado (JS)
• Para ver lo que se esta escribiendo se usa el
[Link], en donde se determina el objeto y el
valor
Marco Alameda Desarrollo de Aplicaciones WEB II 38
Eventos en teclado (JS)
• Para ver la información de los demás input, se hace
el mismo procedimiento
Marco Alameda Desarrollo de Aplicaciones WEB II 39
Eventos en teclado (JS)
• Resumir código, creando funcione
Se manda el evento
Marco Alameda Desarrollo de Aplicaciones WEB II 40
Eventos en teclado (JS) Importante: deben llamarse
igual las propiedades del
objeto, los inputs y los id del
formulario para que
• Validando el Formulario funcione
Se crea el objeto datos (con sus propiedades)
Se asigna valor, en base a los valores
Marco Alameda Desarrollo de Aplicaciones WEB II 41
Eventos en formularios (submit)
• Para validar el formulario, se usa la clase principal
formulario
• Y el submit, que todo formulario debe tener al
menos un submit que es la acción que envia los
datos del formulario
Marco Alameda Desarrollo de Aplicaciones WEB II 42
Eventos en formularios (submit)
• Código de validación de formulario
Marco Alameda Desarrollo de Aplicaciones WEB II 43
Eventos en formularios (submit)
• Reordenando código
Marco Alameda Desarrollo de Aplicaciones WEB II 44
Eventos en formularios (submit)
• Validando Formulario
Marco Alameda Desarrollo de Aplicaciones WEB II 45
Eventos en formularios (submit)
• Validando formulario
Marco Alameda Desarrollo de Aplicaciones WEB II 46
Eventos en formularios (submit)
• Validando formulario
Marco Alameda Desarrollo de Aplicaciones WEB II 47
Eventos en formularios (submit)
• Crear función que muestre error
Marco Alameda Desarrollo de Aplicaciones WEB II 48
Eventos en formularios (submit)
• Crear elemento html (p)
Marco Alameda Desarrollo de Aplicaciones WEB II 49
Eventos en formularios (submit)
• Crear la clase (error) y se añade el código HTML,
aparece el error pero permanece
Marco Alameda Desarrollo de Aplicaciones WEB II 50
Eventos en formularios (submit)
• Desaparece el error después de 5 segundos, la
función remove, borra código HTML
Ejercicio mostrar mensaje: se envío correctamente la información
Marco Alameda Desarrollo de Aplicaciones WEB II 51
Eventos en formularios (submit)
• Mensaje
Información enviada correctamente
Marco Alameda Desarrollo de Aplicaciones WEB II 52
Refactoring de codigo
en JS
Problemas del Refactoring
• El primer problema es que los programadores
quieren crear código lo mas compacto posible
cuando aun no funciona, así que el primer paso es
hacer que el código funcione correctamente,
aunque exista código repetido, quizás se vea muy
extenso o feo pero funcionando
• El segundo problema es que ya funcione el código y
ya no se quiere tocar mas para evitar fallas
Marco Alameda Desarrollo de Aplicaciones WEB II 54
Recomendaciones
• Escribe el código aunque se vea feo o duplicado,
pero debe funcionar
• Ya funcionando y entendiendo el código, entonces
hay que tratar de ver la forma de mejorarlo y
reducirlo
Marco Alameda Desarrollo de Aplicaciones WEB II 55
Refactoring
• Reducir código en Mensaje de error
Marco Alameda Desarrollo de Aplicaciones WEB II 56
SASS y Gulp
Marco
Desarrollo de Aplicaciones WEB II
Alameda 57
Introducción
• SASS (CSS con superpoderes)
Marco Alameda Desarrollo de Aplicaciones WEB II 58
Introducción
• SASS
Marco Alameda Desarrollo de Aplicaciones WEB II 59
Introducción
• SASS
Marco Alameda Desarrollo de Aplicaciones WEB II 60
Introducción
• Sintaxis de SASS
Marco Alameda Desarrollo de Aplicaciones WEB II 61
Introducción
• Anidación de SASS
Marco Alameda Desarrollo de Aplicaciones WEB II 62
Introducción
• Extensión de Archivos de SASS
Marco Alameda Desarrollo de Aplicaciones WEB II 63
Introducción
• Extensión de Archivos de SASS
Marco Alameda Desarrollo de Aplicaciones WEB II 64
Gulp
Marco Alameda Desarrollo de Aplicaciones WEB II 65
Gulp
Marco Alameda Desarrollo de Aplicaciones WEB II 66
Marco Alameda Desarrollo de Aplicaciones WEB II 67
