Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Diapositiva Clase Full-Stack 2022
Diapositiva Clase Full-Stack 2022
Ejemplo
OPERADORES Y EXPRESIONES
OPERADORES Y EXPRESIONES
OPERADORES Y EXPRESIONES
OPERADORES Y EXPRESIONES
OPERADORES Y EXPRESIONES
OPERADORES Y EXPRESIONES
PRACTICA…
PRACTICA…
PRACTICA…
PRACTICA…
PRACTICA…
PRACTICA…
6. Crear un Login
PRACTICA…
1. Sumatoria
PRACTICA…
2. Multiplicación
PRACTICA…
3. Multiplicación
PRACTICA…
4. Calculadora dinámica
PRACTICA…
<ol></ol>
<ul></ul>
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
Codificación (reconocer caracteres especiales)
Texto
Tipo de input
valor dentro del input
foco o pantalla dentro del input
Nombre de la variable – referencia
Obliga al campo tener un valor
div
div
div
CONTINUARA….
rel: se usa para definir la relación entre el
archivo enlazado y el documento HTML.
href: dirección o URL del archivo externo CSS.
Se especifica de la misma forma que un
hipervínculo o imagen.
type: indica al navegador cual es el formato
de archivo.
Tipos de selectores:
De elemento HTML:
h1, table, div, span…
De identificador
Todos los elementos HTML cuya propiedad
"id" t enga un determinado valor, tendrán
ese estilo.
De clase
Todos los elementos HTML cuya propiedad
"class" tenga un determinado valor
tendrán ese estilo.
Elemento
H1 {color:#CC9900;}
Identificador
#id {color:#CC9900;}
clase
.class {color:#CC9900;}
Es una propiedad o un relleno de CSS. Es el espacio o área entre el contenido
del elemento y su borde. El grosor de este relleno se delimita por las siguientes
propiedades:
.elemento {padding-top:10px;}
.elemento {padding-left:10px;}
.elemento {padding-bottom:10px;}
.elemento {padding-rigth:10px;}
Las distribuciones flex tienen las siguientes características, que
podrá explorar en esta guía.
.elemento-padre {
display:flex;
}
Flex-direction
.elemento-padre {
display:flex;
flex-direction:row;
}
Flex-direction
.elemento-padre {
display:flex;
flex-direction:row-reverse;
}
Flex-direction
.elemento-padre {
display:flex;
flex-direction:column;
}
Flex-direction
.elemento-padre {
display:flex;
flex-direction:columna-reverse;
}
Flex-wrap
.elemento-padre {
display:flex;
flex-wrap:nowrap;
}
Flex-wrap
.elemento-padre {
display:flex;
flex-wrap:wrap;
}
Flex-wrap
.elemento-padre {
display:flex;
flex-wrap:wrap-reverse;
}
Justify-content
Las distribuciones de justify-content se dan en el eje x
.elemento-padre {
display:flex;
justify-content:flex-start;
}
Justify-content
Las distribuciones de justify-content se dan en el eje x
.elemento-padre {
display:flex;
justify-content:flex-end;
}
Justify-content
Las distribuciones de justify-content se dan en el eje x
.elemento-padre {
display:flex;
justify-content:flex-center;
}
Justify-content
Las distribuciones de justify-content se dan en el eje x
.elemento-padre {
display:flex;
justify-content:space-between;
}
Justify-content
Las distribuciones de justify-content se dan en el eje x
.elemento-padre {
display:flex;
justify-content:space-around;
}
Justify-content
Las distribuciones de justify-content se dan en el eje x
.elemento-padre {
display:flex;
justify-content:space-evenly;
}
align-items
Las distribuciones de align-items se dan en el eje Y
.elemento-padre {
display:flex;
align-items:flex-start;
}
align-items
Las distribuciones de align-items se dan en el eje Y
.elemento-padre {
display:flex;
align-items:flex-end;
}
Justify-content
Las distribuciones de align-items se dan en el eje Y
.elemento-padre {
display:flex;
align-items:center;
}
Justify-content
Las distribuciones de align-items se dan en el eje Y
.elemento-padre {
display:flex;
align-items:stretch;
}
align-items
Las distribuciones de align-items se dan en el eje Y
.elemento-padre {
display:flex;
align-items:space-between;
}
align-items
Las distribuciones de align-items se dan en el eje Y
.elemento-padre {
display:flex;
align-items:space-around;
}
gap
Las distribuciones de márgenes entre elementos se dan en el eje
XyY
.elemento-padre {
display:flex;
gap:10px;
}
order
Este estilo se aplicara a cada elemento, definiendo el orden que
queremos que se posiciones nuestros elementos, tener en cuenta
que el contenedor debe tener el estilo display:flex para que
funcione
.item3 {
.item1 {
order:3;
order:1;
}
}
.item4 {
.item2 {
order:4;
order:2;
}
}
.item1 { .item3 {
order:4; order:2;
} }
.item2 { .item4 {
order:3; order:1;
} }
CODIGO CSS - MAQUETACION
RESULTADO – PAGINA
WEB
CHALLENGE
HTML + CSS
DIRECTORIO
Carpeta Raiz
Carpeta Diseño
Hoja de Estilos
Carpeta Iconos
Iconos
Carpeta Imágenes
Hoja HTML
HTML
HTML
HTML
CSS
RESULTADO PAG WEB
Angular
jQuery
Node
React
-En 1995, Brendan Eich trabajaba en Netscape Communications
Corporation, la compañía que
publicó el famoso Netscape Navigator, entonces principal competidor de
Internet Explorer.
-Netscape inició
el desarrollo de una versión del cliente LiveScript, que pasó a llamarse
JavaScript, en
homenaje al lenguaje Java creado por Sun Microsystems.
Las versiones de Javascript se basan en los de la ECMAScript
(que abreviaremos como ES).
Por lo tanto, se encuentran:
ES 1 y ES 1, que son los inicios de Javascript;
ES 3 (publicada en diciembre de 1999), que es funcional en
todos los navegadores
(excepto las versiones anteriores de Internet Explorer);
ES 4, que fue abandonada debido a los grandes cambios
que no fueron apreciados;
ES 5 (publicada en diciembre de 2009), que es la versión más
reciente liberada;
ES 6, que se encuentra actualment.
ECMAScript específicamente es el estándar que a partir del
año 2015 a la actualidad se encarga de regir como debe ser
interpretado y funcionar el lenguaje JavaScript, siendo este
(JS – JavaScript) interpretado y procesado por multitud de
plataformas, entre las que se encuentran los navegadores
web, NodeJS u otros ambientes como el desarrollo de
aplicaciones para los distintos sistemas operativos que
actualmente existen en el mercado. Los responsables de
dichos navegadores y JavaScript deben encargarse de
interpretar el lenguaje tal como lo fija ECMAScript
JavaScript es un lenguaje de programación interpretado, es decir, que
necesita un
intérprete para ser ejecutado.
name = ‘vegeta’
Constante: Una constante es un valor que no puede cambiar en el flujo
de nuestro algoritmo.
En Javascript vamos a declarar nuestras constantes anteponiendo la
palabra const
TAX = ‘20’
document.write()
console.log()
ciclo que ejecuta una sentencia especificada mientras cierta condición se evalué como
verdadera, dicha condición es evaluada antes de ejecutar la sentencia.
ciclo que evalúa al final del bucle. Esto implica que el bucle se ejecutará al menos una vez.
Al contrario que el bucle while , que comprueba la condición antes de entrar en el bucle, el
bucle do - while la evalúa al final del bucle. Esto implica que el bucle se ejecutará al menos una
vez.
Este método entra dentro del grupo de Iterables sin devolver una nueva matriz, lo que hace el
forEach es ejecutar una función por cada elemento del arreglo. En cada iteración se tendrá
acceso a 3 variables: valor (del elemento), índice (del elemento) y arreglo (que estamos
recorriendo).
Este método es muy útil cuando solo necesitamos ejecutar una función a través de cada
elemento del arreglo, sin necesidad de obtener un retorno.
La sintaxis es exactamente la misma, la diferencia con el anterior es que el bucle for of recorre los
objetos que son iterables, un array por ejemplo. En cambio el bucle for in está pensado para
iterar sobre las propiedades de los objectos.
Si lo aplicamos sobre un objecto devolverá las claves (las keys, el nombre de sus propiedades
pero no su valor).
Como hemos visto antes, se puede usar también for in para recorrer un array, pero no es
recomendable.
✔
✔✔
❌
Probablemente, la forma más popular de estas tres, y a la que estaremos
acostumbrados si venimos de otros lenguajes de programación, es la
primera, a la creación de funciones por declaración. Esta forma permite
declarar una función que existirá a lo largo de todo el código:
A grandes rasgos, en Javascript, una clausura o cierre se define como una función
que «encierra» variables en su propio ámbito (y que continúan existiendo aún
habiendo terminado la función). Por ejemplo, veamos el siguiente ejemplo:
Tenemos una función anónima que es también una función autoejecutable.
Aunque parece una función por expresión, no lo es, ya que la variable incr está
guardando lo que devuelve la función anónima autoejecutable, que a su vez, es
otra función diferente.
Por lo tanto, en la variable incr tenemos una función por expresión que además
conoce el valor de una variable num, que sólo existe dentro de incr. Si nos fijamos
en la función que devolvemos, lo que hace es incrementar el valor de num y
devolverlo. Como la variable incr es una clausura y mantiene la variable en su
propio ámbito, veremos que a medida que ejecutamos incr(), los valores de num
(que estamos devolviendo) conservan su valor y se van incrementando.
Las Arrow functions, funciones flecha o «fat arrow» son una forma corta de
escribir funciones que aparece en Javascript a partir de ECMAScript 6.
Básicamente, se trata de reemplazar eliminar la palabra function y añadir =>
antes de abrir las llaves:
Sin embargo, las funciones flechas tienen algunas ventajas a la hora de simplificar código
bastante interesantes:
* Si el cuerpo de la función sólo tiene una línea, podemos omitir las llaves ({}).
* Además, en ese caso, automáticamente se hace un return de esa única línea, por lo
que podemos omitir también el return.
* En el caso de que la función no tenga parámetros, se indica como en el ejemplo
anterior: () =>.
* En el caso de que la función tenga un solo parámetro, se puede indicar simplemente el
nombre del mismo: e =>.
* En el caso de que la función tenga 2 ó más parámetros, se indican entre paréntesis:
(a, b) =>.
* Si queremos devolver un objeto, que coincide con la sintaxis de las llaves, se puede
englobar con paréntesis: ({name: 'Manz'}).
Por lo tanto, el ejemplo anterior se puede simplificar aún más:
Las funciones flecha hacen que el código sea mucho más legible y claro de
escribir, mejorando la productividad y la claridad a la hora de escribir
código.
Función Normal (declaración) Función Normal (declaración) Función Normal (declaración)
Posición 0
Para poder acceder a los detalles de las etiquetas en este método de
querySelectorAll se hace por medio de un arreglo, así:
Posición 1
getElementById()
Este método nos permitirá traer del DOM o HTML el id
getElementsByClassName()
Este método nos permitirá traer del DOM o HTML las class en forma de
arreglo.
parentElement()
Este método nos permitirá traer del DOM o HTML el padre de la lista
¿Cómo modificar el texto que llamamos del DOM?
De esta manera podemos realizar los cambios, independiente del método
que se use para llamar nodos del DOM.
ANTES
¿Cómo modificar el texto que llamamos del DOM?
De esta manera podemos realizar los cambios, independiente del método
que se use para llamar nodos del DOM.
DESPUES
innerHTML
Con este método nos permite crear etiquetas en el DOM.
¿Cómo crear una clase desde JS al DOM?
Con este método nos permite crear clases desde JS en el DOM.
¿Cómo remover una clase desde JS al DOM?
Con este método nos permite eliminar clases desde JS en el DOM.
¿Cómo agregar un arreglo en una table desde JS al DOM?
¿Cómo crear un nuevo elemento y agregarlo en el DOM existiendo
previamente datos de una lista?
Algunos eventos:
- Evento click.
- Evento change.
- Evento mouseenter.
- Evento mouseleave.
Acción dada al dar clic sobre el elemento, ej. botón
Código acción
alejar mouse
Challenge
Parte 1
Challenge
Parte 2
HTML CSS
PARTE
1
JS
PARTE
1
PARTE
1
VISUALIZACIÓN CHALLENGE PARTE 1
HTML CSS
PARTE
2
PARTE
2
JS
PARTE
2
VISUALIZACIÓN CHALLENGE PARTE 2
DIRECTORIO
Challenge
Parte 1
Challenge
Parte 2
PARTE
1
HTML
JS
PARTE
1
JS PARTE
1
PARTE
1
VISUALIZACIÓN CHALLENGE PARTE 1
CSS
PARTE
HTML 2
JS
PARTE
2
PARTE
2
VISUALIZACIÓN CHALLENGE PARTE 2
ANTES
DESPUES
Inicia desde la
posición…
Sub-cadena a
encontrar
En caso de que no exista lo
que estamos mandando a
ubicar, se mostrara un -1
En caso de que no exista lo
que estamos mandando a
ubicar, se mostrara un -1
Clic aquí
Copiar este
script
Pegar aquí
el script
Opción 2: se puede descargar el archivo de JQuery desde el
siguiente link https://jquery.com/download/
Clic aquí
Luego en la ventana que se abre dar clic derecho y guardar como…
se debe guardar en la carpeta raíz del proyecto para su posterior uso
adecuado.
Clic aquí
Luego mandamos a llamar el archivo JQuery desde el HTML o DOM
para su posterior uso.
IMPORTANTE: Se debe ubicar el script del JQuery después del
body y antes del script del JS, para que no se presenten errores
en el flujo del programa.
JS
Veremos dos ejemplos, uno de JS y otro de JQuery; donde
podremos ver la diferencia y lo versátil al usar el JQuery.
JS
Veremos dos ejemplos, uno de JS y otro de JQuery; donde
podremos ver la diferencia y lo versátil al usar el JQuery.
JQUERY
Otro ejemplo pero esta vez asignando una variable.
JQUERY
Hay dos formas de declarar la función del jQuery para dar inicio
al uso de este mismo.
Forma 1 Forma 2
Recomendado.
Ejemplo 1 Trae todas las etiquetas o elementos del html
Ejemplo 2 Selectores por Tipo.
Ejemplo 3 Selectores por Índice.
O también…
Recomendado
Antes Después
Ejemplo 6 Selector para mostrar.
O también…
Recomendado
Antes Después
Ejercicio: Practica.
HTML
Ejercicio: Practica.
CSS
Ejercicio: Practica.
JS - jQuery
Ejercicio: Practica.
RESULTADO
Acciones a
realizar
Ejemplo: contador
Evento Change
Se este método detecta el cambio de valor del elemento seleccionado en el
DOM de nuestra web. En definitiva con este método jQuery se puede
interactuar con cualquier elemento que contenga un valor y que este valor
pueda verse alterado en cualquier momento.
Ejemplo: Cambiar texto por cada escrito en el input
Evento Mouseenter y Mouseleave
- El evento mouseenter ocurre cuando el puntero del mouse está sobre el
seleccionado elemento.
antes después
Remueve clases al elemento seleccionado.
antes después
Crear o agregar un elemento al final de la lista
antes después
Otra forma de crear o agregar un elemento al final de la lista
antes después
Crear o agregar un elemento al principio de la lista
antes después
Otra forma de crear o agregar un elemento al principio de la lista
antes después
Crear o agregar múltiples elementos al final de la lista
antes después
Crear o agregar múltiples elementos al inicio de la lista
antes después
Reemplaza elementos del DOM por el parámetro indicado.
antes después
Elimina el elemento seleccionado y sus elementos secundarios
antes después
Elimina todos los elementos con la clase que escojamos.
antes después
Agrega estilos css al elemento seleccionado
antes después
Agrega un atributo al elemento seleccionado
antes después
antes después
antes después
Alterna entre los métodos hide y show
ocultar mostrar
Una Promesa (Promise) es un objeto que representa la
terminación o el fracaso de una operación.
Arreglo vacío
HTML: index
HTML: otro
JS
Ejemplo:
Métodos HTTP
Post: Envía datos a un servicio web. Utilice el método Post para crear un
recurso o un conjunto de recursos. Por ejemplo, puede añadir los detalles de
una nueva transacción de almacén.
PASO 1:
Escoger según
arquitectura del PC
Tener en cuenta: Instalación del servidor local para poder probar el
challenge.
PASO 2:
Escoger según
arquitectura del PC
Tener en cuenta: Instalación del servidor local para poder probar el
challenge.
PASO 3:
Clic aquí
Tener en cuenta: Instalación del servidor local para poder probar el
challenge.
PASO 4:
Clic aquí
Tener en cuenta: Instalación del servidor local para poder probar el
challenge.
PASO 5:
Clic aquí en
“COPIAR”
PASO 8: Ahora vamos agregar la carpeta raíz trabajada al servidor.