RESUMEN SOBRE EL USO DE

DIAGRAMAS DE FLUJO DFD

TUTORIAL
PARA RECORDAR….
PARA RECORDAR….
PARA RECORDAR….
PARA RECORDAR….
PARA RECORDAR….
PARA RECORDAR….
PARA RECORDAR….
PARA RECORDAR….
PARA RECORDAR….
PARA RECORDAR….
PARA RECORDAR….
PARA RECORDAR….
PARA RECORDAR….
CONCEPTOS DEL DIAGRAMA DE FLUJO
CONCEPTOS DEL DIAGRAMA DE FLUJO
CONCEPTOS DEL DIAGRAMA DE FLUJO
CONCEPTOS DEL DIAGRAMA DE FLUJO
CONCEPTOS DEL DIAGRAMA DE FLUJO
CONCEPTOS DEL DIAGRAMA DE FLUJO
 CONCEPTOS DEL DIAGRAMA DE FLUJO

 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…

7. Calcular el numero mayor

CICLO PARA - (FOR)
CICLO PARA - (FOR)
 PRACTICA…

1. Sumatoria
 PRACTICA…

2. Multiplicación
 PRACTICA…

3. Multiplicación
 PRACTICA…

4. Calculadora dinámica
PRACTICA…

El método MOD entrega

El residuo de una
División, si el resultado es
El numero CERO (0), es par
De lo contrario es impar.
PRACTICA…
PRACTICA…
PRACTICA…
 Otro ejemplo de calculadora:
CICLO MIENTRAS (WHILE)
CICLO MIENTRAS (WHILE)
PRACTICA…
 PRACTICA…

Mientras opción sea diferente a 5 que se cumpla la condición.

Se debe crear un acumulador

E iniciarla en 1 ya que todo numero multiplicado por 0 da 0

Se debe crear un acumulador

E iniciarla en 0

Cantidad de números que el

Usuario decida operar.
Aquí se guardará los números
Ingresados por el usuario.

Acumulador, aquí se ira

Acumulando la suma
De cada numero agregado
Por el usuario.

Se debe crear una nueva

Salida de pantalla para posteriormente
Indicar el ingreso de escoger una opción
Ya sea para repetir el ciclo o para salir
Del programa.
 PRACTICA…

Tengo la opción de escoger nuevamente

Una operación o simplemente salir del
Ciclo.

Según la condición que indica el WHILE en

Este ejercicio si escojo la opción “5” indicaría
Cerrar el ciclo.
HTML
HTML
HTML
HTML
HTML
HTML
HTML

<ol></ol>

<ul></ul>
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
Codificación (reconocer caracteres especiales)

Compatibilidad con navegadores

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.

•Pueden mostrarse como una fila o una columna.

•Respetan el modo de escritura del documento.
•Son de una sola línea por default, pero se les puede pedir que se
ajusten a varias líneas.
•Los elementos en el diseño se pueden reordenar visualmente, sin
considerar su orden en el DOM.
•El espacio se puede distribuir dentro de los elementos, por lo que se
vuelven más grandes y más pequeños según el espacio disponible en
su padre.
•El espacio se puede distribuir alrededor de los elementos y las líneas
flex en una distribución envolvente, utilizando las propiedades Box
Alignment.
•Los elementos en sí se pueden alinear en el eje transversal.
flex

.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.

-Brendan desarrolló Live Script un lenguaje de script que se basa en el

lenguaje Java, y que
estaba destinado a ser instalado en los servidores desarrollados por
Netscape.

-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.

JavaScript se utiliza principalmente en páginas web, aplicaciones móviles

y servidores

Al igual que HTML, JavaScript es ejecutado por el navegador del usuario:

se llama un
de cliente, en comparación con el lado del servidor cuando el código es
ejecutado por el
servidor.

Javascript está normalizado por ECMA International como el nombre

ECMAScript
Language Reference.

La última versión del estándar está basado en ECMAScript 6, lanzado en

A continuación se muestra un programa HTML simple que contiene la
instrucción Javascript, situada dentro de un elemento <script>:
La buena practica, siempre es enlazar, nuestros archivos externamente,
para respetar la responsabilidad de cada documento.

Para enlazar un archivo los realizamos de la siguiente manera:

Mostrar Información:
funcion alert()
Nuestro primer mensaje por pantalla, con la función alert() mostraremos una
ventana al usuario en el navegador.
Mostrar Información:
funcion console.log()
El console.log nos va permitir observar datos que contienen nuestras
variables o constantes en ciertos puntos de nuestro código.

En el navegador oprimiendo la tecla f12 o click derecho y seleccionando la

opción inspecciónar, vamos a ver las opciones de desarrollo del navegador
y seleccionaremos la opción console
Mostrar Información:
funcion document.write()
El document.write() nos va permitir observar datos que contienen nuestras
variables o constantes en la pagina del navegador

En el navegador veremos la salida de datos en la pagina,

Entrada de datos:
funcion prompt(‘ingrese su nombre’,’’);
Para la entrada de datos por teclado tenemos la función prompt. Cada vez
que necesitamos ingresar un dato con esta función, aparece una ventana
donde cargamos el valor.

En el navegador nos mostrara una ventana donde nos solicitara que

ingresemos un valor de acuerdo al mensaje que coloquemos al usuario
Variable: Una variable es un valor que puede cambiar en cualquier
punto en el flujo de nuestro algoritmo.
En Javascript vamos a declarar nuestras variables anteponiendo la palabra
let

let name = ‘goku’

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

const TAX = ‘19’

TAX = ‘20’

Voy a obtener un error por que una constante no la

puedo volver a definir y su valor inicial no podrá cambiar
Boolean: Valores que solo manejan false o true

String: El tipo String de JavaScript se utiliza para representar datos

textuales.

Number: El tipo Number se refiere a cualquier valor numérico. Entero y

Decimal

Undefined: Una variable a la que no se le ha asignado un valor tiene el

valor undefined.

Null: El tipo Null tiene exactamente un valor: null

La decisión como lo veíamos en dfd, nos va permitir
realizar validaciones de datos con la siguiente
estructura.
El NO lógico ( !) el operador tomará algo que es true y lo hará false. También
tomará algo que es falso y lo hará verdadero.
Si tienes una sentencia corta If else, entonces puedes optar por ir con el operador ternario. La
palabra ternario significa algo compuesto de tres partes.

Esta es la sintaxis básica para un operador ternario:

La condición va antes de la ? marca y si es true, entonces el código entre el ? marca y :

ejecutaría. Si la condición es false, se ejecutará el código después de :.
Una sentencia Switch es una instrucción de flujo de control
que prueba el valor de una expresión (expression) contra
varios casos (case).
expresion: Es una expresión que es comparada con el
valor de cada instancia case.

case: Una instancia case es usada para ser comparada

con el valor de expresion. Si la expresión coincide con el
valor del case, las declaraciones dentro de la instancia
case se ejecutan hasta que se encuentre el final de la
declaración switch o hasta encontrar una interrupción
break.
default: Una instancia default, cuando es declarada, es
ejecutada si el valor de la expresión no coincide con
cualquiera de las otras instancias case.

break: Las sentencias break se ejecutarán cuando la

expresión coincida con el case. Si las sentencias break no
están presentes, la computadora seguirá ejecutando el
switch incluso si encuentra una coincidencia entre la
expresión y el case.
alert()

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.

Nota: Se sugiere ver tema de Arreglos ya que este ciclo

su uso común es con Arrays (arreglos)
Hay otro tipo de bucle que funciona muy parecido al bucle for in visto anteriormente, el
bucle for of.

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.

Nota: Se sugiere ver tema de Arreglos ya que este ciclo

su uso común es con Arrays (arreglos)
En programación, un arreglo es una colección de
elementos o cosas. Los arreglos guardan data como
elementos y los regresan cuando los necesitas.
push(): Inserta un elemento al final del arreglo.
unshift(): Inserta un elemento al inicio del arreglo.
pop(): Remueve un elemento del final del arreglo.
shift(): Remueve un elemento del principio del arreglo.
slice(): Crea una copia sombra del arreglo.
join(): devuelve el arreglo en un ‘Sting’ y con separación.
Array.isArray(): Determina si el valor es un arreglo.
Length: Determina el tamaño del arreglo.
concat(): Combina uno o mas arreglos.
includes(): Determina si un elemente está incluido en el
arreglo.
sort(): Ordena los elementos del arreglo.
find(): Devuelve el valor del primer elemento del array que
cumple la función de prueba proporcionada.
filter(): Crea un nuevo array con todos los elementos que
cumplan la condición implementada por la función dada.
map(): Crea un nuevo array con los resultados de la
llamada a la función indicada aplicados a cada uno de
sus elementos.
push(): Inserta un elemento al final del arreglo.
unshift(): Inserta un elemento al inicio del arreglo.
pop(): Remueve un elemento del final del arreglo.
shift(): Remueve un elemento del principio del arreglo.
slice(): Crea una copia sombra del arreglo.
Join(): devuelve el arreglo en un ‘Sting’ y con separación
Array.isArray(): Determina si el valor es un arreglo.
Length: Determina el tamaño del arreglo.
concat(): Combina uno o mas arreglos
includes(): Determina si un elemente está incluido en el arreglo.
sort(): Ordena los elementos del arreglo
find(): Devuelve el valor del primer elemento del array que cumple
la función de prueba proporcionada.
find(): Devuelve el valor del primer elemento del array que cumple
la función de prueba proporcionada. Ej: cadena de texto.
filter(): Crea un nuevo array con todos los elementos que cumplan
la condición implementada por la función dada.
filter(): Crea un nuevo array con todos los elementos que cumplan
la condición implementada por la función dada. Ej. Números.
map(): Crea un nuevo array con los resultados de la llamada a la
función indicada aplicados a cada uno de sus elementos.
Un objeto es una colección de propiedades, y una
propiedad es una asociación entre un nombre (o clave) y
un valor. El nombre o clave es siempre una cadena y debe
ser única en la colección. El valor puede ser una primitiva,
un objeto o incluso una función.
1- Necesito mostrar todos los empleados cuyo cargo es
Testing.
2- Necesito mostrar el primer empleado Masculinos (M).
3- Necesito mostrar todos los empleados que trabajen en
la sede de Medellín (deben consultar primero el código en
el arreglo de sedes).
1- Necesito mostrar todos los empleados cuyo cargo es Testing.
2- Necesito mostrar el primer empleado Masculinos (M).
3- Necesito mostrar todos los empleados que trabajen en la sede de Medellín (deben
consultar primero el código en el arreglo de sedes).
Las funciones son un conjunto de instrucciones
organizadas, que corresponden a una determinada tarea
o funcionalidad específica, que un usuario desea
implementar en su programa para lograr un único
resultado deseado.

El código dentro de una función se ejecuta solo cuando es

necesario, es decir, solo cuando se llama.
Hay varias formas de crear funciones en Javascript: por declaración (la
más usada por principiantes), por expresión (la más habitual en
programadores con experiencia) o mediante constructor de objeto (no
recomendada):

✔
✔✔
❌
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:

De hecho, podríamos ejecutar la función saludar() incluso antes de

haberla creado y funcionaría correctamente, ya que Javascript
primero busca las declaraciones de funciones y luego procesa el resto
del código
Sin embargo, en Javascript es muy habitual encontrarse códigos donde los
programadores «guardan funciones» dentro de variables, para
posteriormente «ejecutar dichas variables». Se trata de un enfoque
diferente, creación de funciones por expresión, que fundamentalmente,
hacen lo mismo con algunas diferencias:
Con este nuevo enfoque, estamos creando una función en el interior de una
variable, lo que nos permitirá posteriormente ejecutar la variable (como si
fuera una función). Observa que el nombre de la función (en este ejemplo:
saludar) pasa a ser inútil, ya que si intentamos ejecutar saludar() nos dirá que
no existe y si intentamos ejecutar saludo() funciona correctamente.

¿Qué ha pasado? Ahora el nombre de la función pasa a ser el nombre de la

variable, mientras que el nombre de la función desaparece y se omite,
dando paso a lo que se llaman las funciones anónimas (o funciones
lambda).
Como curiosidad, debes saber que se pueden declarar funciones como si
fueran objetos. Sin embargo, es un enfoque que no se suele utilizar en
producción. Simplemente es interesante saberlo para darse cuenta que en
Javascript todo pueden ser objetos:
Las funciones anónimas o funciones lambda son un tipo de funciones que se
declaran sin nombre de función y se alojan en el interior de una variable y
haciendo referencia a ella cada vez que queramos utilizarla:
Observa que en la última línea del ejemplo anterior, estamos ejecutando la
variable, es decir, ejecutando la función que contiene la variable. Sin
embargo, en la línea anterior hacemos referencia a la variable (sin
ejecutarla, no hay paréntesis) y nos devuelve la función en sí.

La diferencia fundamental entre las funciones por declaración y las

funciones por expresión es que estas últimas sólo están disponibles a partir de
la inicialización de la variable. Si «ejecutamos la variable» antes de
declararla, nos dará un error.
Ahora que conocemos las funciones anónimas, podremos comprender más
fácilmente como utilizar callbacks (también llamadas funciones callback o
retrollamadas). A grandes rasgos, un callback (llamada hacia atrás) es pasar
una función B por parámetro a una función A, de modo que la función A
puede ejecutar esa función B de forma genérica desde su código, y
nosotros podemos definirlas desde fuera de dicha función:
Esto nos podría permitir crear varias funciones para utilizar a modo de
callback y reutilizarlas posteriormente con diferentes propósitos. De hecho,
los callbacks muchas veces son la primera estrategia que se suele utilizar en
Javascript para trabajar la asincronía, uno de los temas que veremos más
adelante:
Viendo este ejemplo, podemos planear ejecutar la función fA() cambiando
los callbacks según nos interese, sin necesidad de crear funciones con el
mismo código repetido una y otra vez. Además, en el caso de que las
funciones callbacks sean muy cortas, muchas veces utilizamos directamente
la función anónima, sin necesidad de guardarla en una variable
previamente:
Aunque, como se puede ver, se suele evitar para facilitar la legibilidad del
código, y sólo se utiliza en casos muy específicos donde estás seguro que no
vas a reutilizar la función callback o no te interesa guardarla en una variable.
Pueden existir casos en los que necesites crear una función y ejecutarla
sobre la marcha. En Javascript es muy sencillo crear funciones
autoejecutables. Básicamente, sólo tenemos que envolver entre paréntesis
la función anónima en cuestión (no necesitamos que tenga nombre, puesto
que no la vamos a guardar) y luego, ejecutarla:
Las clausuras o cierres, es un concepto relacionado con las funciones y los ámbitos
que suele costar comprender cuando se empieza en Javascript. Es importante
tener las bases de funciones claras hasta este punto, lo que permitirá entender las
bases de una clausura.

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.

La «magia» de las clausuras es que en el interior de la función autoejecutable

estamos creando una variable num que se guardará en el ámbito de dicha
función, por lo tanto existirá con el valor declarado: 0.

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)

Función Normal (declaración) Función Normal (declaración) Función Anónima

Document Object Model (Modelo de Objeto de
Documento) o DOM, es una interfaz de programación que
nos permite crear, cambiar, o remover elementos del
documento. También podemos agregar eventos a esos
elementos para hacer más dinámica nuestra página.

El DOM visualiza el documento de HTML como un árbol de

tres nodos. Un nodo representa un documento de HTML.
Nuestro documento se llama nodo raíz y contiene un nodo
hijo el cual es el elemento <html>. El elemento <html>
contiene dos hijos los cuales son los elementos <head> y
<body>.

Ambos elementos <head> y <body> tienen hijos propios.

querySelector()
Este método nos permitirá traer del DOM o HTML ya sea una etiqueta, un id
o ya sea una clase.
Llamando etiqueta: se
ubica la etiqueta dentro
de comillas simples.
Para traer un nodo del DOM sin que se visualice su etiqueta
en la consola, le agregamos .textContent
Si deseamos llamar un nodo que tenga un “id” lo hacemos
anteponiendo “#” y luego el nombre del “id”.

Llamando Id: se ubica el

nombre del id dentro de
comillas simples y anteponiendo
el signo #
Si deseamos llamar un nodo que tenga una clase class=“ ”
lo hacemos anteponiendo . y luego el nombre de la clase.

Llamando class=“ ”: se ubica el

nombre de la clase dentro de
comillas simples y anteponiendo
el signo .
querySelectorAll()
Este método nos permitirá traer del DOM o HTML todas las etiquetas de la
referencia que le indiquemos.
Aquí estamos llamando todas
las etiquetas “p” ósea todos los
párrafos del DOM en una lista
de nodos.
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 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.

Aquí estamos cambiando el texto del Id por “Hola”,

Teniendo en cuenta que no cambiará el texto en el
HTML, seguirá conservando el original.
¿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?

createElement = crea el elemento

appendChild = Agrega el elemento al DOM
¿Cómo crear nuevos elemento y agregarlo en el DOM sin datos de una
lista?
¿Cómo eliminar el primer elemento en el DOM desde JS?
¿Cómo eliminar el ultimo elemento en el DOM desde JS?
¿Cómo eliminar un elemento en especifico en el DOM desde JS?
Las etiquetas que componen el elemento deben tener un “id”.
Los eventos son acciones que ocurren cuando el usuario o
el navegador manipula una página. Desempeñan un
papel importante ya que pueden hacer que los elementos
de una página web cambien dinámicamente.

Algunos eventos:
- Evento click.
- Evento change.
- Evento mouseenter.
- Evento mouseleave.
 Acción dada al dar clic sobre el elemento, ej. botón

En este caso es un contador, cada clic ira

aumentando el numero.
 Acción dada comúnmente en los input, realiza un cambio a una acción
indicada.

1er cambio 2do cambio

En este caso, cada que se copie y se de

enter en el input, se cambiará el párrafo.
Acción dada cuando el cursor se para sobre algún objeto

Sin el cursor Con el cursor

encima encima
Acción dada cuando el cursor se aleja de algún objeto

Código acción
alejar mouse

Sin el cursor Con el cursor Sin el cursor

encima encima encima
1- Necesito agregar 2 nuevos empleados en el arreglo,
uno cuya sede es Cali y otro cuya sede es Bogotá.
2- Necesito mostrar el Nombre, el Cargo, la Direccion de la
casa y la Sede de todos los empleados en 3 diferentes
tablas clasificadas por sedes.
1- Necesito crear un sistema donde pueda agregar
productos y eliminarlos con acciones desde botones, tener
en cuenta que al no haber productos se muestre un texto
indicándolo. Ej.
DIRECTORIO

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

Traerá los elementos del

arreglo que contengan la
palabra “Antioquia”
Si existe el elemento dará como respuesta “true”,
pero si no existe “false”
En un arreglo, si existe el elemento lo mostrará, en
caso contrario no mostrará ningún dato.
Posición Posición
inicial final
La posición del
texto
espacio
jQuery es una biblioteca multiplataforma (se puede
ejecutar en distintos sistemas operativos) de JavaScript,
creada inicialmente por John Resig, que permite simplificar
la manera de interactuar con los documentos HTML,
manipular el árbol DOM, manejar eventos, desarrollar
animaciones y agregar interacción con la técnica AJAX a
páginas web.
Los principios de desarrollo con JQuery son:

- La separación de JavaScript y HTML.

- Brevedad y claridad.
- Eliminación de incompatibilidades entre navegadores:
- Extensibilidad
Opción 1: se puede copiar y pegar el link desde la pagina de JQuery
al HTML o DOM.

- Ingreso al link https://releases.jquery.com/

- Luego selecciono la Sgte. opción:

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.

Escoger todas las etiquetas “a” con

sus clases, menos una clase en
especifico

Escoger todas las etiquetas

“a” menos un índice en
Ejemplo 4 Selectores de etiqueta por DIV.
Ejemplo 5 Selector para ocultar.

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

Clic en “Ocultar”. Clic en “Mostrar”.

Evento Click
se ejecuta cada vez que se hace click en un elemento del DOM. Bien sea una
imagen, un input text, un párrafo, un button, un select, un radio button, un
div… etc.

Selección elemento Tipo de evento

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.

- El evento mouseleave ocurre cuando el puntero del mouse sale del

seleccionado elemento.
Ejemplo: Cambiar color del bloque al ingresar y alejar mouse

Sin el cursor Con el cursor Sin el cursor

encima encima encima
Se tiene como finalidad detectar la presión de las teclas del teclado de un
dispositivo, realizando un conteo de ellas o la acción que desee hacer.
Estos métodos se encargan de mostrar u ocultar dicho elemento del DOM
Según los parámetros indicados.
Ejemplo: ocultar y mostrar objeto con un solo botón.
Agrega clases al elemento seleccionado.

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

Al dar clic en el botón Al dar clic en la etiqueta

agrega los atributos a la <a>Ejemplo</a> se
etiqueta <a>Ejemplo</a>. direccionará a
www.Google.com
Eliminar un atributo al elemento seleccionado

antes después

Al dar clic en el botón Al dar clic en la etiqueta

elimina los atributos a la <a>Google</a> ya no se
etiqueta <a>Google</a>. direccionará a
www.Google.com
Agregar y Remover una propiedad al elemento seleccionado

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.

Una promesa es asincrónica, lo que significa que necesita

tiempo para resolverse o finalizar.

La promesas usan las siguientes funciones callback:

- resolve(value): Esta indica que la tarea asincrónica se
realizó correctamente. Esto ejecutará el callback de
cumplimiento en el controlador then().
- reject(error): Esta indica un error mientras se intenta
realizar la tarea asincrónica. Esta ejecutará el callback
de error en el controlador then().
Ejemplo: Simulador para pedir datos de un arreglo al API o al Servidor.
Arreglo a consultar Promesa Inicia la consulta…

1.5 seg después…

Parámetro que Parámetro que

Para simular el tiempo se activa si el se activa si el
de espera de la código es código es
consulta, creamos un correcto incorrecto
método “setTimeout()”

En esta función donde se deseará algún

otro código se abriría {} y quedaría así
Significa que espera a que le devuelvan la
=> {“aquí los códigos”}
información para posteriormente ejecutar el
código; en este caso mostrar en la consola.
Ejemplo 2: otra forma de pedir datos de un arreglo al API o al Servidor.
Arreglo a consultar Promesa (función asíncrona) Inicia la consulta…

1.5 seg después…

Forma simplificada de realizar la promesa.

Ejemplo 3: Simulador para pedir datos de un arreglo al API o al Servidor.
Arreglo a consultar Promesa Inicia la consulta…

Resultado el cual arroja

el mensaje de error ya
que la consulta
(arreglo) no tiene
datos

Arreglo vacío

Método para validar si existe Validar condición para error y

error arroja mensaje de error
Ejemplo 4: otra forma de pedir datos de un arreglo al API o al Servidor.
Arreglo a consultar Promesa (función asíncrona) Inicia la consulta…

El “try” si existe datos en la

consulta, por lo cual se ejecuta la
consulta con normalidad.

El “catch” si la consulta no tiene

datos, por lo cual arroja error.
AJAX (Asíncronos Javascript and XML) es una técnica de
desarrollo web que, al combinar una serie de tecnologías
independientes, nos permite intercambiar información
entre el servidor y el cliente (un navegador web) de forma
asíncrona.

Como resultado, obtenemos una navegación ágil, rápida

y dinámica; y también la posibilidad de realizar cambios
sobre una web sin necesidad de actualizarla.
Las tecnologías independientes que lo hacen posible son:

• JAVASCRIPT: Es la base fundamental que une estas

tecnologías
• XMLHttpRequest: Intercambio asíncrono
• XML: Manipulación e intercambio de información
• JSON: Alternativa de XML (Actualmente más usado que
XML)
• DOM: Document Object Model
• XHTML y CSS: Estilos - Creación de una presentación de
objetos
 URL a enviar

Se usa para mandar datos

Tipo de contenido a enviar

Aquí va el nombre de la
Datos que se va a enviar variable que contiene el
objeto, en este caso “obj”

Método si funciona: arroja

una respuesta.

Método si no funciona: arroja

un error.

Nota: El JSON es un arreglo de objetos.

Ejemplo:

HTML: index

HTML: otro

JS
Ejemplo:
Métodos HTTP

Cuando crea una transformación de consumidor de servicio web REST, debe

seleccionar el método HTTP que utiliza el servicio de integración de datos en
el mensaje de solicitud. No se puede cambiar el método HTTP después de
crear la transformación.
Configure la transformación para utilizar uno de los siguientes métodos HTTP:

Get: Recupera un recurso o un conjunto de recursos del servicio web. Por

ejemplo, puede recuperar una tabla de productos o recuperar información
sobre un producto.

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.

Put: Reemplaza un recurso o un conjunto de recursos. Si los datos no existen, el

método Put envía los datos. Por ejemplo, puede actualizar la dirección de
envío de un cliente.

Delete: Elimina un recurso o un conjunto de recursos. Por ejemplo, puede

eliminar el registro de un empleado que ya no trabaja para una organización.
Tener en cuenta: Realizar validaciones si:
- Usuarios y Contraseñas son incorrectos.
- Usuario no existe.
- Usuario y contraseña no concuerdan.
- Logueado exitosamente (se abre la pagina)
Tener en cuenta: Instalación del servidor local para poder probar el
challenge.

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í para

guardar la descarga
Tener en cuenta: Instalación del servidor local para poder probar el
challenge.

PASO 6: Después de instalarlo (dar a todo siguiente, aceptar…), se

debe configurar para su uso.

Clic aquí para abrir

Tener en cuenta: Instalación del servidor local para poder probar el
challenge.

PASO 7: Después de instalarlo (dar a todo siguiente, aceptar…), se

debe configurar para su uso.

En el momento que este abriendo hay que tener un poco de paciencia,

tarda un poco según el pc que usen, es normal ver que se abren
ventanas de la consola del sistema y se cierren repentinamente.
PASO 8: Ahora vamos agregar la carpeta raíz trabajada al servidor.

Clic aquí en
“COPIAR”
PASO 8: Ahora vamos agregar la carpeta raíz trabajada al servidor.

Nos ubicamos en ruta de instalación del

servidor.

Creamos una carpeta para incorporar la

carpeta raíz, en mi caso la llamé
“developer”.
PASO 9: Ahora vamos agregar la carpeta raíz trabajada al servidor.

Acabamos de pegar la carpeta raíz en la

ruta adecuada del servidor
PASO 10: Ahora vamos agregar la carpeta raíz trabajada al servidor.
Vamos al navegador y escribimos
“localhost”, si nos aparece esta pagina
significa que nuestro servidor esta activo y
funcionando adecuadamente.
PASO 11: Ahora vamos agregar la carpeta raíz trabajada al servidor.
Ahora vamos a la barra de
direcciones y vamos a copiar
“localhost/developer/”, aquí estamos
ingresando a la carpeta que creamos
anteriormente en la ruta del servidor.

Ahora vemos nuestra carpeta raíz, solo

es darle clic y se debe abrir el
programa realizado.
PASO 12: Ahora vamos agregar la carpeta raíz trabajada al servidor.
Tener en cuenta: Realizar validaciones si:
- Usuarios y Contraseñas son incorrectos.
- Usuario no existe.
- Usuario y contraseña no concuerdan.
- Logueado exitosamente (se abre la pagina)
CONTINUARA …