CLASE 1 LOGICA DE PROGRAMACION

Guardar el archivo en formato .html para que lo lea como pagina web, CTRL S PARA GUARDAR.
Para poner saltos de línea y que se vean en la pagina, poner la etiqueta <br> para cerrar </br>
Para el primer titulo <h1> para cerrarlo </h1>
Para crear links usamos la etiqueta <a> (ancora). Esa etiqueta funciona de la siguiente manera:
Visite <a href="http://www.aluracursos.com"> Alura Latam</a>
La etiqueta posee como contenido la página de Alura Latam, y el contenido puede ser
encontrado haciendo clic para que el navegador cargue la página informada en el
atributo href de la etiqueta.
Para crear un pop up con JS abrir la etiqueta de script (o SCRIPT), doble tab, alert(“Lo que
quiero que diga de texto”) LUEGO CERRAR LA ETIQUETA SCRIPT
Poner al inicio de todo <meta charset=”UTF-8”> para que la pagina pueda ser abierta en todos
los navegadores. Existe una convención que establece el uso de etiquetas en letras minúsculas
en HTML, sin embargo, si usamos letras mayúsculas, para el navegador no habrá diferencia
alguna.
CLASE 2 LOGICA DE PROGRAMACION
En JS los paréntesis significa que la función espera un parámetro. Para poner texto desde aca
poner document.write(“lo que queremos escribir”) y para poner un salto de línea poner entre
de “<br>” la etiqueta lo que esta entre “” es un string , para que aparezcan 2 string diferentes
sumados usar el signo + para concatenarlos
CLASE 3 LOGICA DE PROGRAMACION
Para restar en JS poner document.write(un numero-otro numero) para los promedios usar
paréntesis entre los números para dejar afuera el numero por el que quiero dividir, dejar una
línea de espacio antes y después después de poner el código en JS.
Con el document.write podemos pasar al resultado de un cálculo y, entre otras cosas, de
manera dinámica ya que el mundo HTML no es capaz de realizar operaciones matemáticas.
CLASE 4 LOGICA DE PROGRAMACION
No usar ñ para nombrar variables. Para declarar una variable en JS poner var nombrarla=(= es
valor temporal) asignarle un valor numerico; NO PONER COMILLAS Para cambiar el valor de la
misma variable poner el nombre de esta=nuevo valor y a partir de ahí hacia abajo se tiene en
cuenta el nuevo valor, lo declarado antes del cambio de valor, se ejecutara con el viejo valor
CLASE 5 LOGICA DE PROGRAMACION
Para redondear un numero en JS poner Math.round(variable que se desea redondear) Al
nombrar variables, no poner la primera letra en mayuscula. Var se coloca cuando uso una
variable por primera vez y no solo se pueden poner números sino también texto
 CLASE 6 LOGICA DE PROGRAMACION
Para no repetir constantemente document.write(“<br>”) poner en una var=”<br>” y si quiero
poner mas de uno repetir la etiqueta br según las veces que deseamos. Una buena practica es
usar nombres representativos de lo que hace la variable
CLASE 7 LOGICA DE PROGRAMACION
Para no repetir líneas de código se utilizan funciones, reciben instrucciones y devuelve un
resultado, sirve para organizar el código ya que se puede reutilizar de forma ilimitada
retornando diferentes resultados (ej alert, document.write y son por defecto) SIEMPRE INICIAN
Y TERMINAN CON () RECIBEN PARAMETROS (ES LO QUE ESTA DENTRO DEL PARENTESIS), usar
verbos a la hora de nombrar una función. Para crear una función ir al inicio del código en JS,
poner function nombre de la funcion() { instrucciones que realiza la función, indentar adentro}
para llamar a la función poner su nombre();
CLASE 8 LOGICA DE PROGRAMACION
Para comentar algo poner // para poner una función con parámetros poner al lado de la
variable y dentro del paréntesis(variable del parámetro) luego dentro de las llaves imprimir la/s
variables del parámetro/s
CLASE 9 LOGICA DE PROGRAMACION
Para calcular el IMC, hacer 2 variables (una con el peso y otra con la altura) luego otra donde se
calcula el imc=variable del peso/(variable de la altura * variable de la altura) luego llamar a la
función creada antes (la de imprimir) para ver el resultado. Para la formula de IMC, ponerla en
una función con parámetros luego llamar la función de imprimir para que muestre lo calculado
junto con texto para que una vez que hayamos configurado en las variables de peso y altura
poner el nombre de la función (variable del peso, variable de la altura) IMPORTA EL ORDEN.
Para simplificar lo anterior a la función donde se calcula el imc ponerlo como tercer parámetro
el nombre luego llamar a la función y rellenarla según lo establecido en los parámetros ej
(3,40,”Juana”)
CLASE 10 LOGICA DE PROGRAMACION
La cantidad de parámetros (INPUT) que podemos crear es ilimitada pero no es lo ideal. Por
ejemplo, para calcular el promedio de IMC entre 2 personas, sumarle a la función otros 3
parametros y repetir el calculo de IMC pero con las variables nuevas luego poner la función
imprimir con las variables de los nombres y calcular el promedio ahí mismo después llamamos a
la función y completamos según los parámetros. Las funciones son creadas para retornar algo
(con el return al lado pongo lo que quiero que me retorne o también se pueden hacer calculos)
después de ejecutar la acción (output). Una forma de calcular el promedio de IMC entre 2
personas en una sola línea de código es llamando a la función imprimir (“texto”+(nombre de la
función que calcula el IMC(completar parámetro)+repetir lo de antes))/2 HACER LAS ACCIONES
POR FUERA DE LA FUNCION Y UNA ACCION A LA VEZ (OSEA PONER POCAS ACCIONES DENTRO
DE LA FUNCION PARA QUE SE PUEDA USAR EN MAS ESCENARIOS )
CLASE 11 LOGICA DE PROGRAMACION
Para captar datos del usuario en JS hay que usar la función predeterminada prompt(“algo”)
luego en la consola del desarrollador nos va a aparecer lo ingresado y para que se almacene en
una variable lo escrito poner var algo=prompt(“lo que escribimos antes”) para concatenar con
una variable lo anterior antes de las comillas dentro del prompt poner el nombre de la variable
cuyo contenido queremos que muestre+”el texto que aparece en el prompt”)
CLASE 12 LOGICA DE PROGRAMACION
Para calcular la cantidad de puntos de un equipo de futbol, hacer una variable tipo var con las
victorias= promp(“preguntar cantidad de victorias”) lo mismo con empates luego para calcular
los puntos hacer una variable con los puntos totales= variable con las victorias* cantidad d
epuntos que se hace por cada victoria+ variable de empates luego imprimir el resultado
PRIORIZA LA MULTIPLICACION, ctrl o para abrir la carpeta de archivos desde el navegador. El
prompt, no importa lo que pongas, lo toma como un string. SI QUIERO SUMAR NUMEROS
PONER parseInt porque si pongo un numero como texto y lo sumo con un numero SE
CONCATENA NO SUMA (para multiplicación se hace normalmente, no ocurre. Ver esto en
archivo ligafutbol línea 19 y 20)
CLASE 13 LOGICA DE PROGRAMACION
Para hacer un condicional en JS, poner If (variable a evaluar <>= operadores aritméticos numero
o variable){acción en caso de que el condicional se cumpla}
CLASE 14 LOGICA DE PROGRAMACION
Para aplicar lo anterior, ir al archivo de IMC para que no solo calcule el imc sino que nos diga la
clasificación poner la (variable donde esta calculado el IMC del usuario <18.5){texto que quiero
que aparezca}
CLASE 15 LOGICA DE PROGRAMACION
Para crear un juego de adivinanza poner una var con el numero que el usuario debe adivinar y
otra con el numero que pone el usuario=parseInt(prompt(“algo”)) luego poner 2 condicionales:
una para cuando los números coincidan y el otro cuando los números no coincidan. Para poner
cualquier numero al azar poner Math.random()*el máximo ej 10 por lo tanto puede salir
cualquier numero del 0 al 10 y para que este numero no sea decimal poner
Math.round(Math.random()*el máximo). Si tenemos muchas instrucciones poner if y si son
pocas if-else (si, sino. Se pone el else cuando si no se cumple la condición del if, se ejecute la del
else)
 CLASE 16 LOGICA DE PROGRAMACION
Para calcular los años en los que hubo mundial, poner una variable cuyo valor sea el año del
primer mundial. Los loop son iteraciones de código en función a una condición entonces para
que el programa calcule desde 1930 hasta el 2018 en que año hubo mundiales sin repetir
código poner while(variable donde esta el primer año del mundial <=2022{acción/es}
IMPORTARTE SALIR DEL WHILE SINO HAY PROBLEMAS EN LA COMPU, si el valor de la variable
es mayor a la condición, nunca entra y no se ejecuta nunca. Para mejorar el programa, antes de
entrar al bucle while preguntarle al usuario hasta que año quiere saber los mundiales
CLASE 17 LOGICA DE PROGRAMACION
Para hacer la tabla de multiplicar, poner una variable cuyo valor sea el primer numero que
vamos a calcular en la tabla después poner while (variable anterior<= numero hasta el cual
queremos calcular la tabla){acción/es y para que cambie el valor en cada iteración poner la
variable del incio=repetirla+1} Para hacer lo mismo con el bucle for, se divide en tres partes
que están separadas por un punto y coma. La primera se usa para declarar la variable que
usaremos como contador, la segunda para la condición de repetición y la última para el
incremento de la variable contador. (var numero=1, numero<=4; numero++){acción/es} por
ejemplo.
CLASE 18 LOGICA DE PROGRAMACION
Para que un programa sea genérico y no limitado, preguntarle al usuario la cantidad de
miembros de su familia con un prompt luego creo una variable contador y la inicializo en uno
después inicializar en 0 una variable con el total de las edades (aca se acumula la suma de las
edades de cada miembro) (aca se acumula la cantidad de miembros de la familia) poner un
while mientras contador sea menor o igual que la cantidad de miembros poner aquí dentro un
prompt que pregunte la edad de cada uno, PARA EVITAR QUE EL WHILE SEA INFINITO debajo de
lo anterior aumentar++ la variable contador después antes del prompt de la edad y para que se
acumulen abajo del prompt y antes de incrementar la variable contador poner el nombre de la
variable con el total de las edades= repetir esta variable+ la variable del prompt que consulta
las edades afuera del bucle imprimir INICIALIZAR VARIABLES FUERA DEL WHILE para calcular el
promedio, hacerlo afuera del while
CLASE 19 LOGICA DE PROGRAMACION
Para que el usuario tenga un numero de intentos en el juego de la adivinanza, nombrar un var
con los intentos=cantidad de intentos y poner los condicionales y el prompt dentro del
while(variable del contador<=variable de los intentos) al contador inicializarlo en 1 dentro del
bucle y fuera de los condicionales aumentar el contador(para que iguale al valor de la variable
con la cantidad de intentos y el bucle deje de funcionar) poner un break cuando la condición se
cumpla
 CLASE 20 LOGICA DE PROGRAMACION
Para hacer una tabla de 3x10 rellena con * poner en un bucle for
anidado(variable=1;variable<=3;variable++){ for(variable con las columnas=; columnas
<=10;columnas++){algo}}
CLASE 21 LOGICA DE PROGRAMACION
Input (<input/>)es un elemento de html donde el usuario completa con lo que quiere en un
campo, button es un botón. Para que el usuario ponga algo en el imput y ver si coincide con el
secreto, ir a javascript y poner un var con el secreto, luego una llamada imput (comunica el
código html y js)=document.querySelector(“nombre de la etiqueta que quiero rescatar”)
trayendo el objeto de la etiqueta de HTML a Javascript después hacer una función sin
parámetros y poner un if (parseInt(nombre del var con el queryselector.value ESTO SIGNIFICA
LO QUE INGRESA EL USUARIO EN EL IMPUT)== variable donde esta el
secreto{acción}else{acción} cerrar la función después hacer lo mismo que hicimos con el input
pero para el button (aca extrae lo que se hace al apretar el botón para chequear) abajo poner el
nombre de la variable con el button.onclick=nombre de la función con los if;
CLASE 22 LOGICA DE PROGRAMACION
Para hacer que el numero desaparezca una vez que lo adivinamos o no, antes de cerrar la
función y fuera del cierre del if variable con el input.value=” “ si queremos que el cursor
aparezca una vez que apretamos el botón y no quede en blanco hacer igual que la línea anterior
pero con un focus() y no un value, para que el cursor aparezca desde el inicio y no solo cuando
apretamos el botón poner la linea anterior debajo de la declaración de los var del inicio
CLASE 23 LOGICA DE PROGRAMACION
Para evitar repetir muchos condicionales, hay que usar arrays (pueden ser cualquier tipo de
dato en su interior). Para poner un array poner var nombre del array=[valor1,valor2….] y si
quiero imprimir un elemento en especifico nombre del array[numero de índice] LA PRIMERA
POSICION ES 0
CLASE 24 LOGICA DE PROGRAMACION
Para recorrer un array, usar un for (var contador=0; contador<cant elementos;contador++)
{acciones y si es un if (variable a comparar== nombre array[variable contador]} Para que no
compruebe todos los casos en caso de que uno sea verdadero(caso texto_y_boton) y ponga
que si o si erre cuando acerté a 1, arriba hacer un var cuyo valor sea false luego repetir esta
variable dentro del if donde se acerto y cambiar su valor a true junto con un break, fuera de ese
if hacer otro donde si esta variable ==false{accion}
 CLASE 25 LOGICA DE PROGRAMACION
Para no alterar constantemente la cantidad de elementos en el for, después del < poner el
nombre del array.length
CLASE 26 LOGICA DE PROGRAMACION
La función push sirve para guardar los valores del array y para eso poner var nombre=[] nombre
del array.push(valor con el que se rellena o Math.random()) repetir lo anterior las veces a
elección. Pero una forma mas eficiente de llenar un array con números random es crear una
función sin parámetros que retorne math.round y math.random luego crear otra donde se
determinan la cantidad de números random a generar con un parámetro que es la
cantidad{crear el array vacio[] e inicializar el contador del while en 1 y la condición dentro de
este es mientras contador <=parámetro{generar una variable que contenga el numero
generado=función que genera este numero() luego poner la variable del array.push(variable
con el numero generado) variable contador++} fuera de este retornar el array y afuera de esta
función nombrar un var= nombre de la función de antes(poner la cantidad de números random
a generar) y si quiero ver estos valores, console.log(var de antes) ir a inspeccionar<console para
verlo

CLASE 27 LOGICA DE PROGRAMACION

Para evitar generar números random repetidos, antes del for inicializar un var con false dentro
del while con la función poner un for (var donde esta la posición=0; esta var< nombre del array
con los secretos.length; variable contador++){if (variable donde esta el numero
random==nombre del array con los secretos [variable contador]){ variable con el false=true
break;} fuera del for poner otro if donde la variable booleana==false{que ingrese los nombres a
la variable y para eso poner el nombre del array.push(variable con el numero aleatorio) e
incrementar el contador del while} NO ANDA, CHEQUEAR EN GITHUB EL CODIGO
CLASE 28 LOGICA DE PROGRAMACION
Para que al generar números random no incluya al 0, antes del for poner un if (variable donde
esta el numero aleatorio!=0{que ejecute el for}
CLASE 29 LOGICA DE PROGRAMACION
Para crear graficos con HTML, usar canvas (metodología para realizar proyectos y es tipo
pizarra) poner la etiqueta canvas width (ancho)=”medida” lo mismo con height (alto), sirve para
crear el área a graficar, para conectarla con JS crear un var=document.querySelector(“poner la
etiqueta que quiero que se vea”) luego crear otro var con el pincel= nombre del var donde esta
el query.getContext(“poner la cantidad de dimensiones que seria en este caso 2d porque son el
ancho y largo);
CLASE 30 LOGICA DE PROGRAMACION
Para comenzar a rellenar el canvas (esta en el mismo archivo que la clase anterior) poner en JS
el nombre de la variable con el get context.fillRect(tiene 4 parametros y uno es para la posición
inicial con respecto a las ejes x e y, y para que avance en el eje horizontal, para que avance en el
vertical) y para cambiar el color en vez del fillRect poner fillStyle=”color en ingles”
CLASE 31 LOGICA DE PROGRAMACION
Para hacer un triangulo (esta en el mismo archivo que la clase anterior) nombre del var con el
pincel.definir el color e indicar una dirección con beginPath() para que el pincel ‘viaje’ abajo
poner moveTo(movimiento sobre el eje x, movimiento sobre el eje y) y para que dibuje lineas
lineTo(movimiento sobre el eje x, movimiento sobre el eje y) y para rellenar fill() y para una
circunsferencia, en vez de moveTo, usar arc(movimiento sobre el eje x, movimiento sobre el eje
y, tamaño del circulo en radio, angulo inicial, angulo final que es multiplicar*3.14) en este link
hay documentación importante https://developer.mozilla.org/es/docs/Web/API/Canvas_API
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D
CLASE 32 LOGICA DE PROGRAMACION
Para ponerle bordes al cuadrado poner la variable con el pincel.strokeStyle=”nombre del color
en ingles” luego poner la variable del pincel.strokeRect(los mismos valores que pusimos en el
fillRect) se pueden crear funciones con canvas poner function variable(){poner lo del
fillstyle,strokestyle también antes de poner esto poner el queryselector y getcontext} luego
para llamarla hay que poner el nombre de esta() VER EL GITHUB

CLASE 33 LOGICA DE PROGRAMACION

Para poner varios cuadrados, hacer una función con function nombre(){poner lo del
queryselector, get context, fillstyle, fillrect, strokestyle, strokerect}
CLASE 34 LOGICA DE PROGRAMACION
Para especificar la cantidad de veces que se repite la función, a lo anterior ponerle un
parámetro(posición horizontal, posicion vertical) luego en el fill y stroke rect reemplazamos el
numero por el nombre del parámetro donde corresponda
CLASE 35 LOGICA DE PROGRAMACION
Para llenar todo el canvas con cuadrados, fuera de la función crear la variable contador luego
hacer el while (contador<ancho del canvas){llamar a la función que creamos y llenar los
parámetros abajo variable contador=contador+numero que quiero que vaya corriéndose. Para
hacer lo mismo pero con for(var contador=0;contador<ancho del
canvas;contador=contador+numero que quiero que vaya corriéndose){poner lo mismo que en
el while}
CLASE 36 LOGICA DE PROGRAMACION
Para que se ponga una alerta al hacer clic, hacer una function sin parámetros y adentro poner
alert “algo” afuera poner el nombre de la variable con el queryselector.onclick=nombre de la
función. Lo que hace es que si el usuario hace click adentro del canvas se dispare el alert
CLASE 37 LOGICA DE PROGRAMACION
Para saber la posición en la que el usuario hizo el clic, ponerla a la función un parámetro y antes
del alert hacer un var= nombre del parámetro.pagex repetir lo anterior pero poniendo pagey.
Las coordenadas son teniendo en cuenta la pagina entera, no el canvas pero para que esto no
pase al lado del pagex – variable con el query selector.offsetleft (ósea lo que sobra a la
izquierda) y con el pagey lo mismo pero poniendo offsettop (ósea lo que sobra arriba). Para que
al hacer clic se haga un circulo, hacer una función igual a la anterior pero sin el alert y en lugar
de este, poner la variable con el getcontext. Fillstyle=”un color en ingles” esta
variable.beginPath() sirve para empezar a hacer el circulo luego esta variable.arc(variable con el
click en eje x, variable con el click en eje y, radio, angulo, tamaño*numero pi) luego esta
variable.fill() para rellenar según fillstyle y para llamarla es lo mismo que la anterior
CLASE 38 LOGICA DE PROGRAMACION
Para que el programa cree animaciones automáticamente, hay que crear una función para
diseñar círculos(posición en el eje x, posición en el eje y, radio){variable con el
getcontext.fillstyle=”color en ingles” variable.beginPath() después esta variable.arc(parámetro
con el eje x, parámetro con el eje y, parámetro con el radio, tamaño del angulo, tamaño del
circulo*Math.PI) variable anterior.fill() luego afuera se llama la función(y completar los
parámetros)
 CLASE 39 LOGICA DE PROGRAMACION
Para que aparezca el circulo a lo ancho del canvas, afuera de la función anterior poner un
for(var contador en eje x;contador anterior<ancho del canvas;contador++){llamar a la
función(contador, completar parámetros)} y para que se distingan los círculos realizados poner
una funcion donde se limpie la pantalla y sin parametros donde se pone la variable del
getcontext.clearReact(mismas coordenadas que en el fillrect) PARA HACER LO DEL SETINTERVAL
BORRAR EL FOR
CLASE 40 LOGICA DE PROGRAMACION
Usar una función donde cada cierta cantidad de tiempo se debe graficar y esa es
setInterval(nombre de la función donde se grafica(parámetros de esta),tiempo en
milisegundos)) poner esto en una function sin parámetros) luego crear un var tipo contador=0
despues una función para actualizar la pantalla sin parámetros{funcion donde se limpia la
pantalla()función donde se diseña el circulo(completar parámetros siendo el primero el
contador) variable contador++} fuera de la funcion poner el setInterval(funcion de antes,
velocidad de tiempo en milisegundos) al ejecutarse el circulo se va moviendo hacia lo ancho del
canvas
CLASE 41 LOGICA DE PROGRAMACION
Para que lo del video anterior se ejecute (que un circulo se ponga en cualquier lugar del canvas)
seguir con lo anterior sacando la aprte donde se llama a la funcion, a la funcion donde se hacen
los circulos sumarle un parametro que seria color y en el fillstyle poner el nombre de este
parametro luego llamar a la funcion y completar paarmetros(poner primero la que tiene un
radio mayor y al final el menor) si queremos podemos poner un var radio=valor minimo y luego
en los parametros ponemos esta variable + sumar otro numero, para que el numero de los
parametros sea random poner una funcion cuyos parametros sean los 2 ejes y aquí dentro
poner todos los llamados de la funcion que hacen los circulos y completar con los nombres de
los parametros afuera de esta funcion poner el maximo numero con un var para los ejes x e
y=nombre de la funcion con el Math.random(completar parametro)luego llamamos a la nueva
funcion y ponemos como parametros los var de recien luego hacer una funcion para que se elija
de forma aleatoria la posicion(valor maximo){return Math.floor lo que se hace es redondear
para abajo(Math.random()*variable del parametro)
CLASE 42 LOGICA DE PROGRAMACION
Para que al hacer click en el circulo pequeño aparezca un mensaje donde diga que acertamos,
poner de vuelta el setInterval de antes y a las var con el eje x e y junto con el invocamiento de
la funcion cuyos parametros son los var anterior ponerlo dentro de la funcion donde se invoca a
la funcion que limpia a la pantalla ponerlo arriba del contador. El programa debe tomar una
serie de rangos posibles para que haya mas probabilidades de acertar, se debe capturar el
evento del click para eso hay que poner la variable con el queryselector.onclick=nombre de la
funcion con el alert, para crearla debe teerr como parametro el evento y adentro el alert, un
var=parametro.pageX -variable con el query selector.offsetLeft hacer lo mismo pero con pageY
y offsetTop esto sirve para que nos devuelva la posicion de cuando apretamos el cursor luego
se comparan los var anteriores con los x e y random generados de antes if((var con pagex <var
con el x random + variable del radio ACA SE CALCULA EL VALOR HORIZONTAL Y EL PERIMETRO
DERECHO)&&(var con pagex> var con el x aleatorio – radio ACA SE CALCULO EL PERIMETRO
IZQUIERDO OSEA EN EL CIRCULO PEQUEÑO)&&(lo mismo que el primer parentesis pero con el y
QUE SERIA EL VALOR VERTICAL)&&(lo mismo que el segundo paréntesis pero con el y)) poner
adentro el alert
En el código habrás visto tres eventos nuevos que estamos usando, ellos
son onmousemove, onmousedown y onmouseup, donde el primero permite capturar el
movimiento del mouse, el segundo sirve para ejecutar un código cuando el mouse está
presionado y el tercero cuando el botón del mouse es soltado.
CLASE 43 HTML
Para poner automáticamente párrafos en visual, ir a ver, ajuste de palabra y listo
CLASE 44 HTML
Etiqueta strong para negrita, para la itálica em
CLASE 45 HTML
DOCTYPE. En este caso, el navegador al momento de abrir la página no sabe que yo le estoy
mandando una versión 5 de HTML. Para ello se creó, existe el DOCTYPE, que aquí ya me
aparece por defecto, mi IDE me lo recomienda, y siempre viene con un signo de admiración al
inicio. Debajo de etiqueta anterior, html luego al final del código cerrarla
CLASE 46 HTML

Una etiqueta informativa la vamos a colocar después del HTML que se llama meta, la cual es la
definición de cuál es el diccionario que queremos usar, que en nuestro caso colocamos charset,
la propiedad charset, y definimos nuestro diccionario UTF-8.

Esto significa que vamos a usar este diccionario y este diccionario UTF-8 ya contiene la mayoría
de los idiomas de los lenguajes del mundo y sobre todo los idiomas que provienen del
indoeuropeo, del latín, que son los idiomas como nuestro español, el portugués, el italiano, el
francés, que usan caracteres especiales y acentuaciones. Debajo de html <meta charset=”UTF-
8”> Ahora vamos a definir el idioma en el que está siendo construida nuestra página. Eso lo
definimos aquí en la etiqueta HTML, donde le definimos una propiedad lang, de language, en
inglés, y aquí le pasamos como parámetro es, de español. Queda asi: <html Lang=”es”>
 CLASE 47 HTML

Dentro del head, que en inglés es cabeza, estoy colocando aquellas etiquetas informativas, que
informen. Y voy a utilizar otra etiqueta que se llama body, del inglés cuerpo, donde aquí defino
todas las etiquetas de contenido de nuestra página.

Entonces hago exactamente lo mismo, coloco el cierre de body, la abertura y el cierre de body,
y aquí voy a mejorar nuestro formato, y voy a seleccionarlo, y un tab, para identar
correctamente. Voy a dar un espacio aquí y otro espacio aquí. Dejar un espacio al principio y
final del body

CLASE 48 HTML

CLASE 49 HTML

Dentro del head se pone <style> nombre de la etiqueta{propiedades ej

text-align:center}</style> o meter lo anterior en un archivo .css y luego enlazarlo al html

CLASE 50 HTML

Para colores, no poner el nombre sino código hexadecimal #

CLASE 51 HTML

Para poner un id en css usar #

CLASE 52 HTML

CLASE 53 HTML

CLASE 54 HTML

En un equipo de front end, hay una persona que se encarga del user experience y el user
interface, que básicamente es la experiencia del usuario en ese sistema, en esa página web, y la
interfaz del usuario, que es todo el sistema en sí donde el usuario interactúa.

Y también, debido a que la generación de contenido es una buena estrategia para conseguir
clientes, muchas empresas están optando por contratar un copywriter que es un generador de
contenido, generador de artículos, generador de informaciones que llamen la atención y que
llamen clientes, y que también muchas veces esa u otra persona se encarga del SEO, que es el
Search Engine Optimization, que igual ahorita lo vamos a explicar con un poco más de detalle.

Básicamente, el equipo es responsable del diseño del código del sistema de la página web. Para
eso necesita tener uno o más programadores. Este programador necesita dominar algunos
lenguajes que son racionalmente los más comunes o en realidad los más básicos: HTML, CSS y
JavaScript. El programador Front End, el programador de la página, es un persona con un skill
con bastante lógica y que básicamente él es el que coloca las manos en la masa, las manos en el
código y quien crea todo este código de nuestra página.

Luego tenemos, el user experience, el responsable por el user experience y el responsable por
el user interface. Por lo general también se lo conoce como el diseñador. Entonces va a ser una
persona que va a tener mucho contacto con el cliente, el cliente puede ser un cliente interno,
externo, es decir quién va a usar esa aplicación, quién va a usar ese sistema web.

Y el objetivo es que esta persona le pase todas las especificaciones a nuestro programador
Front End, o sea que esta persona diseñe un sistema que sea amigable, que sea friendly para el
usuario, para el cliente, que sea fácil de usar, básicamente eso, que sea bonito, atractivo, que
tenga un visual atractivo, y va a trabajar muy pero muy de la mano con nuestro programador,
este rol puede estar en una sola persona o puede estar distribuido en más personas. Y por
último, el copywriter que se encarga también del SEO, o pueden ser personas separadas, va a
depender nuevamente del tamaño de la empresa.

Pero hoy en día es muy común tener en los equipos de Front End un generador de contenido,
alguien que escribe artículos, alguien que va alimentando el blog de las empresas, porque como
les decía es una buena estrategia de atraer, de capturar clientes la generación de contenido.
 Y el SEO, el Search Engine Optimization, es básicamente usar palabras llaves y algunas
estrategias para que los motores de búsqueda de los buscadores de Google, Safari, en fin, de
los principales buscadores, navegadores que tenemos ahí en el mercado, puedan encontrar
nuestra página, puedan encontrar nuestros artículos que escribimos.

CLASE 55 HTML

Para listas, poner <ul> que es lista desordenada poniendola al inicio y fin de los ítems y poner
cada item dentro de <li></li> asi aparecen los ítems en circulo negro. Para hacer referencia a
varios elementos, poner class y en css se pone con un .

CLASE 56 HTML

Vamos a dividir nuestra página en un bloque, con el contenido, con este contenido de la
descripción, y el otro con el contenido de los diferenciales. Para ello usamos una etiqueta que
se llama div, de división

CLASE 57 HTML

Para poner una imagen al lado de una lista y que esta no quede abajo, en el css poner
ul{display:inline-block} y para que el contenido de la lista quede mas prolijo abajo del display
poner vertical-align: top

CLASE 58 HTML

CLASE 59 HTML

CLASE 60 HTML

CLASE 61 HTML

Para que el navegador sea en línea, ir al css y poner nav li{display: inline} y para trasnformar el
texto es text-trandform:uppercase y para que el subrayado se vaya text-decoration: none

CLASE 62 HTML

Enlazar reset.css antes de la hoja de estilos que creamos, es como el normalize

 CLASE 63 HTML

Para posicionar el nav, ir al css y poner posición: relative después para que se mueva arriba es
top y a la derecha es right

CLASE 64 HTML

CLASE 65 HTML

Para poner secciones tipo cartas, poner en la etiqueta main el texto que queremos que
aparezca de titulo de cada una de las secciones

CLASE 66 HTML

Poner a cada uno de los títulos en un <li> dentro de un <ul> y para rellenar cada carta, dentro
de los li poner las etiquetas que queremos ej p o img

CLASE 67 HTML

Al ul poner un class y en css .configurarla li{display: inline-block poner aca el width para separar
cada carta} para el resto de configuraciones .nombreclass{el resto ej width} y si queremos
configurar una etiqueta especifica hacer igual que el li pero en vez de li poner la etiqueta que
corresponde

CLASE 68 HTML

Box sizing:border-box sirve para evitar que una de las cartas quede debajo de otra

CLASE 69 HTML

Para configurar los bordes, en el class con li poner border-color, border-radius, border-
width(ancho del borde) y border-style sino poner border: ancho del borde estilo del borde
#color

CLASE 70 HTML

Dentro del class de antes poner border-radius

 CLASE 71 HTML

Para que al posicionarse en una sección del nav o en una carta, esta cambie de color, poner en
el css el nombre de la etiqueta :hover{configurar lo que queremos ej color, text
decoration:underline para subrayar}

CLASE 72 HTML

El active captura el click del usuario y se pone en css de la misma forma que el hover, para que
al pasar por la carta se agrande el titulo ir al hover al lado poner la etiqueta afectada y
aumentar Font-size

CLASE 73 HTML

CLASE 74 HTML

Unicode-table.com pagina con todos los caracteres especiales, &copy para la c de copyright

CLASE 75 HTML

Para la sección de contacto, en un nuevo contacto copiar y pegar lo del otro archivo(gasta el
header y después solo el footer) para nombrar el css poner style_algo.css

CLASE 76 HTML

Para el formulario, dentro del main poner un form <label for=”nombre del campo”> nombre del
campo</label> luego input type=”text” id=”lo del for” para el enviar en vez de text poner
submit value=”lo que va adentro del botón”

CLASE 77 HTML

Para centralizar los campos, en css poner main{width, margin: 0 auto}

CLASE 78 HTML

Input type=”radio” para que me aparezca para seleccionar una opción y poner en el value=”lo
que quiero que diga esa opción” y para que solo se pueda seleccionar una opción en cada input
type=”radio” poner el name=”repetir este nombra en cada input radio para indicar que
pertenecen al mismo grupo”

CLASE 79 HTML

Para acomodar los input luego del id ponerle un class y en css poner lo mismo que en el form
input

CLASE 80 HTML

En css, primero se toma en cuenta el id, luego class y por ultimo etiqueta (cuando los 3 tienen el
mismo nombre) y si el style esta definido en html, vale mas que todo lo anterior

CLASE 81 HTML

Para que se desplieguen varias opciones poner select y adentro option>lo que dice la opción</>

CLASE 82 HTML

Mobileinputtypes.com reglas para hacer formulario para celulares

CLASE 83 HTML

Para que un campo sea obligatorio, al final del input poner required y si quiero ponerle al
usuario un tipo de modelo de como quiero que complete ese campo después del required
poner placeholder=”modelo” para el check venga ya chequeado al final del label input type
poner checked

CLASE 84 HTML

Para agrupar ítems que pertenecen al mismo grupo, en vez de div, poner fieldset y para colocar
los títulos dentro de un conjunto de item poner legend

CLASE 85 HTML

Para configurar la duración de la transición del hover en el class (no del hover) del botón poner
transition:números ej 5s background donde se le dice que cambie el fondo y para cambiar el
cursor en css poner cursor=pointer
 CLASE 86 HTML

Para dar un efecto visual de aumentar el tamaño de nuestro elemento cuando nuestro mouse
se posiciona sobre él poner en el css del hover transform: scale(numero al que quiero que
aumente ósea se multiplica)

CLASE 87 HTML

Sino en vez de scale poner rotate(nro de gradosdeg)

CLASE 88 HTML

Para hacer una tabla , poner la etiqueta table<tr> para las filas y dentro de esta etiqueta poner
<td> para las celdas

CLASE 89 HTML

Para ponerle encabezado a la tabla, poner la etiqueta thead y para las celdas que pertenezcan a
este en vez de td es th y el resto de las etiquetas son dentro de la etiqueta tbody

CLASE 90 HTML

Para ponerle estilo a la tabla ir al css y poner table{margin, } thead{background, color, Font-
weight} td, th{border, padding}

CLASE 91 HTML

Poner el reset en el index antes del style.css luego copiamos y pegamos el header del home y lo
ponemos aca (borramos el anterior) lo mismo con el footer luego meter la info de la pagina
dentro de un main

CLASE 92 HTML

Id para alterar comportamiento y class para estilos

CLASE 93 HTML
Para poner el texto al lado de la imagen, en css cambiar la posición de la imagen con float:left e
ir a donde esta configurado el estilo del texto y poner clear:left(tiene que coincidir con el de
float) con esto se le dice a la pagina que solo se debe aplicar lo anterior a una parte especifica
del código

CLASE 94 HTML

Para importar tipos de letra de Google fonts, ir a embed y poner el link href y debajo de los css
ponerlo depsues para aplicarlo copiar lo que dice del css en la pagina y pegarlo dentro de la
etiqueta body en css

CLASE 95 HTML

Para poner la ubicación con Google maps, poner un section class junto con un h3 class, un p
luego ir a Google maps, poner la ubicación, compartir, incorporar un mapa, seleccionar el
tamaño, copiar y pegar lo del iframe en el html(dentro del section que creamos)

CLASE 96 HTML

Para poner un video, ir a youtube, ir al video, compartir, incorporar, copiar y pegar en el html

CLASE 97 HTML

Si pongo en un elemento inline block ir al html y no dejar espacios. Para separar los ítems entre
si, usar la propiedad line-height

CLASE 98 HTML

Uso de pseudo class el firstchild (tipo hover se pone) y sirve para decirle al css que al primer hijo
de esa clase configurarlo de cierta manera (last para ultimo)(nth-child(numero de item que
queremos ej 3, 2n significa para los pares)

CLASE 99 HTML

Para hacer un degrade, poner background: linear-gradient(colores en los que queremos el

degrade) lo hace en forma horizontal ----- para que sea tipo asi / pero para la izquierda poner
como primer parámetro 45deg y vertical 90deg y si quiero que un color en especifico ocupe un
tamaño en especial (por default ocupan un espacio proporcional en abse a la cantidad de
colores) al lado del color poner el porcentaje que quiero que ocupe ej 60% sino se puede usar el
radial-gradiant cuyos parámetros son los mismos que el linear
 CLASE 100 HTML

Para hacer una letra en especifica en negrita, vamos al class donde esta esa letra en el css y
reescribimos ese nombre::first-letter{Font-weight:bold} y para cambiar una línea en first-line y
para que haga algo antes(before) o después(after) colocar ::before o after según
corresponda{contexnt”lo que quiero que haga” } Para poner ítems de Unicode copiarlo, luego
en el css poner la clase donde están los ítems:before{content: “★”}

CLASE 101 HTML

Para ponerle estilo solo a un párrafo en especifico de una etiqueta, ir al css poner nombre de la
etiqueta> p{background: red por ejemplo} ósea seria elemento>hijo de esa etiqueta padre LO
ANTERIOR SOLO APLICA PARA EL PRIMER HIJO DEL ELEMENTO, para el resto de los hijos ir al css
y poner la etiqueta anterior al párrafo + p{background: violet por ejemplo} y para que el estilo
aplique a TODOS los párrafos después de cierto elemento en vez de + poner virguilla (alt 126)
tiene prioridad con respecto al + y para decir que aplique a todos los párrafos menos a uno en
especifico poner la clase donde están los párrafos p:not(#id del párrafo al que no se aplica)
{color al que no se le aplica al id} prioridad con respecto al ~

CLASE 102 HTML

Para que la dimensión de un elemento sea como resultado de un calculo en css poner al lado
del atributo: calc(porcentaje%-(cant pixeles*nro)) ideal para los usuarios que están en celulares

CLASE 103 HTML

Para poner opacidad, poner en css opacity: porcentaje o nro de opacidad sino en rga al final

CLASE 104 HTML

Para las sombras, box-shadow: (tiene 3 propiedades) ubicación en eje horizontal ubicación en
eje vertical degrado en px hasta donde quiero que la sombra llegue en px color y para poner
mas sombras separarlas con , y para sombras internas antes de los parámetros poner inset y
para texto es text-shadow. Pagina para probar sombras box-shadow generador en w3school

CLASE 105 HTML

Para que la pagina sea repsonsive, abajo del utf-8 poner meta name=”viewport”
content=”width-device-width” y en css @media screen and (max-width:480px){} es como un if
que dice que si encuentra una pantalla con un máximo de 480 px que haga lo que esta entre {}
 CLASE 106 HTML

Poner dentro del media la class con los textos{width: auto}

CLASE 107 GIT

Para que todo el equipo tenga la versión actualizada del código, una posible solución es colocar
un servidor específico para enviar nuestras alteraciones, entonces cuando finalizamos una
modificación, la enviamos a ese servidor.

Y si otra persona quiere mandar una modificación de su código, necesitamos una herramienta
que gestione el código y diga: “Esa versión en la que basaste tu código no es la más actualizada.
Hay una versión nueva”. Y así, no deja que se envíe directamente ese archivo. Lo que pide es
que antes de enviar las modificaciones, esa persona tiene que bajar la versión más nueva, para
que ahí pueda modificar solo la parte de código que tuvo cambios.

Y luego sí, pueda enviar ese código al servidor. A eso es a lo que se llama control de versión. Si
tenemos diferentes versiones del código, necesitamos un sistema que controle esas versiones y
para eso sirve Git. Git no es el único sistema que existe de control de versiones. Existe CVS,
SVN, Mercurial.

Sin embargo Git es uno de los más utilizados por unas características que, básica y
reducidamente, permite que tengas una copia del proyecto o un repositorio en tu
computadora, puedas trabajar sobre ella y después se envía para otros repositorios. A esto se
les llama repositorios distribuidos. Esto permite que puedas trabajar offline, antes de
comunicarte con otro servidor y que puedas enviar las modificaciones.

CLASE 108 GIT

Ir a git bash y poner $ git –version $dir o ls para que nos muestre todos los archivos y carpetas

CLASE 109 GIT

Poner en el bash $ cd toda la ubicación de un archivo luego git init ASI SE INICIALIZA y para
saber el estado del repositorio poner git status

CLASE 110 GIT

Para guardar la modificación de un archivo en git, $git add nombre del archivo y para agregar
todos poner un . y para chequear si esto ocurrió poner $ git status tiene que decir changes to
be commited y para decirle a git que hubo una modificación poner $git commit -m “mensaje
corto y descriptivo del cambio” luego $git config –global user.name o email“poner nombre”
SOLO HACER ESTO SI EL MENSAJE ES DISTINTO A [MASTER (ROOT COMMIT) ETC] master es el
commit base luego si ponemos $git status (despues de haber modificado el archivo) vemos en
color rojo modified: nombre del archivo luego para agregar esta modificación ponemos $git add
nombre del archivo que fue modificado luego ponemos de vuelta $git status y dice en verde
modified: nombre del archivo

 HEAD: Estado actual de nuestro código, es decir, donde nos colocó Git
 Working tree: Lugar donde los archivos realmente están siendo almacenados
 index: Lugar donde Git almacena lo que será commiteado, es decir, la ubicación
entre el working tree y el repositorio de Git en sí.
Además de eso, los posibles estados de nuestros archivos son explicados con detalle en este
link: https://git-scm.com/book/es/v2/Fundamentos-de-Git-Guardando-cambios-en-el-
Repositorio.
CLASE 111 GIT
Para ver todos los commit, poner $git log viendo el hash, $ git config –local user.name “colocar
el nombre” local es solo para este repositorio y para ver los commit resumido $git log –oneline
y para ver las modificaciones de los archivos pone run p en vez de oneline y si las líneas están
en verde, son las agregadas y para salir $:q, pagina https://devhints.io/git-log.
para ver los comandos

CLASE 112 GIT

Para que Git no monitoree algún archivo, poner $git status luego en el repositorio crear el
archivo .gitignore y adentro de este poner los archivos y carpetas/ que se deben ignorar
guardar y después poner lo del git status otra vez y debe aparecer .gitignore en rojo luego
agregar (add) el .gitignore al repositorio HACER COMMIT SOLAMENTE CUANDO FUNCIONE BIEN
EL CODIGO Y CUANDO SE REALIZAN ALTERACIONES Y/O CORRECCIONES

CLASE 113 GIT

Voy a crear una nueva carpeta. Para eso, antes de crearla acá adentro, vamos a hacer un $cd ..
y vamos a volver una carpeta antes, la carpeta donde está nuestro proyecto y voy a crear una
carpeta colocando el comando mkdir, espacio, y el nombre de la carpeta.

Luego, para poder acceder dentro de esta carpeta, hacemos cd, espacio, servidor/ y enter. Acá
adentro vamos a usar el comando git init pero como este servidor va a ser un repositorio de Git
que solo va a controlar las modificaciones o sea no voy a entrar en un archivo y editarlo acá,
solo va a servir para guardar las modificaciones.

Y entonces voy a pasar el parámetro --bare. Entonces colocamos git init, espacio, --bare, así se
escribe y que ese bare indica que este repositorio es puro. O sea solo contiene las
modificaciones de los archivos. No tiene una copia de cada uno de los archivos físicos de forma
que pueda acceder fácilmente a ellos.

Solo controla y trae unas facilidades que hacen que podamos acceder a ese repositorio como
remoto. Damos enter. Y creé ese repositorio y ahora tenemos el camino de nuestro repositorio
remoto. Entonces, ahora que tenemos este camino, hacemos "clic derecho + copiar" y vamos a
volver a nuestro repositorio que nosotros estábamos utilizando hasta la clase anterior.

Para eso hacemos un cd, espacio, punto, punto, enter, hemos vuelto a nuestra carpeta anterior
y ahora hacemos cd, espacio bruno, que es donde estaba nuestro proyecto anterior. Antes de
continuar vamos a ver las diapositivas. Hemos creado un servidor, pero ahora lo que tenemos
que hacer es poder decirle a nuestro repositorio actual que existe un servidor remoto al cual le
podemos enviar información.

Entonces sé que es un servidor remoto, remoto en inglés se dice remote, entonces lo que
tenemos que hacer es hacer git remote. Yo doy enter ahora, vemos que no pasó nada pero en
realidad lo que está haciendo es listar todos los servidores remotos que nuestro repositorio
conoce. En este caso no conoce ninguno. Dejen que voy a limpiar acá la pantalla.

¿Cómo hago para agregar un servidor remoto a nuestro servidor local? Lo que tenemos que
hacer es usar el comando git remote, espacio, add y para cada repositorio que yo quiera
agregar le voy a tener que poner un nombre. En este caso, le voy a llamar servidor local.
Entonces voy a agregar ahora servidorlocal y le pongo el camino para ese repositorio. Espacio,
clic derecho, paste y damos enter. Parece como si no hubiera ocurrido nada.

Pero si ahora hago git remote, doy enter, vemos que existe ese servidor local. ¿Qué tal si yo me
equivoqué en la dirección? ¿Cómo puedo saber si ese servidor local está apuntando realmente
a mi servidor? Bueno, lo que tenemos que hacer es usar git remote, espacio, -v. Damos enter y
acá vemos que nos está mostrando la dirección y noten esto, aparece un fetch y un push.

Fetch significa el lugar de donde nosotros vamos a obtener las informaciones de ese servidor
remoto. Y push es el lugar al que nosotros vamos a enviar informaciones. En este caso, como es
un servidor simple, nosotros vamos a utilizar el mismo camino para fetch y para push, pero si
tuviéramos una situación mucho más compleja podrían ser servidores diferentes.

Un dato de color: esa URL que yo puse acá, este camino a una carpeta, en realidad puede ser
casi cualquier cosa, cualquier cosa que tenga un servidor Git. Por ejemplo podría ser una URL
con algún servidor div Git, podría ser una máquina que esté dentro de nuestra red local, puedo
poner el camino de esa máquina, de esa carpeta que tiene un servidor Git, etcétera.
O bueno, como está acá en una carpeta localmente dentro de nuestra computadora también.
Genial Bruno, hemos creado nuestro repositorio remoto y ahora vamos a ver qué es lo que
ocurre por ejemplo si tenemos otra persona. Vamos a crear artificialmente como si existiera
otra persona que está interesada en nuestro proyecto.

Entonces lo que hacemos es hacer cd, espacio, punto, punto, estamos acá en git-y-github, en la
carpeta anterior. Y vamos a crear una carpeta mkdir, espacio y yo la voy a llamar de Ana.

Supongamos que la otra persona interesada se llama Ana y tiene una carpeta, sea acá
localmente dentro de mi misma computadora o por ejemplo podría ser en una red, en nuestra
red local por ejemplo. Doy enter y vamos a hacer cd, espacio, Ana, enter y ahora estamos
dentro de la carpeta de Ana. Vamos a hacer clear. Estamos en Ana, en la carpeta de Ana y
digamos que ella ahora quiere obtener los datos de nuestro repositorio. Esa acción se llama
clonar.

Ella quiere clonar nuestro repositorio. Entonces lo que ella va a hacer es hacer un git clone,
espacio y acá tiene que ir la dirección de nuestro servidor. Acá en Git Bash se trata un poco
diferente, no es la misma dirección como hemos puesto anteriormente. Antes hemos colocado
esa dirección, pero acá vamos a tener que colocar /c/Users/Alura/Documents/git/ y acá el
servidor.

Perfecto. Pero si yo lo dejo así como está, me va a crear una carpeta llamada servidor dentro de
la carpeta Ana. Pero yo no quiero que se llame servidor esa carpeta. ¿Qué tal si yo localmente
quiero que esa carpeta se llame por ejemplo, proyecto? Yo le voy a dar espacio proyecto. Enter.
Está clonando en proyecto todo lo que tiene dentro de servidor. Cuidado. Acá nos dice: "Parece
que estás clonando un repositorio vacío".
¿Por qué está diciendo eso, que estamos clonando un repositorio vacío? Si yo desde Bruno creé
esa conexión con el servidor remoto y ¿qué es lo que está ocurriendo? ¿Por qué está vacío? En
realidad lo que ocurre es que nosotros hemos creado esa conexión con el servidor remoto pero
no hemos enviado información a ese repositorio remoto.

Entonces ese repositorio remoto no tiene nada ahora. Y entonces cuando Ana hizo un clon, ha
clonado nada, o sea solamente ha hecho una conexión con ese servidor pero no tenemos
ningún archivo. Entonces, en el próximo video vamos a ver cómo enviar datos a nuestro
servidor remoto y cómo buscar esos datos de las modificaciones que contiene nuestro
proyecto. Hasta el próximo video.

CLASE 114 GIT

Ahora lo que tenemos es esta estructura de acá, tenemos el usuario Bruno, tenemos al usuario
Ana y tenemos un servidor, y lo que tenemos que hacer es hacer esto que dice acá esta flecha,
hacer que Bruno envíe datos al servidor.

Para eso vamos a ir a nuestra terminal, estamos dentro de la carpeta de Ana. Entonces vamos a
hacer un cd ../.. y acá vamos a ir a ciudad Bruno. Estamos dentro de nuestro proyecto. Vamos a
hacer un clear para limpiar un poco la pantalla.

Entonces voy a hacer un git remote acá, damos enter y vemos que tenemos nuestro servidor
local. Entonces lo que yo tengo que hacer es agarrar los datos que tengo dentro de mi
repositorio que tenemos acá adentro de Bruno y empujarlos hacia el servidor. Y dije empujar
porque en Git nosotros usamos el comando push, que es empujar en inglés.

Entonces lo que tenemos que hacer es usar git push pero ahora la pregunta es desde dónde y
hacia dónde vamos a enviar estos datos. Nosotros vamos a enviar los datos a servidor local y,
¿cuál branch? Nuestra única branch que tenemos por ahora es master, ya más adelante vamos
a hablar un poco más sobre branches.

Damos enter, y vean que tenemos todo esto es que está todo bien, se envió el 100%, está todo
bien y se creó una nueva rama llamada master dentro de nuestro servidor que es acá, esa ruta
dentro del servidor. Entonces, hemos enviado los datos a nuestro servidor y ahora vamos a
loguearnos como Ana.
Vamos a hacer un cd.. enter. Acá vamos a hacer cd Ana/proyecto, okay. Damos ls y acá debería
tener las cosas que envió Bruno al servidor pero no lo estamos teniendo. ¿Por qué? Porque lo
que hemos hecho es que Bruno envíe los datos al servidor, pero Ana ahora tiene que traer esos
datos del servidor a su repositorio de Ana. Entonces vamos a hacer eso.

Vamos a ver cuáles son los repositorios que tiene Ana. Vamos a hacer git remote, damos enter
y vemos que tenemos acá un origin. ¿Qué es ese origin? Ese origin es el nombre que pone Git
por defecto cuando nosotros agregamos un repositorio. Entonces lo que vamos a hacer ahora
es cambiar ese nombre origin para servidor local como tiene Bruno para mantener las
apariencias.

Entonces lo que vamos a hacer es utilizar el comando git remote rename origin local, damos
enter. Parece como que no pasó nada, pero si hacemos git remote, damos enter y ahora
aparece local. Acá cometí un error, lo llamé de local. Vamos a hacer de nuevo utilizando la
flechita para arriba, vamos a colocar git remote local, y vamos a llamarlo de servidor local,
como tiene Bruno.

Ahora sí, si hacemos git remote aparece servidor local. Volvemos al git pull, vamos a agregar el
repositorio servidor local. Entonces vamos a hacer un git pull servidorlocal, ahí. Y dentro de ese
servidor local, ¿cuál rama tenemos que traer? En este caso vamos a traer la rama master que
está dentro de ese servidor local. Es la única que estamos trabajando.

Ya como les dije vamos a hablar más adelante un poco más sobre ramas. Ahora vamos a hacer
master, damos enter y vemos que creó una nueva rama dentro de nuestro proyecto de Ana
llamada master, y ahora si nosotros damos un ls, vemos que tenemos nuestro index.

Vamos a ir un poco a Visual Studio Code, acá les voy a mostrar la carpeta Bruno y tenemos la
carpeta Ana. Vean que el archivo de Bruno está igual que el archivo de Ana, tienen los mismos
datos. Perfecto. Un detalle más a anotar es que dentro de la carpeta de Ana, del proyecto de
Ana, nosotros no tenemos este a.config ni la carpeta. Recuerdan que hemos colocado dentro
del git ignore esos datos.

Entonces Ana no va a sincronizar ese a.config ni esa carpeta. Ahora vamos a hacer por ejemplo
que Ana, dentro de Ana proyecto, ella modifica ahora por ejemplo el título de Integración
Continua. Digamos que lo coloca más completo y coloca el nombre de Integración Continua:
Madurez y Productividad en el Desarrollo de Software.

Supongamos que Ana agregó datos a este archivo. Vamos a guardar con un "Ctrl + S" y ahora
volvemos a nuestra terminal. Estamos dentro del proyecto de Ana. Vamos a hacer un git status
para ver si está todo bien y vean: acá aparece que se modificó el archivo index.html. Entonces
lo que vamos a hacer ahora es enviar esas modificaciones al servidor de nuevo.
¿Cómo hacemos eso? Bueno, vamos a primero agregar con git add. Esperen que primero limpio
la pantalla para que quede un poco más limpio. Vamos a hacer git add index.html. Damos
enter. Vamos a hacer un git commit -m. Todo esto ya lo hemos visto. Vamos a poner:
"Renombrando curso de Integración Continua".

Vamos a dar enter y ya modifiqué. Y ahora que lo agregué, ¿será que ya Bruno consigue ver
esas modificaciones? Bueno, en realidad no, porque todavía no envié al servidor los datos, ese
nuevo commit. Entonces lo que vamos a hacer es hacer un git push servidorlocal master.
Vemos que ahí envió los datos y ahora lo que vamos a hacer es volver para la carpeta Bruno.

Entonces vamos a hacer un cd, espacio, ../.. enter, ls, y acá tengo todas mis carpetas, vamos a
ad Bruno, enter y ya estamos en Bruno. Una vez que estoy en Bruno vamos a traer los datos del
servidor porque Ana nos dijo: "Bruno, modifiqué el archivo index, entonces podés hacer ya un
pull". Entonces lo que vamos a hacer es un git pull servidorlocal master.

Vemos que nos trajo datos, hizo un pull del master dentro del servidor, nos dice que ha
cambiado un archivo, se agregó una línea y se quitó una línea. Si nosotros hacemos un git log,
espacio, -pero, enter. Vemos cual línea se modificó, se quitó esa línea de acá y se agregó esa
"Integración Continua: Madurez, etcétera".

Vamos a salir de ese git log -p poniendo :q, enter. Ya hemos salido y con esto ya vemos que ya
podemos sincronizar los datos y modificaciones de los códigos que nosotros estamos creando
entre los integrantes de nuestro equipo. Pero, ¿y si no quiero crear un servidor local, mucho
menos compartir una carpeta en la computadora?

Si quiero poner los datos en un servidor en Internet. ¿Será que hay servicios como repositorios
Git online? Bueno, vamos a hablar un poco de eso en el próximo video.

CLASE 115 GIT

Y GitHub nos permite justamente crear repositorios git en internet. Entonces vamos ir a
GitHub.com. Esta es la pantalla principal que nos presentan. Nosotros podemos crear una
nueva cuenta o loguearnos.

En este caso yo ya tengo una cuenta creada acá en GitHub. Entonces voy a loguearme. Tengo
activado el doble factor de autenticación, así que enseguida vuelvo. Después de colocar el
factor de autenticación, esta es la pantalla que se nos presenta. En este caso como yo ya tengo
una cuenta creada, acá se presentan varias informaciones.

Pero ustedes si acaban de crear una cuenta nueva, posiblemente tengan menos cosas acá. Lo
que sí, independientemente de en cuál pantalla ustedes estén, por ejemplo si yo me voy al
GitHub, a alguna otra pantalla, siempre van a tener este botón + acá arriba a la derecha y con la
opción para crear un nuevo repositorio.

Entonces vamos a new repository y acá tenemos quien es el dueño de ese repositorio, en este
caso yo solamente tengo mi usuario, pero por ejemplo si perteneciera a una red, a un grupo de
personas, podría tener otras personas acá. Acá nosotros podemos poner cualquier nombre que
queramos, en este caso yo lo voy a llamar de Alura-git. Vamos a poner una descripción, en este
caso voy a poner: Lista de cursos para controlar con Git.

Acá tenemos la opción de que sea público o privado. Anteriormente GitHub no permitía crear
servidores privados para cuentas gratuitas, tenían que pagar un plan mensual, pero desde 2020
ya se consigue crear repositorios privados con colaboradores ilimitados. Así que pueden colocar
privado o público, no hay problema.

Una vez que dan a Create repository, va a demorar acá un poco y esta es la primera pantalla
que nos aparece cuando creamos el repositorio. Entonces por ejemplo acá nos está diciendo
que en nuestra terminal podemos hacer un git init, que nosotros ya lo hemos hecho, un git add
de los archivos, un commit con la frase y acá ir a una nueva rama, agregar el repositorio origin y
hacer un push.

¿Qué es lo que ocurre? Nosotros ya tenemos archivos en nuestro repositorio localmente,

entonces no es esto lo que nosotros queremos hacer. Lo que nosotros queremos hacer es esta
parte de acá, hacer un push a un repositorio ya existente. Nos está diciendo: "Es posible que
ustedes tengan activada esta opción de SSH".

Si es así, este primer comando va a hacer algo parecido con esto, que nos está diciendo que los
loguemos dentro, utilicemos el comando para agregar el repositorio Git, con un usuario Git y
una sintaxis acá rara que no conocemos por ahora, entonces si utilizáramos esta opción
tendríamos que agregar una aquí, con SSH y una cuestión de seguridad que en nuestro caso no
es necesario. Nosotros podemos directamente colocar acá en HTTPS acá arriba.

Y acá se simplifica bastante más el comando, en el sentido de que cada vez que nosotros por
ejemplo queramos hacer un push para subir los archivos a GitHub, nos va a pedir un usuario y
contraseña siempre, pero por lo menos no necesita de complejizar el proceso de crear una llave
SSH y con cosas de seguridad.

Entonces vamos a seguir lo que dice acá. Vamos a copiar este comando: "Ctrl + C", vamos a
nuestra terminal, siempre estando en nuestra carpeta personal, Bruno en este caso que es
donde tenemos el proyecto, vamos a copiar. Un segundo que copio lo que había seleccionado
anteriormente. Copiar, clic derecho, pegar y vamos a analizar un poco el comando.
Tenemos git remote que esa ya lo conocíamos. Add, git remote add y acá aparece origin. ¿Por
qué origin? Origin es el repositorio remoto principal por defecto, por convención se eligió ese
nombre, origin. Ustedes acá por ejemplo podrían cambiarlo por el nombre que ustedes
quieran. Podrían poner si quisieran GitHub, pero yo voy a mantener esa convención para
mantener un estándar.

Y acá tenemos la dirección de nuestro repositorio, vamos a dar enter. Ahora el siguiente
comando que nos dice que utilicemos es git branch -M main. Luego tenemos este git branch -M
main. esto ha sido cambiado recientemente a la hora de crear este curso. Anteriormente no era
necesario utilizar este comando para transformar nuestra rama master para el nombre main.
Por una cuestiones políticas y sociales tal vez es que ha cambiado esto para main.

Pero en nuestro caso, en este proyecto nosotros vamos a mantener por ahora el nombre
master de nuestra branch principal. Entonces vamos a saltear ese comando y vamos a ir
directamente para git push -u origin y acá vamos a cambiar por master. Entonces vamos a hacer
eso de aquí y voy a explicarles el comando.

Git push nosotros ya lo conocíamos de los videos anteriores. -u lo que hace es decirle a nuestro.
Perdón, antes de explicar voy a cambiar acá a master que es el nombre de nuestra branch.
Ahora sí, nuestro u significa que cada vez que nosotros hagamos un git push de nuestra branch
master siempre va a ir a origin.

Entonces nosotros por ejemplo podríamos colocar simplemente en el futuro git push nada más
y estando nuestra rama master y enviaría directamente nuestro repositorio. En este caso yo
prefiero sacar ese -u porque así me va a obligar a mí a estar poniendo siempre por ejemplo git
push origin master y me permite tener un poco más de control de qué cosas estoy enviando
para estar seguro de que lo que estoy haciendo, realmente está conforme a lo que quiero
hacer.

Entonces vamos a dejar simplemente git push origin master. Vamos a dar un enter, acá vamos a
necesitar loguearnos. En el caso de que ustedes estén en otra plataforma que no sea Windows
posiblemente no aparezca esa ventana y todo este navegador, simplemente ustedes van a
necesitar colocar los datos dentro de la terminal propiamente.

Una vez que nos logueamos en GitHub, nos va a pedir permisos para que unamos nuestro
repositorio a GitHub. Vamos a dar Authorize. Ahora podemos cerrar nuestra ventana y se van a
enviar los datos. Bien. Dice que se creó una nueva branch en GitHub y se envió a nuestra rama
master.

Vamos a volver a GitHub, vamos a dar un F5 para actualizar la página y acá tenemos los datos
de nuestro repositorio. Vean que no se envió ni el a.config ni la carpeta. ¿Por qué? Porque está
dentro de nuestro git ignore. Una vez que nos hemos logueado y hemos hecho el refresh a la
página, vemos que tenemos acá por ejemplo los archivos, tenemos acá en este icono los
commits que hemos hecho, todos los commits que hemos hecho localmente.

Por ejemplo si entramos en un commit en particular vemos qué archivo se modificó y qué
líneas se han modificado, qué líneas se han quitado y cuáles se han agregado. Volvemos para
atrás. GitHub nos provee una interfaz con muchas opciones y muchas cosas complejas.
Podemos ver acá las ramas que tenemos.

Nos está diciendo acá que tenemos una rama. Por ejemplo pdríamos si quisiéramos agregar
colaboradores, yendo a settings, manage access y acá podríamos invitar a colaboradores, otras
personas. Si tuviéramos el email de Ana podríamos agregarla a nuestro repositorio.

Como vemos, GitHub nos provee muchas, muchas opciones complejas que no vamos a ver
ahora en este curso, quizás en un curso futuro veamos más cosas sobre GitHub, pero por ahora
no nos vamos a adentrar demasiado en detalles en todas las opciones que nos ofrece. Entonces
ahora ya podemos compartir código, sea a través de la red de nuestra casa o en mi
computadora en este caso.

O utilizando GitHub, ya podemos gestionar el código, las versiones de nuestro código de forma
interesante. Pero existen formas un poco más rebuscadas, un poco más profesionales, de
organizar nuestro sistema de control de versiones y vamos a hablar sobre branches, que ya
hablamos un poco de master y todo esto en la próxima aula.

CLASE 116 GITP

Para que mientras Bruno está trabajando acá por ejemplo en el header, acá en esta parte de
acá y Ana está trabajando en el body dentro de la lista por ejemplo, tenemos que tener alguna
forma de separar nuestras ramas de desarrollo de forma que podamos saber exactamente
dónde estamos modificando y no interfiera en el código compartido.

Tal vez no esté tan claro pero piensen lo siguiente: yo quiero ahora que Bruno pase a trabajar
en la sección superior de la página en el título. Entonces, a partir de nuestro control de
versiones le digo: "A partir de ahora, a partir de este punto, de este commit, yo estoy
trabajando en el título, header o header de página" y Ana va a decir por ejemplo: "A partir de
este commit yo estoy trabajando en la lista".

Entonces esas ramificaciones de trabajo son una de formas con las que podemos trabajar con
las branches en Git. ¿Pero qué son esas branches Bruno? Por defecto, si yo ejecuto. Acá voy a
poner un poco más grande, hacer un clear. Si yo ejecuto git branch, lo que veo es master y ese
branch master es lo que nos está mostrando al final de esta línea. Nos está mostrando con este
símbolo en cuál branch estamos.
Pero podemos crear otras branches. Por ejemplo quiero comenzar a trabajar en el título,
entonces si quiero crear una nueva branch puedo ejecutar git branch título, enter. Y vean acá:
yo creé la branch título pero aun no estoy dentro de esa branch título. Por ejemplo si yo ahora
hago git branch, doy enter, veo que están las dos. Creé acá la branch título pero estoy aún en
master.

¿Cómo digo a Git que quiero cambiar para esa branch título? Bueno, lo que tengo que hacer es
hacer git checkout 'titulo', damos enter y como ven ahora estoy en la branch título. Para que
quede un poco más claro vamos a utilizar una herramienta llamada Visualizing git. Es esa de
aquí. Si hacen clic ahí va a aparecerles esta página. Puede ser que aparezca en blanco al
principio. Si aprietan F5 y recargan la página ahí ya debería funcionar.

Ahora estoy en la rama master y vamos a crear la nueva rama título. Vamos a hacer git branch
título, lo mismo que hicimos en nuestra línea de comando. Acá parece título, nos está
apareciendo head acá arriba que significa que nosotros estamos posicionados en este
momento en master.

Entonces ahora vamos a cambiar de máster para título, vamos a posicionarnos en título.
Entonces lo que vamos a hacer es git checkout titulo. Vean qué HEAD pasó a la parte de abajo
de título. Entonces supongamos que ahora yo comienzo a trabajar en título, entonces por
ejemplo voy a hacer un commit, git commit, vamos a hacer otro commit, y vean que estos dos
commits yo los he hecho solo en la rama titulo.

La rama master continúa con el primer commit que aparecía acá. Entonces supongamos que
ahora yo soy Ana. Ahora parece Ana y ella está trabajando en la rama master. Entonces vamos
a simular eso. Hacemos un git checkout master y nos hemos movido a master. Ahora Ana
comienza a hacer commits. Entonces comienza git commits enter. Vean qué es lo que ocurrió:
los commits de Ana están por una línea de desarrollo diferente de los commits de Bruno.

Ana está por acá arriba en la rama master y los commits de Bruno no influencian en nada los
commits de Ana. Todo lo que Bruno está haciendo acá, Ana no lo ve dentro de sus commits,
dentro de su trabajo, por lo menos por ahora. Entonces por ejemplo Ana comienza a trabajar
de nuevo, continúa trabajando en master, hace por ejemplo dos commits más. Ahora vamos a
volver a nuestro proyecto y vamos a hacer algunas modificaciones.

Supongamos que estoy trabajando acá con Bruno dentro de la parte del título y vamos a
modificar el título a "Curso de DevOps de Alura". Perdón, estaba en Ana, cuidado ahí con eso,
ahora sí. En index de Bruno vamos a modificar el título "Cursos de DevOps de Alura". Vamos a
guardar, vamos a ir a nuestra terminal. Vamos a hacer un git status, damos enter. Vemos que
tenemos modificado el archivo. Git add punto para agregar todos los archivos, git commit -M
"Modificando el título".
Ahora vamos a hacer un git log. Enter, y vean una cosa, acá, hasta este punto yo tenía todos los
commits hechos en master, vean que acá aparece master. El último commit fue "Renombrando
curso de Integración Continua". El último commit en master. El último commit, el que acabo de
hacer ahora es este de acá: "Modificando el título". Vean que fue hecho en la rama titulo.
Supongamos que ahora vamos a hacer otra modificación.

Por ejemplo vamos a poner dentro del archivo Bruno ponemos: "Lista de cursos de DevOps".
Guardamos. Vamos a hacer un git status de nuevo para ver si bien está modificando. Git add
punto, git commit -m "Cambio de título por lista de cursos de DevOps de Alura". Damos enter y
ahora si hago git log, vean que, de nuevo hasta acá fueron hechos los commits en master y
estos de acá son los de títulos. Estos dos últimos.

Si yo por ejemplo quisiera volver a master para comenzar a trabajar en otra branch puedo
hacer git checkout master. Miren una cosa curiosa: si hago git log vean que solamente
aparecen, esperen un segundo, voy a hacer un clear para que quede mejor. Git log, vean que
solamente aparecen los commits que hay en master. ¿Por qué? Porque los commits que yo hice
en la branch título son una rama aparte. Entonces, si estoy dentro de master voy a ver
solamente los commits de master.

Pero como título comenzó a existir luego de master, entonces puedo ver las cosas dentro de la
branch título yo puedo ver las cosas que hay en master y en título. Por lo menos, desde el
commit desde donde yo partí la rama título. Ahora vamos a volver a la branch título. Git
checkout 'titulo' y enter. Vamos a comenzar a trabajar con Ana.

Acá estamos en el proyecto de Ana. Vamos a hacer un git log para ver. Estamos en la rama
master y ahora Ana quiere comenzar a trabajar en la lista. Entonces tendríamos que hacer git
branch lista. ¿Pero será que siempre tengo que crear la lista y después tengo que moverme a
esa branch lista? ¿Será que existe algún comando para poder crear y moverse a esa branch
lista? Bueno, en realidad sí existe y el comando es el siguiente.

Git checkout -b, que significa crear branch, lista. Damos enter y acá nos dice que está creada la
branch lista y ahora nos está mostrando acá que nos hemos movido a esa branch. Bien, ahora
lo que vamos a hacer es agregar un nuevo curso. Vamos a agregar acá, vamos a poner li. Vamos
a agregar el curso de Kubernetes. Creamos el curso. Ah, perdón estaba en Bruno, cuidado de
nuevo con esos detalles.

Vamos a ponernos en el archivo de Ana, ahí, y ahora sí vamos a agregar kubernetes. Li y vamos
a agregar Kubernetes, "Ctrl + S" para guardar, volvemos a Ana, vamos a hacer un status para
ver que se modificó. Perfecto, se ha modificado. Vamos a hacer un git add punto, vamos a
hacer un git commit -m "Agregando curso de Kubernetes". Enter, ahora vamos a ver por
ejemplo, vamos a hacer un git log para ver qué es lo que tenemos.
Y como vemos, acá estamos en la branch lista y tenemos nuestro máster. Entonces Ana está
trabajando en la branch lista y tiene todas las modificaciones de la branch lista, mientras que
Bruno está en branch título y tiene todas las modificaciones hechas en esa branch título.
Perfecto. Pero sé que en mi repositorio que llamamos servidor local por ahora solo tengo la
branch master.

Entonces me lleva a asumir que la branch master es nuestra línea de desarrollo principal o
nuestra branch principal o padrón donde nuestro código tiene que estar sólo cuando esté listo.
Entonces, ¿cómo hago para llevar datos desde mi branch título hacia mi branch master y los
datos de mi branch lista hacia mi branch master también, para poder enviar hacia nuestro
repositorio?

Vamos a ver con detalle y calma en el próximo video cómo hacer para llevar el trabajo desde
una branch hacia otra.

Las branches ("ramas") se utilizan para desarrollar funcionalidades aisladas entre sí.
La branch master es la branch "predeterminada" cuando creas un repositorio.
Es interesante separar el desarrollo de funcionalidades en diferentes branches, para que los
cambios en el código de una no influyan en el funcionamiento de otra.

CLASE 117 GIT

Entonces por ejemplo git branch, utilizo git branch vemos que tenemos esas dos branches. Pero
en mi repositorio local, el servidor local tengo la branch master solamente y sé que la línea
master es la principal, donde está el código que funciona. Entonces voy a trabajar en el título
pero en algún momento voy a necesitar llevar el código hacia master.

Vamos a volver a nuestra herramienta de visualización para dar un ejemplo para ustedes.
Primero vamos a hacer un git checkout -b título para ejemplificar que tenemos acá la rama
título. Agrego ahora un git commit -m "Editando título". Vamos a hacer otro git commit -m
"Agregando lista en el título". Solo que ocurre un problema.

Supongamos que en nuestro proyecto Bruno, nuestro curso de Docker, este curso de acá en
realidad no se llamaba Docker sino que tenía que llamarse Docker: creando un container sin
dolor de cabezas. Tengo que arreglar eso, solo que no tiene nada que ver con las
modificaciones del título. O sea yo estoy en la branch título y no tiene nada que ver con el titulo
esta parte.

Título no está terminado aún. Entonces, en la herramienta visualización de Git, acá, tengo que
volver a master y a partir de máster corregir el error. Vamos a hacer un git checkout master,
enter y acá vamos a corregir el error. Supongamos que es git commit -m "Corrigiendo el error".
Enter. Ahora sí puedo volver a mi branch de título y finalizar lo que tenía que finalizar.
Pero ahora que veo con calma veo que ya terminé de hacer en realidad lo que necesitaba hacer
en título. ¿Cómo llevo ese trabajo de la línea título hacia la línea máster? Quiero unir esas dos
líneas. En inglés se llama merge. Entonces voy a hacer un git merge, estando parado en master
hago un git merge título. Damos enter y vean cómo se creó un nuevo commit más adelantado
que la dos branches y este commit va a contener todo lo que tiene título y los cambios que
tenía master.

Vamos a ver cómo hacer esto en la práctica. Entonces, estoy logueado como Bruno, hice lo que
tenía que hacer en el título, surgió el bug en la lista, pero mis modificaciones de título no
deberían influenciar la corrección de ese bug en la lista. Entonces estaba en la línea título,
vuelvo a la línea master y ahora voy a corregir el título.

Entonces supongamos que Docker tenía que llamarse Docker: Creando containers sin dolor de
cabeza. Bien, eso estando en el archivo Bruno, vamos a guardar acá y vamos a hacer el commit.
Vamos a comenzar con un git status, enter, bien, vemos que está modificado, git add punto, git
commit -m "Corrigiendo el nombre del curso de Docker". Damos Enter. Ahora vi que mi branch
de título ya está finalizada, no necesito hacer más correcciones en el título y quiero traerla a
master.

Como ya estoy en master solo necesito ejecutar el comando git merge titulo. Damos enter y
vean acá, este es el commit, el nombre, la descripción, el mensaje del commit que va a
generarse, el nuevo commit. Este nuevo commit, ese commit va a tener el mensaje merge
branch 'titulo'. Podemos de editar ese mensaje si queremos, pero como en este caso yo no
quiero editarlo simplemente vamos a utilizar :x, enter. Bien, y con eso salimos de ese editor.

¿Ahora qué hizo el merge? Vamos a ver en nuestro archivo, aca está, estamos en la rama
master y ya tenemos los cambios hechos dentro de la rama titulo. Pero vean una cosa, ahora si
yo hago git log dentro de master, vemos que tenemos un commit llamado merge branch
'titulo', no tenemos los commits que tenían dentro de la rama título. Nosotros no tenemos los
dos commits separados, tenemos un solo commit de merge.

CLASE 118 GIT

Entonces, lo que quiero hacer es actualizar los commits de master con los commits de título.
Entonces quiero que los commits que están en titulo, acá, estén antes de mis commits que voy
a hacer en master, por ejemplo el de acá. Entonces vamos a hacer ese ejemplo de nuevo.
Vamos a dar un clear acá, la consola, aceptamos, y vamos a comenzar de nuevo.

Vamos a hacer un git checkout -n titulo. Vamos a generar dos commits, git commit, y ahora
vamos a volver a master con git checkout master y vamos a generar un commit, git commit.
Perfecto. Entonces lo que ahora quiero es llevar ese commit de master justo después del último
commit de título. O sea, ese commit de corrección que hice, de bug, que quede en la parte de
adelante de la branch de título. Esa corrección que hice en master que quede delante de título.

Entonces estoy en mi master, quiero vaciar mi branch de master en título, o sea quiero hacer
un rebase. Lo que voy a hacer es un git rebase título, enter y vean lo que ocurre. ¿Vieron? Lo
que hizo fue traer todo lo que son los commits de título y llevarlos antes de nuestro último
commit de master. Entonces con esto lo que hice fue generar una única línea, sin esas
confusiones de commits de merge extra que nos está creando cada vez que hacemos un git
merge

Bueno, ahora vamos a la práctica. Volvemos a nuestra, no esa es Ana. Volvemos a Bruno.
Entonces voy a hacer un git log, damos enter y vemos que tengo ese commit de merge. ¿Será
que puedo ver todos estos commits que habíamos hecho, será que los puedo ver de una forma
más interesante dentro de la terminal? Bueno, sí, se puede.

Lo que podemos hacer es utilizar el comando git log espacio --graph, damos enter y vean cómo
es lo que nos está presentando acá. Nos está diciendo que a partir de este commit
comenzamos a corregir las cosas del título, estamos en una nueva branch, una nueva rama.
Creamos cosas y finalmente hicimos un merge.

Entonces como vemos en la misma, no necesitamos de herramientas externas para poder

visualizar nuestras branches. Solamente con tener la terminal es posible hacer eso. Entonces
ahora voy a hacer una modificación en mi branch título. Vamos a hacer un git checkout titulo.
Enter. Vamos a hacer la modificación dentro de nuestro archivo en Bruno. Acá por ejemplo voy
a cambiar curso por la letra C mayúscula. Voy a poner "Ctrl + S" para guardar.

Volvemos a nuestra terminal y vamos a agregar ese archivo. Damos un git status para estar
seguros, perfecto. Git add index.html. Vamos a hacer un git commit -m "Cursos con la letra
mayúscula". Acá me faltó una C. Bien. Damos enter, perfecto, hice el nuevo commit. Ahora
quiero ir para mi branch master, entonces hacemos git checkout master.

Y ahora lo que quiero hacer es traer los commits de títulos a mi branch master, entonces
estando parado en master, voy a hacer un git rebase titulo. Enter. Bien, se ejecutó. Ahora
vamos a ver log, si hago un git log, miren lo que ocurre.

Tenemos nuestro último commit hecho en master, lo hemos hecho en el video anterior y
tenemos nuestro último commit, el que acabamos de hacer hace unos segundo Cursos con la
letra mayúscula, fijense que está debajo, o sea que está antes del último commit hecho en
master. Entonces esto es exactamente lo que vimos en la herramienta.

O sea el rebase actualiza mi branch pero mantiene el trabajo de ella como último trabajo
hecho, para que no genere ese tipo de confusión de crear un nuevo merge y que una todo en
ese nuevo merge. Con esto tengo las correcciones hechas. Ahora tengo mi título actualizado,
los bugs corregidos de la lista y ahora puedo ir a la terminal como Bruno y hacer un push a
nuestro repositorio servidor local.

Entonces, estando en master vamos a hacer un git push servidorlocal master. Bien, se enviaron
los datos a nuestro servidor local. Ahora voy a loguearme como Ana. Vamos acá a Ana y
entonces Ana va a hacer un git checkout master, va a hacer un checkout para master y vamos a
hacer un pull de lo que tiene un servidor.

Vamos a hacer un git pull servidorlocal master. Enter. Con esto tenemos todas las
modificaciones que había hecho Bruno. ¿Pero recuerdan que ella estaba trabajando en la lista?
Entonces vamos a ir a esa branch, vamos a hacer un git checkout 'lista', enter, y ella necesita
actualizar los datos. Abro el proyecto de Ana, bien, acá en el archivo de Ana.

Entonces voy al archivo de Ana y sabemos que ese curso de Docker está mal, entonces el
nombre verdadero es "Curso de Docker: creando containers sin dolor de cabeza". Vamos a
hacer un "Ctrl + S", tengo una actualización acá en mi título. Estoy en el proyecto de Ana y voy a
hacer un commit. Entonces git add index.html, vamos a hacer un git commit -m "Actualizando
nombre del curso de Docker". Enter.

Acá vamos a hacer un "Ctrl+C". En caso que se confundan siempre pueden hacer ahí un "Ctrl +
C", parar esa línea que estaban escribiendo y pueden de nuevo realizar ese commit. Hicimos el
commit, ahora vamos a hacer un git log -p, enter, vemos que modificamos esa línea, ese curso.
Y ahora voy a hacer un checkout hacia master, git checkout master. Y fíjense que tengo una
modificación hecha por Bruno y otra modificación hecha por Ana en la misma línea.

CLASE 119 GIT

Vimos un caso interesante donde Bruno corrigió un bug pero esa tarea también fue ejecutada
por Ana. Entonces, los dos modificaron la misma línea de código. ¿Entonces qué va a ocurrir si
intento juntar ese trabajo?

Puedo elegir si voy a hacer merge o rebase, no hay mucha diferencia. En este caso voy a elegir
hacer un merge. Estando acá con Ana, bien, voy a hacer un git merge lista. ¿Qué es lo que
ocurre? Miren lo que nos está diciendo acá. Que hay un conflicto. Entonces ese merge
automático falló. Dice primero que hay que corregir esos conflictos y después de eso podemos
continuar.

Entonces vamos a abrir el archivo y vean lo que tenemos acá. Fíjense, tenemos lo que está
entre la palabra head y los signos de igual son lo que tenemos en nuestra rama master
actualmente. Y lo que está entre los signos igual y la palabra lista es lo que está en la branch
lista, que es lo que queremos mergear.
Entonces acá en Visual Studio Code puede ser que ustedes, estamos viendo con colorcitos, todo
muy lindo, pero si están utilizando tal vez otro IDE es posible que no vean todos esos colores.
Entonces solamente vamos a enfocarnos en estas palabras, estas partes. Entonces me está
mostrando exactamente la diferencia entre esos dos commits. Lo único que tengo que hacer
para corregir ese conflicto es eliminar los datos que no quiero. Eliminar lo que no necesito.

Dejar solo la línea en la versión correcta. Estoy viendo por ejemplo que quedó mejor la forma
que está en la branch Bruno, que está en lo que hizo Bruno, en esa línea, sin el curso en el
comienzo. Entonces vamos a aceptar la modificación que hizo él. Voy a eliminar lo que estaba
hecho acá en la branch de Ana, voy a eliminar eso, voy a sacar la palabra head y dejo todo así.
Vamos a hacer un "Ctrl + S" para guardar.

Entonces si ahora voy acá, a donde está el proyecto de Ana voy a hacer un git status. Enter.
Vemos que nos está diciendo que hay dos archivos han sido modificados, que es el index de una
branch de Ana y de Bruno. Y entonces ahora que ya corregí ese problema voy a hacer un git add
index.html Y así informo a Git que ya corregí lo que tenía que corregir.

Entonces a partir de que corregí y agregué ese index puedo hacer un git commit. Enter. Git va a
saber que terminé de corregir los conflictos y va a hacer un commit de merge. Entonces acá
estando en esta pantalla puedo hacer :x para salir damos enter y con esto guardé ese mensaje y
actualicé mi branch master.

Si ejecuto ahora en git log, espacio, --graphs, enter tengo el merge en mi branch. Genial. Ahora
puedo hacer un git push servidorlocal, master. Vamos a apretar Q y vamos a hacer git push
servidorlocal master para enviar los datos. Y ahora imaginen que Bruno está trabajando en el
proyecto corrigiendo nuestro curso de Vagrant.

Entonces, por ejemplo, dentro del archivo de Bruno, realmente el curso de Vagrant en realidad
se llamaba Vagrant: Gerenciando máquinas virtuales. Con esto guardamos el archivo y voy a
loguearme como Bruno. Vean que estoy acá como Bruno y voy a hacer un git status.

Bien. Vemos que está modificado git add punto. Git commit -m "corrigiendo curso de Vagrant".
Damos un enter allí y mientras envío esa información voy a hacer un git push servidorlocal
master y miren lo que ocurre. Mientras Bruno estaba trabajando, Ana envió esa información,
ese merge que hicimos, al servidor en la rama master antes que Bruno.

Necesito entonces antes de enviar cualquier modificación mía de Bruno, tengo que asegurarme
que estoy trabajando con la versión más nueva del código. Entonces antes de enviar tengo que
traer ese código al servidor. Entonces voy a hacer un git pull servidorlocal, master, damos enter
y ahora sí damos un :x y ahora sí con los datos ya en nuestro proyecto ahora puedo por ejemplo
verificar y vemos que tenemos nuestro curso Vagrant.
Están todos los datos ya que habían sido modificados y ahora sí puedo enviar esa modificación.
Entonces voy a hacer acá como Bruno, git push servidorlocal master, damos Enter y ahora sí ya
conseguí enviar los datos. Siempre que vayamos a comenzar a desarrollar un proyecto y antes
de enviar los datos de ese desarrollo que hagamos, sé que tengo que verificar si existe alguna
modificación en el repositorio.

Entonces con Ana, antes enviar alguna modificación nueva, ella sabe que necesita hacer un git
pull del servidor local para estar segura que no hay ninguna modificación allá en nuestro
repositorio remoto. Entonces, vamos a hacer eso, vamos a cambiar para Ana, vamos a hacer un
git pull servidorlocal master. Enter.

Como vemos, ya nos trajo los datos nuevos que tenían allá en el repositorio. Entonces para
evitar conflictos Git ya nos previene de esos conflictos, pero cuando ocurren, ya vimos que es
bastante fácil de resolverlos. Bueno, ya aprendimos cómo trabajar con repositorios remotos,
cómo trabajar en equipos, cómo trabajar con branches separadas y cómo unir el trabajo de
branches diferentes.

Quiero dejar una observación: existen estrategias bien específicas de cuándo crear una branch,
cómo crear una branch, necesito crear una branch para cada funcionalidad nueva o no. En este
caso no voy entrar en detalles sobre este tema porque no es el foco realmente de este
entrenamiento.

Quizás en entrenamientos futuros entremos en detalle de esas estrategias de branches, pero

sabemos que branches son líneas de desarrollo y aprendimos a crearlas, unir trabajos de
branches diferentes, sean a través de merge o rebase y aprendimos a resolver conflictos.

CLASE 120 GIT

Ahora me di cuenta que acá en el repositorio de Ana no configuramos que el nombre de quien
está haciendo commits sea Ana. Entonces para mantener un histórico correcto vamos a hacer
eso. Vamos a hacer un git config --local user.name "Ana", enter. Perfecto. Ya configuramos.

Bueno, continuando. Es muy común que cuando empezamos a desarrollar hagamos algunos
tests y después necesitemos deshacer esas modificaciones. ¿Cómo podemos deshacer las
modificaciones utilizando Git?¿Será que Git tiene alguna especie de "Ctrl + Z"? Primero vamos a
trabajar en el proyecto de Bruno y acá en Ansible quiero modificar por ejemplo el nombre y
quiero colocar Ansible: Infraestructura como código, por ejemplo. Damos un "Ctrl + S".

Acá es solamente un archivo, entonces si yo quisiera deshacer lo que hice, simplemente

haciendo un "Ctrl + Z" puedo ir deshaciendo todo eso. Pero imaginen que ustedes están en un
proyecto mucho más grande, donde tienen muchas modificaciones para probar y vemos que no
es lo que nosotros queremos. ¿Necesitamos ir por cada uno de esos archivos haciendo "Ctrl +
Z" en todos?

Imaginen por ejemplo que hice modificaciones ayer. Pero solo las puedo probar hoy y no me
gustaron. ¿Git me ayudará a deshacer esas modificaciones? Primero voy a hacer un "Ctrl + Shift
+ Z" para ir hacia adelante en el código y vamos a irnos a Git, a nuestro Git de Bruno, a la
terminal de Bruno, y vamos a hacer un git status, enter, y vean lo que nos está diciendo: hay
cambios que no están agregados para hacer un commit. [02:17] Entonces si queremos
agregarlos, hacemos un git add pero si por ejemplo nosotros queremos descartar los cambios
en nuestra carpeta, podemos utilizar git restore y el nombre del archivo. Antiguamente, esto se
utilizaba con un checkout. Nosotros podemos hacer un git checkout -- y después el nombre del
archivo y funcionaba igual que este restore. En esta versión que estoy utilizando se ha
modificado por este restore.

Entonces podemos hacer un git restore y el nombre del archivo en este caso es index.html.
Damos un enter, no nos dice nada, pero si nos vamos nosotros al proyecto, vean que no está
más ese cambio que hicimos de Ansible. Pero imaginemos ahora que vamos a hacer el cambio
ese de Ansible: Infraestructura como código, por ejemplo. Damos un "Ctrl + S" e imaginen que
acá estando en Bruno, voy a hacer un clear. Y nosotros hacemos un git add index.html.

Vamos a suponer que esa es la situación. Hagamos un git status. Por ejemplo imagínense que
nosotros nos dimos cuenta que antes de hacer un commit deberíamos testear, por ejemplo.
Entonces vemos que acá nos está diciendo que si nosotros ya tenemos cambios para hacer un
commit, ya hicimos el git add y queremos volver para atrás, lo que podemos utilizar es este
comando git restore --staged, espacio y el nombre del archivo.

Entonces vamos a hacer eso: git restore --staged, y en este caso index.html, vamos a dar un
enter y ahora vamos a dar un git status. Vean que lo que ha hecho es sacar el add que le
habíamos dejado y las modificaciones siguen estando. Si yo me voy al archivo, seguimos
teniendo esto, es como si nunca hubiéramos hecho el git add. Y por ejemplo si necesitamos
realmente sacar estas modificaciones, es simplemente utilizar el mismo comando anterior.

Que el comando anterior es git restore index.html. Damos enter y vean que acá en el archivo
ahora ya no tenemos las modificaciones. Pero ahora, imaginen el peor de los casos, vamos a
hacer la modificación de Ansible: Infraestructura como código. Vamos a dar un "Ctrl + S", vamos
a estar acá en Bruno, vamos a hacer un clear de la pantalla, git add index.html. Ahora vamos a
hacer un commit, git commit -m, y acá vamos a poner: "Cambiando el nombre del curso de
Ansible". Enter.

Dimos el commit. Pero después testeando vi que puse un bug ahí, vi que el código no debería
haber sido commiteado. ¿Cómo puedo dar un "Ctrl + Z" a un commit que ya hice? Bueno,
vamos a ir a nuestro log haciendo un git log, damos enter, y vean que nosotros tenemos ese ID
que es un hash, que nos está indicando cuál es el commit que hemos hecho.

Entonces voy a copiar ese commit, "clic derecho + copiar", vamos a dar la letra Q para salir del
log y entonces lo que vamos a hacer es colocar git revert, espacio, y vamos a hacer un clic
derecho, pegar, enter y vean que lo que va a hacer en realidad es crear un nuevo commit
deshaciendo el commit anterior. Entonces por ejemplo tenemos acá para cambiar el mensaje si
queremos sin problema, podemos poner lo que queramos.

Si estamos de acuerdo con el mensaje del nuevo commit, vamos a apretar :x, damos enter, y
ahora vamos a ir a nuestro log. Vamos a hacer un git log, enter y vean lo siguiente: tenemos
nuestro commit, cambiando el curso, y tenemos el commit que revierte ese commit.

Entonces si vamos a nuestro archivo, vemos que ya no están más los cambios que habíamos
hecho. Y con esto vemos que en cada uno de esos diferentes pasos, tanto si no hemos hecho
add, si hicimos el add, si hicimos el commit, en cada uno de esos casos podemos ir volviendo
para atrás en nuestros pasos e ir revirtiendo cada uno de ellos.

CLASE 121 GIT

Nos quedamos en eso de qué pasa si yo quiero guardar por ejemplo una parte de una
modificación para después, o sea hice algo que no está terminado pero que sí me sirve y no
quiero commitear.

Bueno, vamos a ver. Supongamos que vamos a cambiar el curso de Ansible por Ansible:
Infraestructura como código. Damos un "Ctrl + S". Pero por ejemplo yo necesito mirar si ese
realmente es el nombre del curso, necesito analizarlo mejor después, pero llegó una tarea
urgente en este momento, por ejemplo, me pidieron que cambie el nombre del curso de
Kubernetes por ejemplo.

Entonces necesito guardar lo que hice acá para decir: "Git mira, guardá esto en algún lugar que
después yo voy a volver y voy a continuar trabajando en esto". Y ese es el nombre del concepto
de Git llamado stash. Entonces vamos a la terminal de Bruno, esa de acá, ahí está. Vamos a la
terminal de Bruno y hacemos un git status antes que nada.

Vamos a ver que tenemos nuestras modificaciones y las vamos a guardar en un lugar temporal,
un lugar donde puedo recuperarlas después pero que no sea un commit, ya que recuerden que
no debemos subir commits que no están funcionando. Entonces voy a hacer un git stash,
damos enter y vemos que se han guardado las modificaciones con un estado de work in
progress.
Eso significa ese WIP, work in progress, trabajo en proceso y nos da acá un hash. Entonces, con
esto nos está indicando que se guardaron todos los cambios que no habíamos commiteado. En
este caso es solamente uno. Ahora supongamos que modifico el curso de Kubernetes. Vamos a
poner por ejemplo que el nombre de Kubernetes verdadero es Kubernetes: Introducción a la
orquestación de containers.

Supongamos que es eso. Damos un "Ctrl + S", entonces vamos a la terminal y voy a hacer un
clear y vamos a hacer un git status, enter, vemos que está modificado en archivo, git add
index.html, git commit -m y acá ponemos el mensaje: "Modificando el nombre del curso de
kubernetes", enter.

Perfecto. Ahora quiero continuar trabajando con lo que había dejado hecho en el curso de
Ansible. Fíjense que los datos del curso de Kubernetes están actualizados, pero el de Ansible
está en la forma anterior a que yo hubiera hecho esos cambios dentro del título.

Entonces ahora quiero agarrar los datos guardados en el stash y traerlos a mi carpeta de
trabajo. Yo tengo dos opciones. Acá dentro de la carpeta Bruno de la terminal Bruno vamos a
hacer un clear. Una opción es hacer un git stash list, damos enter, y tengo una lista de todos los
stash que yo puedo agarrar y colocar ahí dentro de nuestro proyecto.

Si hago un git stash apply 0, por ejemplo, que es el número de nuestro stash que está acá, acá
podríamos tener muchos. Nosotros podríamos poner el valor 0 y ahí eso lo que haría sería
aplicar las modificaciones de ese stash en nuestro proyecto actualmente. Pero esas
modificaciones, si utilizo este método, van a continuar dentro de la lista de stash.

Entonces después por ejemplo tendría que hacer un git stash drop para eliminar esa
modificación de la lista de stash. Pero si quisiera hacer las dos cosas al mismo tiempo, o sea,
agarrar la última modificación que agregué al stash y eliminarla después de esa lista, puedo
usar la segunda opción y usar el comando git stash pop. Damos enter y este comando agarra
del stash la última modificación agregada ahí en ese stash, la coloca en nuestra carpeta y
después la elimina del stash.

Entonces, por ejemplo si yo hago un git stash list, damos enter, vemos que no tengo nada. Lo
que hace este stash pop es generar un merge con las modificaciones que ya teníamos y las
coloca en el archivo. Fíjense por ejemplo, ahora si vamos al archivo fíjense que tengo a Ansible
con las modificaciones que había hecho antes de hacer el stash, por ejemplo. Perdón, con las
modificaciones que hice en el momento de hacer el stash.

Y además de eso tengo el nuevo título de Kubernetes, que era parte del commit. Ahora por
ejemplo puedo continuar editando el archivo y voy a cambiar a Ansible y supongamos que el
nombre verdadero era: "Su infraestructura como código". Ahora sí estoy listo para hacer un
commit, entonces vamos a hacer un "Ctrl + S", vamos a ir acá. Voy a hacer un clear.
 Y hacemos un git add index.html, damos un enter, git commit -m y acá vamos a poner:
"Modificando el nombre del curso de Ansible", por ejemplo. Cerramos comillas, enter y
después de haber hecho todas las modificaciones es importante enviarlas a nuestro servidor.
Entonces vamos a hacer un git push servidorlocal master, enter. Bien, hemos enviado las
modificaciones. Siempre es conveniente mantener actualizado nuestro repositorio remoto.

Bueno, ahora por ejemplo vamos a hacer un git log --oneline, enter, y estamos viendo que
hemos hecho muchos commits. Inclusive por ejemplo tengo commits de merge, tengo el
commit este de un merge de esa branch 'lista' y si yo quisiera navegar, por ejemplo, hacer que
mi código esté en el estado que estaba en el momento que hice ese merge con la branch lista.

CLASE 122 GIT

¿Cómo será que puedo viajar en el tiempo y ver lo que ocurrió en ese momento?

Antes que nada, recuerden que hicimos un git revert de un commit utilizando un hash grande,
pero podemos ejecutar ese mismo revert utilizando solo los primeros siete caracteres del
commit al que vamos a volver, porque normalmente esos siete caracteres son suficientes para
identificar unívocamente a un commit.

Por ejemplo, vean acá en este git log que simplemente tenemos los siete primeros caracteres,
entonces eso nos da un indicio de que con eso es suficiente para identificar cada uno de esos
commit. Entonces, quiero navegar por mi proyecto hasta llegar al estado que tenía cuando hice
el commit de merge con la rama lista.

Entonces voy a copiar el hash, este hash del commit, estos siete primeros caracteres y vamos a
hacer un git checkout y vamos a colocar paste. Una vez que hago enter, vean el mensaje que
nos está diciendo. No está diciendo que ahora estamos en un modo desanexado del HEAD, de
nuestro estado HEAD que es el lugar en donde nosotros estamos parados.

Dice que podemos por ejemplo mirar, experimentar, hacer cambios, commitear sin problemas
y esos commits, todos esos cambios van a ser descartados cuando por ejemplo volvamos a
nuestra branch master. Entonces por ejemplo, si nosotros quisiéramos mantener los cambios
que vamos a hacer acá dentro de este estado desanexado del HEAD en este commit en
particular.

Lo que podemos hacer, nos dice acá, es utilizar una nueva branch, crear una nueva branch, y
después de ahí sí hacer un commit en esa nueva branch. Vamos a verlo un poco mejor dentro
de nuestro Visualizing Git. Acá estamos dentro de Visualizing Git, vamos a hacer un ejemplo,
supongamos que estamos haciendo commits, git commit, git commit, enter y supongamos que
nosotros nos queremos volver a este segundo commit de acá.
Entonces vamos a hacer un git checkout y vamos a colocar el hash que tenemos, que nos está
presentando ahí. 162815e, enter. Vean que hemos vuelto, nuestro HEAD ha vuelto a ese
commit anterior, pero no está dentro de ninguna branch, o sea no está acá adentro de master,
está colocado encima del commit. Por ejemplo, si yo hiciera un git commit ahora vean lo que
ocurre.

Se ha creado un nuevo commit en un lugar que no tiene nombre. Este commit no pertenece a
ninguna línea de desarrollo. Si por ejemplo nosotros volviéramos al master, al git checkout
master, nosotros no podríamos volver nunca a ese commit que tenemos ahí. Entonces lo que
nos estaba diciendo dentro de la terminal es que si hacemos, vamos a volver de nuevo al
segundo commit, git checkout 162815e, enter.

Si los cambios que nosotros vamos a hacer los queremos conservar, entonces tenemos que
hacer primero un git checkout -b para crear una nueva branch. Enter. Fíjense que ahora
estamos dentro de una nueva branch. Ahora sí por ejemplo si hacemos git commit, damos
enter, vean que ese commit ya pertenece a la nueva branch.

Y por ejemplo nosotros podemos hacer un git checkout master, fuimos para master, podemos
volver al nuevo commit, a la nueva branch, git checkout nuevaBranch, enter, y podemos ir de
nuevo a ese commit que nosotros creamos a partir de un commit viejo. Ya puedo navegar entre
los estados de mi aplicación.

Vamos a volver a nuestra terminal y vamos a hacer un git log --oneline, enter. Y vean dónde
estoy. Estoy parado cuando hicimos un merge con la branch lista. Si nosotros vamos ahora al
código, vean que no están hechos, no están modificados ni el curso de Vagrant, ni Ansible ni
Kubernetes. Es decir, realmente volví atrás en el tiempo.

Aún no ocurrieron esas actualizaciones. Si quiero puedo jugar acá con el código, puedo
modificar todo lo que quiera, guardar y cuando esté listo para volver a mi último commit dentro
de mi branch master, puedo hacer un checkout para master y listo.

Vean que ya tengo, puedo hacer así. Vamos a hacer un git checkout master, enter y vean ahora
el código, ya tenemos todo el código actualizado con lo último que hemos hecho. De esa forma,
podemos navegar por nuestra aplicación y con esto ya tenemos bastante conocimiento.
Podemos hacer casi cualquier cosa necesaria para trabajar en un día normal, usando un
controlador de versiones.

CLASE 123 GIT

Pero supongamos que queremos ver qué ocurrió en cada commit para garantizar que no se
agregó ningún bug y para saber qué generamos en cada commit. ¿Cómo puedo ver qué
agregamos en cada commit y la diferencia entre un commit y otro?
Por ejemplo vamos a loguearnos como Bruno y sabemos que con git log -p obtenemos acá un
detalle bastante grande de cada commit. Y por ejemplo ahora apretando Q, utilizando un git log
--oneline, vemos por ejemplo cada uno de los commits que hemos hecho. Y si yo quisiera ver la
diferencia desde el momento en el que trajimos la lista, por ejemplo esta branch de lista y el
commit actual, hasta ahora.

Todo lo que fue modificado, pero quiero ver todo eso de una sola vez. ¿Cómo puedo hacer?
Existe un comando bien interesante y poderoso de Git llamado git diff. Entonces, este git diff
muestra la diferencia entre códigos, solo que si lo pongo solo en la terminal, por ejemplo pongo
ahora git diff, enter, no va a pasar nada. ¿Por qué? Por ahora no hay ninguna modificación
hecha que no se haya guardado en un commit.

Entonces quiero mostrar la diferencia entre dos commits. Para eso tengo que informar dos
commits. Vamos a agarrar el hash del merge acá con la lista, vamos a copiar y vamos a hacer git
difícil, pegar, y ahora hasta, o sea queremos poner hasta desde es commit hasta el actual.
Vamos a copiar acá este. Ese hasta se simboliza con esos dos puntos.

Entonces commit, primer commit, dos puntos, segundo commit, clic derecho copiar, pegar,
enter y vean lo que está ocurriendo acá. Nos está diciendo qué cosas se modificaron, cuáles de
los cursos modificamos, tanto el de Vagrant, Ansible, Kubernetes.

Además de eso, por ejemplo si yo estoy modificando alguna cosa, vamos a hacer por ejemplo
que estoy acá agregando una línea nueva para un nuevo curso y supongamos que tuve que
parar porque es la hora del almuerzo o necesité ir a una reunión y ya había hecho
modificaciones de un archivo, ahora apreto "Ctrl + S" por ejemplo, y quiero ver todo lo que he
modificado hasta entonces.

Puedo simplemente ir a la terminal y hacer un git diff, enter, y ahí vemos por ejemplo qué cosas
he modificado pero que aún no he agregado para hacer un commit. Por ejemplo, si ahora yo
agrego este archivo con un git add index.html, lo agrego, vamos a ver un git status ahora.

Vean que están agregados, si yo hago un git diff, miren, no pasa nada, o sea no aparece nada.
¿Por qué? Porque yo ya lo agregué a los commits. Entonces ese git diff solo funciona para las
cosas que no han sido agregados al stage. Si yo quiero, por ejemplo vamos a volver atrás este
archivo, porque esa modificación que hice no es relevante en realidad. Entonces, vamos a hacer
el git restore --stage index.html.

Pongo git status y ahora simplemente hacemos un git restore index.html. Enter. Perfecto.
Ahora volvemos a tener nuestro archivo como estaba antes. Entonces, así podemos comenzar a
analizar con más control todas las modificaciones que fueron agregadas durante un desarrollo
de un proyecto. Conseguimos tener un control más fino entre ellos, ver las modificaciones
entre commits, entre lo que estamos haciendo ahora y lo que ya fue commiteado.
Entonces con git diff podemos ver todas las modificaciones, pero después de haber visto todas
las modificaciones y garantizado que no hay bugs

CLASE 124 GIT

Entonces quiero generar una versión. Vamos por ejemplo a hacer git log -n 2.

Con esto vamos a ver los últimos dos commits que hemos hecho. Y yo quiero, a partir del último
commit, que a partir de ese último commit sea clavada una bandera, marcar un checkpoint
como en los juegos de Sonic o Mario cuando pasabas por una bandera. Queremos marcar que
en ese punto tenemos la versión por ejemplo 0.1.

En ese commit marcamos el momento que lanzamos esa versión 0.1 o marcamos cualquier
momento que queramos, en realidad. Quiero definir ese commit con un punto cualquiera y que
yo le estoy dando como ejemplo una versión. ¿Cómo puedo hacer eso? En otros sistemas de
control, de contenido, no de versión, existe un concepto de tags.

Por ejemplo si vas a crear un blog, uno tiene tags para marcar posts específicos con categorías.
En Git podemos usar un concepto parecido también llamado tag. Un tag marca un punto en
nuestra aplicación, un punto que no puede ser modificado, fijo, por ejemplo el lanzamiento de
una versión y la versión 0.1, una vez lanzada nunca más es modificada. Cualquier modificación
que yo quiera agregar va a ser agregada a la 0.2 y no a la 0.1.

Entonces la tag sirve exactamente para eso, para definir un punto que no cambia nunca más en
nuestra aplicación. ¿Pero entonces, Bruno, eso significa que voy a hacer que nuestro código
nunca más sea editable? No, no es eso. Solo voy a crear un punto al que puedo llegar y tener un
código exactamente en ese estado.
Voy a estar seguro de que nuestro código va a estar en ese estado de la versión 0.1. Bueno,
vamos a crear entonces esa versión 0.1. Voy a hacer un clear, enter, y ya sabemos que estamos
hablando de tag entonces, vamos a comenzar colocando git tag. ¿Cómo creo esa tag? Necesito
informar a Git que estoy agregando una tag.

Entonces lo que voy a hacer es utilizar, perdón tag con G ahí, entonces como le tengo que decir
a Git que estoy agregando una tag, vamos a utilizar el parámetro -a, de add en inglés. Y ahora
necesito dar un nombre a esa tag. Ese nombre puede ser el que sea. Puedo ponerle cocodrilo si
quiero, puedo ponerle versión -0.1 por ejemplo.

Pero en este caso yo voy a utilizar la nomenclatura v0.1.0. Esa va ser nuestra versión. ¿Bruno,
eso es una regla? ¿Tengo que poner esa tag así siempre? No, solo sugiero ponerlo de esa forma,
pero si ustedes se sienten más cómodos usando otra nomenclatura, no hay problema. Pueden
usarla.

También puedo agregar un mensaje para ese tag con el parámetro -m, como hacemos en los
commits. Entonces por ejemplo usamos git tag -a v0.1.0 -m "Lanzando la primera versión".
Vamos a colocar entre paréntesis (BETA) de la aplicación de cursos. Okay, damos un enter.
Parece como si no hubiera pasado nada, pero en realidad ya creé una tag, un punto en nuestra
aplicación.

Si yo ejecuto ahora git tag, enter, vemos que nos aparecen todas las tags que en este caso es
solamente la v0.1.0. Ahora, una cosa interesante que es donde yo quería llegar. Saben que yo
puedo hacer push de master o de cualquier branch a donde yo quisiera. Por ejemplo, puedo
hacer un git push servidorlocal master, enter.
Perfecto. Hicimos un push a nuestro servidor local. Y puedo también enviar mi tag, puedo hacer
un git push servidorlocal v0.1.0. Damos enter, y vean que se creó una nueva tag. Entonces esto
significa que puedo enviar mi tag al servidor local.

Vean que ahora en el servidor tenemos esa nueva versión, esa versión de 0.1.0. Y ahora, el
punto más interesante. Voy a hacer un clear a la pantalla y vamos a hacer un git remote -v,
enter. Vean que nosotros, además de nuestro servidor local, también tenemos nuestro origin
que es nuestro servidor de GitHub.

Entonces vamos a enviar nuestra master a GitHub, vamos a hacer un git push origin master,
enter. Voy a parar acá el comando porque parece que no está funcionando. Un segundo.
Vamos a intentar de nuevo, git push origin master. Perfecto, ahora sí. Se envió nuestro master,
y ahora voy a enviar nuestra tag así como hicimos con el servidor local. Entonces git push origin
v.0.1.0. Perfecto.

Vamos a ver. Bien, ahí se está enviando y genial. Enviamos nuestra nueva tag para GitHub. Y
ahora, ¿cómo visualizo tags en GitHub? Bueno, ese es un punto interesante donde quería
llegar. Vamos a ir a GitHub, a nuestra página de GitHub, vamos a nuestro curso de Alura y vean
que ahora ya tengo 17 commits hechos y vean una cosa, acá tengo un tag.

Tengo entonces acá todos los commits que hicimos, modificando el nombre del curso, fue el
último commit, aparecen las branches y acá tenemos un tag. Fíjense que también lo pueden ver
a través de acá, de releases. Si nosotros cliqueamos ahí, vemos que tenemos ese tag v0.1.0, si
hacemos clic en los puntitos nos dice "lanzando la primera versión (BETA) de la aplicación".

Nos está diciendo en cuál branch fue hecho, nos está diciendo también cuál fue el último
commit, el commit hecho en esa tag. Volvemos para atrás y vean también por ejemplo que
tenemos un .zip, entonces nosotros podemos bajar nuestra aplicación como un zip y
compartirla con otras personas.

Entonces por ejemplo vamos a hacer eso, vamos a bajarla. Tenemos acá a Alura, y acá tenemos
nuestro Alura 1.0, por ejemplo vamos a hacerle un clic ahí, doble clic a nuestro index.html. Un
segundo, antes de hacer eso, vamos a extraerlo en downloads, acá. Perfecto. Y vamos a
descarga, acá tenemos nuestro zip, acá tenemos nuestro archivo de Alura, y si hacemos un clic
derecho, abrir con, vamos a elegir otra aplicación, acá vamos a utilizar Visual Studio Code.

Bien. Aceptar. Y vean, acá está el archivo nuevo, el que bajé en el .zip. Miren, está igual al
archivo que nosotros teníamos antes en Bruno. Entonces con esto generamos una versión para
nuestra aplicación, un punto histórico que puede ser enviado incluso a GitHub u otra persona
que quiera usar nuestra aplicación.

Y esa persona por ejemplo puede siempre ver cuáles son nuestras últimas versiones generadas
con las tag utilizando esa URL, que cada uno de nosotros vamos a tener una URL diferente. Esto
es muy bueno, es una feature muy importante, es una característica muy importante de GitHub
para tener en cuenta.

CLASE 125 FLEXBOX

Para el flexbox, crear un css aparte luego llamarlo en el index allí poner un display:flex y un
align-items: center esto lo que hace es alinear todos los ítems al centro ahorrando código y
para crear un espacio entre los elementos entre el header y el resto poner justify-
content:space-between para poner los ítems del nav a la derecha y el contenido centrado

CLASE 126 FLEXBOX

Flexbox consigue que los elementos esten uno al lado del otro, usar container como clase padre
de los elementos. Para que el nav quede tipo asi ----- poner en la clase el nav display:flex.
Pagina caniuse.com dice que herramientas de html y css son compatibles con que navegadores

CLASE 127 FLEXBOX

Poner un width al footer, espacio entre cada elemento de los ítems justify-content: space-
around (Los items flex se alinean uniformemente de tal manera que el espacio entre dos items
adyacentes es el mismo. El espacio vacío anterior al primer item y posterior al último item
equivale a la mitad del espacio entre dos items adyacentes) Para cambiar el botón enviar quede
a la altura del input, en css poner display:flex

CLASE 128 FLEXBOX

Para que los elementos queden separados como en columnas, parte de poner en css
display:flex flex-direction: row sino columna para que quede uno abajo del otro y para ponerle
altura es height Y PARA EVITAR QUE AL SOBREPASAR LA ALTURA SE VAYA HACIA ABAJO poner
flex-wrap:wrap asi queda todo dentro del mismo espacio

Podemos distribuir los elementos dentro del padre de varias maneras, podemos por ejemplo:
Poner todo el espacio a la izquierda, lanzando el contenido a la derecha con justify-content:
flex-end.
Poner todo el espacio a la derecha, lanzando el contenido a la izquierda con justify-content:
flex-start (que es el modelo).
Poner todo el espacio a la izquierda y a la derecha, lanzando el contenido al centro con justify-
content: center.
Poner todo el espacio entre los elementos como vimos antes con justify-content: space-
between.
Y una posibilidad muy interesante es también poner espacio alrededor de los elementos. Para
ello podemos utilizar justify-content: space-around.

CLASE 129 FLEXBOX

Para que los elemento sesten uno al lado del otro y no tipo fila, poner en la clase padre
display:flex y el flew-wrap:wrap luego en la hija poner lo del display y configurar el width
 CLASE 130 FLEXBOX
Para hacer que el flexbox sea responsive, flex-direction:column para que quede uno abajo del
otro y align-items:initial asi se ponen a la izquierda

CLASE 131 FLEXBOX

Para que el texto no se salga del espacio de colores, poner en height:auto y flex-wrap: nowrap .Los
elementos flex son distribuidos en una sola línea, lo cual puede llevar a que se desborde el
contenedor flex. El valor cross-start es equivalente a start o before según el valor de flex-
direction.
Para arreglar el footer, flex-direction:column después para las imágenes de este, align-
items:center luego el width:100% margin: 0% y en cuanto al formulario que esta aquí adentro,
justify-content:center. Para que solo se aplique lo anterior a un celu/Tablet antes de poner
todas las modificaciones @media(max-width:tamaño en px){poner todas las modificaciones}
luego poner dar formato al documento para acomodar

CLASE 132 FLEXBOX

Para cambiar el orden de las opciones del nav, (tener en cuenta que todos los elementos
comienzan con posicion 0) ponerlo en order: -1 para que sea el primero, pagina css-tricks.com
para el css

CLASE 133 FLEXBOX

Para agrandar el video, flex-grow: specifies how much the item will grow relative to the rest of
the flexible items inside the same container. Para que el boton quede mas abajo, poner flex-
grow:2

CLASE 134 FLEXBOX

Para que el flex-grow quede responsive, poner abajo del flex-grow un flex-shrink (al disminuir la
pantalla, el tamaño del elemento se reduce hasta el doble) con el mismo valor que el anterior
luego dentro del media poner un flex-direction:column asi el video queda arriba y el texto abajo

CLASE 135 FLEXBOX

 CLASE 136 FLEXBOX

Flew-grow aumenta tamaño proporcional sobre lo que sobre de espacio. Flex-shrink hace lo
opuesto, ósea reduce.Para unificar el grow, shrink y largo ponerlo dentro del flex: en ese orden

La propiedad flex-basis sirve para definir un ancho para el elemento en caso de que el flex
container esté con flex-direction: row.

La propiedad flex-basis sirve para definir una anchura o altura para el flex item. Se el flex
container tiene flex-direction: column, el flex-basis en el flex item servirá para definir una
height. En este caso el flex-direction: row funciona como un width.

CLASE 137 FLEXBOX

Ir a flexboxfloggy (hasta nivel 6, empezar 7) y poner a la rana sobre la planta o

flexboxdefense.com (hasta nivel , empezar 5) Para decirle a un elemento / flex item que crezca
y ocupe todo el espacio que queda dentro del flex container debemos utilizar la propiedad flex-
grow.
Podemos poner el valor 1 para que este elemento ocupe todo el espacio
Simplemente ponemos flex-shrink: 0 en el elemento que no queremos que se reduzca.
Para ello podemos poner la propiedad flex-direction: column, que hace que los elementos
queden uno debajo del otro. Este es el aspecto más importante de la capacidad de respuesta
de flexbox.

CLASE 138 CSS GRID

Para indicarle a CSS que una etiqueta debe comportarse como grid, ir a la clase app (porque
corresponde al body) display:grid grid-template-areas: “poner el nombre de cada área que
queremos ej encabezado” DEFINIR EN ORDEN grid-template-columns: aca se definen el tamaño
de las columnas y se recomienda el auto, grid-template-rows: tamaño en px o auto de las filas
de cada área de la página después poner en la clase (.) correspondiente grid-area:”nombre que
le asignamos en grid-template-area”

CLASE 139 CSS GRID

Para colocar una imagen en una posición especifica, ir al CSS y poner el .nombre de la
clase{background: url(‘ubicación, nombre y formato de la image)} y para que la imagen no este
posicionada en una sola columna, en css poner grid-column-start (aca se define el inicio): nro de
columna donde inicia despues grid-column-end: nro de columna donde termina (para end
sumar 1) LO ANTERIOR CONFIGURA EL ANCHO ,PARA LARGO EN VEZ DE COLUMN es row (para
end no se suma 1) background-size: cover y background-position:center para centrar la imagen
y para evitar que si la imagen es pequeña rellene espacios poner background-repeat: no-repeat
y si se repite varias veces en el index la misma clase y queremos que por cada repetición la
imagen sea diferente, al lado del nombre en el css poner:nth-child(posición en donde se va a
aplicar el cambio) Para reducir código, en la etiqueta de background luego del url, poner la
position/size repeat y en el caso del colum/row-start poner grid-column o row: colocar inicio /
colocar final

CLASE 140 CSS GRID

Para que el texto de los ítems sea igual que el de la caja que los contiene, poner color:inherit.
Para espaciar elementos del tipo grid usar gap https://www.aluracursos.com/blog/creacion-de-
componentes-css-con-el-estandar-bem
CLASE 141 CSS GRID
Para definir el área dentro de un grid, poner grid-row-gap: espacio que quiero que haya entre
los grid luego asignarle un nombre a cada area mediante grid-template-areas y para configurar
el tamaño de estas poner grid-template-rows: tamaño de la primera y asi sucesivamente (ósea
en una linea)
CLASE 142 CSS GRID
Line-height sirve para cambiar el interlineado del texto
CLASE 143 CSS GRID
CLASE 144 CSS GRID
Para sacar el espacio entre las distintas secciones, configurar el padding 0 2rem por ejemplo
CLASE 145 CSS GRID
A la hora de configurar un sitio para que sea responsivo, se debe hacer para: 600px o menos,
600px y menor a 768, mayor a 768 y menor a 992, 1200px o mas (
según w3school), hacer esto en un css aparte y poner dentro del @media only screen and (max-
width: tamaño en px){clase o id{lo que quiero hacer ej background-color}}y para sacar
columnas poner en display, grid-column, grid-row:none y para que una imagen ocupe todas las
columnas, grid columna 1/hasta el final ej 5
CLASE 145 CSS GRID
Cuando hay que hacer responsivo algo que es grid dentro de otro, flex-direction:column, y en la
clase donde estan los grid-template-areas width: 100% margin-bottom: 3rem
Juego interesante: https://cssgridgarden.com/#es

CLASE 146 LAYOUTS RESPONSIVOS

EMMET es un plugin que va a generar código predefinido de manera abreviada, no se instala en
todos los IDE ya que VSC ya lo tiene instalado. En VSC en un index.html con mínimo la
estructura básica, <etiqueta que queremos ej header>un atributo que queremos ej img+otro ej
nav>otro ej ul>otro ej li*6(esto indica que hay 6 items) luego ctrl+espacio para seleccioanr lo
que queremos para que se autocomplete
CLASE 147 LAYOUTS RESPONSIVOS
Para que el navegador muestre nuestras configuraciones y no las que tiene por defecto, crear
reset.css
 CLASE 148 LAYOUTS RESPONSIVOS
El em, que es una medida relativa a la fuente size de CSS, más específicamente, de la etiqueta
madre de los elementos que estamos utilizando. REM: tamaño desde el root ósea la raiz. EM:
tamaño según lo configurado en css fuera del root
CLASE 149 LAYOUTS RESPONSIVOS
PNG es poco compacto, pero mantiene la calidad de la imagen (uno de los mas usados)
Mala calidad al acercar, JPG es muy compacto, pero pierde un poco la calidad de la imagen, GIF
con baja calidad de imagen y el tamaño depende de la calidad de esta, SVG imagen vectorial en
2 dimensiones (uno de los mas usados) con buena calidad al acercar, lo malo es que se pierden
un poco los detalles y colores de la imagen, se recomienda en iconos, logotipos e ilustraciones
sencillas
CLASE 150 LAYOUTS RESPONSIVOS
Para demostrar, aquí están algunas motivaciones de utilizar el desarrollo mobile-first:
 Gran parte de los accesos y ventas son de dispositivos móviles;
 El diseño es minimalista y simplificado;
 Enfoque en el contenido.

Las motivaciones para utilizar el desarrollo desktop-first:

 La interfaz tiene features más ricas;

 Mayor capacidad de ejecución de las instrucciones;
 El producto es optimizado para desktop (ejemplo: Google Docs).
Así que al desarrollar es importante analizar todos los puntos que influencian en el proyecto.
Clientes, features, costo y lenguaje visual son algunos de los puntos que favorecen un abordaje
sobre el otro.

CLASE 151 LAYOUTS RESPONSIVOS

Arriba del meta charset=utf-8 poner meta name=”viewport” content=”width=device-width
initial-scale=0.9” para que la web se adapte al móvil
CLASE 152 LAYOUTS RESPONSIVOS
Para usar variables en css poner la etiqueta en la que queremos aplicar ejemplo :root{--nombre
de la variable: valor (ej el numero de un color);} y si queremos reutilizarla ir a donde la
queremos usar y poner var(nombre de la variable que queremos)
CLASE 153 JAVA PRIMEROS PASOS

Tenemos la máquina virtual de Java, la Java Virtual Machine (JVM), pero no es lo único que
necesitamos para escribir código de Java.

De hecho tenemos otros features, como las librerías escritas en Java que nos van a dar diversas
funcionalidades, y este conjunto nos va a dar el JRE, que es el Java Runtime Environment. El
Java Runtime Envrionment es la Java Virtual Machine con el conjunto de librerías nos van a
permitir ejecutar código Java en nuestra máquina. Y aparte del JRE, tenemos el JDK, que es el
Java Development Kit, que aparte de contener al JRE, nos da un conjunto de herramientas para
poder escribir código en Java, compilar el código, hacer este código entendible para la máquina
y generar el ByteCode.

CLASE 154 JAVA PRIMEROS PASOS

Para ejecutar código Java desde el bloc de notas, primero crearlo aquí y guardarlo con un
nombre.java luego ir al CMD y poner la ubicación de la carpeta del archivo (ósea si esta
guardado en documentos, poner cd Documents) luego javac nombre del archivo.java luego
poner java nombre del archivo luego poner enter

CLASE 155 LAYOUTS RESPONSIVOS

Para poner un class con método emet poner nombre de la etiqueta.nombre del class

CLASE 156 LAYOUTS RESPONSIVOS

En vez de utilizar el % para indicar el tamaño de una imagen usar vw asi abarca todo el ancho
de la pagina en mobile

CLASE 157 LAYOUTS RESPONSIVOS

Las medidas absolutas son definidas de manera determinada, independiente del contexto,
como por ejemplo la medida pixel. Y las medidas relativas lo hacen tomando otros elementos
como referencia y por eso son más utilizadas en los diseños responsivos, porque van a
adaptarse ahí a los diferentes tamaños de los dispositivos de las pantallas.

Max-width sirve para limitar el tamaño de la imagen a medida que la pantalla del dispositivo se
agranda

CLASE 158 LAYOUTS RESPONSIVOS

CLASE 159 JAVA PRIMEROS PASOS

Short es un tipo de dato que soporta numeros de hasta 5 digitos, byte es mas pequeño aun
hasta 3 digitos, float son para pequeños decimalesF

CLASE 160 JAVA PRIMEROS PASOS

Para poner un dato tipo char usar comillas simples ‘ y si ponemos números, al imprimir se
imprimen letras según lo que significa en la tabla ASCII

String es un objeto, no una variable primitiva

 CLASE 161 JAVA PRIMEROS PASOS

A la hora de hacer un if, solo se pueden sacar los corchetes si solo tenemos que ejecutar una
línea de código, para formatear el código y tenga un buen formato, ir a source->format

CLASE 162 LAYOUTS RESPONSIVOS

La herramienta "PageSpeed Insights" analiza el contenido de una página web y te sugiere qué
hacer para mejorar la velocidad de esa una página.

Inserta un enlace que la herramienta analizan las versiones mobile y desktop, con cálculos de
velocidad y performance, sugestiones de lo que pueden acelerar la carga.

CLASE 163 LAYOUTS RESPONSIVOS

Para que una imagen no se repita a lo largo del tamaño del bloque, en css poner background-
repeat: no-repeat y luego configurar a elección el background-position

CLASE 164 LAYOUTS RESPONSIVOS

Para poner una dirección, usar la etiqueta address y debe estar cerca de la etiqueta donde se
pone el teléfono y email, poner controls si queremos que el video de la pagina funcione

CLASE 165 JAVA PRIMEROS PASOS

No poner dentro de un else un if-else. Si una variable esta inicializada en un valor y para el if
queremos preguntar si esta es igual a su valor de inicialización (ej si esta inicializada en true y
quiero preguntar si es igual a true) directamente ponemos el nombre de la variable en vez de
poner nombre de la variable==valor de la inicialización. Algo que se pueden hacer con las
variables del tipo boolean es asignar como valor una condición que se cumple en vez de poner
true o false, haciendo el código mas entendible. Ej boolean b= k>1;

CLASE 166 JAVA PRIMEROS PASOS

Scope es todo lo que limitado con {} el boolean por defecto es false

CLASE 167 JAVA PRIMEROS PASOS

Un ciclo es una condición repetitiva, por ejemplo un while, siempre y cuando sea verdadera

CLASE 168 JAVA PRIMEROS PASOS

Para sumar todos los números dentro de un while, fuera de este inicializar una variable en 0
luego dentro de este nombrar a esta= repetirla+nombre de la variable del contador, luego
incrementar la variable del contador

CLASE 169 JAVA PRIMEROS PASOS

For (tipo, nombre y valor inicial del contador, condición del contador, lo que tiene que ocurrir
con el contador (ya sea sumar o disminuir)

CLASE 170 JAVA PRIMEROS PASOS

CLASE 171 LAYOUTS RESPONSIVOS

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

CLASE 172 LAYOUTS RESPONSIVOS

CLASE 173 LAYOUTS RESPONSIVOS

Para que no aparezca una imagen, display:none

CLASE 174 LAYOUTS RESPONSIVOS

Para justificar las tarjetas y queden en línea tipo asi --------- poner flex-direction:row justify-
content: space-between y align-items: flex-end

CLASE 175 JAVA PRIMEROS PASOS

CLASE 176 ARQUITECTURA CSS

Se empieza de arriba hacia abajo.

CLASE 177 JAVA ORIENTADO A OBJETOS

Para evitar repetir conductas, hay que abstraer esa conducta y para eso necesitamos objetos. la
idea central del paradigma orientado a objetos, que es crear unidades de código que combinen
los datos asociados con cierta información con las funcionalidades aplicadas a esos datos (por
ejemplo, numeroIdentidad + validación). Son los atributos y métodos.

CLASE 178 JAVA ORIENTADO A OBJETOS

La clase donde están los métodos y atributos se llama entidad.

CLASE 179 JAVA ORIENTADO A OBJETOS

 CLASE 180 JAVA ORIENTADO A OBJETOS

CLASE 181 JAVA ORIENTADO A OBJETOS

Al poner new en objetos, Java automáticamente pone como valor predeterminado 0 en todos
los atributos a menos que los cambiemos a lo largo de la ejecución

CLASE 182 JAVA ORIENTADO A OBJETOS

Si pongo un if para comparar un objeto con otro y ver si son iguales, no sirve porque se
compara el lugar que tiene en la memoria estos objetos, no sus atributos

CLASE 183 ARQUITECTURA CSS

Para que los ítems del nav sean uno al lado del otro, display:flex luego en la ubicación especifica
de los ítems list-style:none para que no se vea el circulo de los ítems, dentro de hover poner
text-decoration:underline para que al pasar el mouse se subraye la palabra

CLASE 184 ARQUITECTURA CSS

En css, lo ideal no es asociar todo a etiquetas ya que corremos el riesgo de cambiarlas yo

eliminarlas y que el estilo no se aplique, usar class y id en su lugar. Se recomeinda que por cada
parte de la pagina (ej menú, quienes somos, etc) se haga una subcarpeta dentro de la carpeta
que agrupa al css con el nombre de esa parte y dentro crear un/unos archivos para los estilos
(atomic design)

CLASE 185 ARQUITECTURA CSS

Metodologia BEM dice que el nombre de las clases va a incluir si o si el nombre del bloque,
ejemplo todas las clases dentro del nav van a incluir el nombre menú ej en los ítems menú--
item y asi sucesivamente. Las formas de llamar a esto pueden ser bloque__elemento bloque—
elemento o bloque__elemento—modificador

CLASE 186 ARQUITECTURA CSS

Para que el titulo de la imagen este realmente centrado, poner en la clase css correspondiente
height:calc(100vh – tamaño del nav) vh toma la medida del navegador

CLASE 187 JAVA ORIENTADO A OBJETOS

 CLASE 188 JAVA ORIENTADO A OBJETOS

CLASE 189 JAVA ORIENTADO A OBJETOS

CLASE 190 JAVA ORIENTADO A OBJETOS

CLASE 191 JAVA ORIENTADO A OBJETOS

Si en el main apretamos la tecla control donde llamamos a un método, vamos directo hacia allí

CLASE 192 JAVA ORIENTADO A OBJETOS

CLASE 193 JAVA ORIENTADO A OBJETOS

CLASE 194 JAVA ORIENTADO A OBJETOS

Si hay que poner dentro de un objeto muchos atributos, dividirlo y crear otro. Para referenciar
objetos, poner como atributo el nombre de la clase y luego una variable, luego en el main luego
de poner el nombre de la variable= nombre del objeto creado en el main (al que deseo
referenciar)

CLASE 195 JAVA ORIENTADO A OBJETOS

CLASE 196 JAVA ORIENTADO A OBJETOS

CLASE 197 ARQUITECTURA CSS

CLASE 198 ARQUITECTURA CSS

CLASE 199 ARQUITECTURA CSS

CLASE 200 JAVA ORIENTADO A OBJETOS

CLASE 201 JAVA ORIENTADO A OBJETOS

Para encapsular, poner el atributo tipo private junto con los setter y getter

CLASE 202 JAVA ORIENTADO A OBJETOS

Para cambiar el nombre de un método, seleccionar el nombre, ir a refactor, rename, cambiarlo,

poner continue y asi se cambia automáticamente en todos los lugares donde lo mencionamos

CLASE 203 JAVA ORIENTADO A OBJETOS

 CLASE 204 ARQUITECTURA CSS

CLASE 205 ARQUITECTURA CSS

CLASE 206 ARQUITECTURA CSS

Para que una imagen no se repita dentro de un cuadrado poner lo siguiente:

Border-radius para imagen redondo

CLASE 207 JAVA ORIENTADO A OBJETOS

CLASE 208 JAVA ORIENTADO A OBJETOS

CLASE 209 JAVA ORIENTADO A OBJETOS

CLASE 210 JAVA ORIENTADO A OBJETOS

Dentro de un constructor, se pueden poner condicionales a la hora de setear los atributos

dentro del mismo

CLASE 211 JAVA ORIENTADO A OBJETOS

Para saber la cantidad de objetos que inicializamos (siempre y cuando pertenezcan a una
misma clase) como atributo tipo static inicializar=0 esta variable++ (poner esto en el
constructor);

Una variable del tipo static significa que ese método/atributo no forma parte de la instancia
(momento en el que se crean objetos que pertenecen a una clase) y solo pertenece a la clase

CLASE 212 JAVA ORIENTADO A OBJETOS

Lo static no se puede acceder desde la instancia, para eso ponerlo como tipo private junto con
setters y getters y en la clase main donde estan las instancias, invocar al método get para que
se pueda imprimir.

En Java, es posible llamar a un constructor dentro de otro, y esto se hace para evitar la
duplicación de códigos y reglas. Después de todo, una regla aplicada en un constructor
normalmente será la misma para el otro caso. Para esto, se usa this (), pasando los parámetros
correspondientes al constructor al que desea llamar.

CLASE 213 JAVA ORIENTADO A OBJETOS

CLASE 214 ARQUITECTURA CSS

Una buena practica es poner la imagen como background en el css mientras que el html
ponemos un div class para luego llamarlo en css y al lado de la url no-repeat center / cover

CLASE 215 ARQUITECTURA CSS

CLASE 216 ARQUITECTURA CSS

CLASE 217 JAVA POLIMORFISMO

CLASE 218 JAVA POLIMORFISMO

CLASE 219 JAVA POLIMORFISMO

CLASE 220 JAVA POLIMORFISMO

CLAVE 221 JAVA POLIMORFISMO

 CLASE 222 JAVASCRIPT

Para imprimir algo, console.log(“algo”); ir a terminal, nuevo terminal, node nombre del archivo,
apretar tab y luego enter para que se imprima en la terminal

CLASE 223 JAVA POLIMORFISMO

CLASE 224 JAVA POLIMORFISMO

Protected lo pueden ver las clases hijas y las que están dentro del mismo paquete.

Si al hacer un método queremos retornar un atributo que esta en la clase padre, dentro del
return poner super. getnombre del atributo()

CLASE 225 JAVA POLIMORFISMO

Si tenemos dos métodos en la misma clase que varían en el número o tipo de parámetros. Esto
se llama sobrecarga de métodos.

La sobrecarga no tiene en cuenta la visibilidad o retorno del método, solo los parámetros y no
depende de la herencia.

CLAVE 226 JAVA POLIMORFISMO

El polimorfismo es cuando el mas generico (clase padre, funcionario) puede ser adaptado a mas
especifico (clase hijo, gerente)

CLASE 227 JAVA POLIMORFISMO

CLASE 228 JAVA POLIMORFISMO

CLASE 229 JAVASCRIPT

CLASE 230 JAVASCRIPT

Si asigno una variable del tipo const, lo que esta del lado derecho nunca se va a poder cambiar y
si lo quiero hacer, el código no va a compilar. Si el valor de la variable va a variar, poner tipo de
dato let . Para concatenar string usar +. Para convertir string a int o floar poner parseInt o
Float(‘lo que quiero convertir’)

El orden de prioridad en cuanto a operaciones matemáticas es: () ,* y / , + y –

CLASE 231 JAVASCRIPT

Var esta en desuso es tipo let pero con + alcance(ósea que se ejecuta fuera de los bloques{} )

CLASE 232 JAVASCRIPT

Los template string (alt 96 ``) sirve para evitar constantes concatenaciones y la estructura es:
`texto si queremos: ${nombre de la variable que quiero que se imprima, ósea hay una
interpolacion}`; y al imprimirla salen con espacios. ABAJO HAY UNA FOTO DONDE SE PUEDE VER

CLASE 233 JAVASCRIPT

Para hacer un array const nombre=new Array(contenido en cualquier tipo de dato, se puede
mezclar) sino después del = [contenido] para agregar un elemento al final del array
nombre.push(lo que quiero agregar) y para agregar al inicio unshift

CLASE 234 JAVASCRIPT

Se pueden imprimir posiciones especificas dentro del console.log(nombre de la lista[nro

posicion]). Funcion splice(numero de posición en la que a partir de ahí se van a eliminar cosas
de la lista, la cant. De elementos que quiero que se borren de ahí en adelante, elementos que
quiero agregar ej ‘Venezuela’, ‘Paraguay’, etc) LOS ELEMENTOS NUEVOS QUEDAN EN LA
POSICION/ES ELIMINADAS. Info completa sobre arrays:
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array

CLASE 235 JAVASCRIPT

.length para saber la cantidad de elementos de un array, .shift para eliminar el primer
elemento, .pop para eliminar ultimo elemento, dentro de un const=nombre del array a
filtrar.filter((nombre que queremos)=> nombre que queremos junto con una condición ej >=45)
asi imprime en un nuevo array los elementos que cumplen con esa condición, .join(‘con lo que
quiero separar cada elemento de la lista y lo convierte en una cadena de caracteres ej -’) dentro
de un console.log, .sort para ordenar la lista, .indexOf(elemento cuya posición queremos
saber), para unificar array dentro de un const=nombre del primer array que queremos
unir.concat(nombre del otro array que queremos unir);

CLASE 236 JAVA POLIMORFISMO

 CLASE 237 JAVA POLIMORFISMO

CLASE 238 JAVA POLIMORFISMO

CLASE 239 JAVA POLIMORFISMO

Si creo una clase hija de un padre abstracto y no quiero implementar el método abstracto que
esta dentro del padre, hacer a la clase hija abstracta

CLASE 240 JAVA POLIMORFISMO

CLASE 241 JAVA POLIMORFISMO

CLASE 242 JAVASCRIPT

== sirve para comparar datos independientemente si son de distinto tipo, en cambio === tienen
que tener (variable y condicion) el mismo tipo de dato

CLASE 243 JAVASCRIPT

CLASE 244 JAVASCRIPT

CLASE 245 JAVASCRIPT

CLASE 246 JAVASCRIPT

Para recorrer un array con while, fuera de este inicializar una variable en 0 luego dentro de la
condición nombre del array [variable inicializada en 0]{variable inicializada++;} poner algo a
elección ejemplo console.log

CLASE 247 JAVASCRIPT

Para hacer un mapa, poner una const=[{‘titulo’: contenido, y repetir hasta terminar}, lo que
sigue] y para recorrerlo poner un while como el anterior pero hay que poner el nombre de la
variable inicializada < nombre del mapa.length && nombre del mapa[variable inicializada]. ‘algo
de lo que esta entre esto en el map’

CLASE 249 JAVASCRIPT

Para depurar en visual studio, ir a la izquierda y poner el cuarto icono luego la primera opción
luego en el código poner en el margen izquierdo un punto en donde queremos hacer un
breakpoint y nos muestra visual studio que es lo que pasa en la ejecución
 CLASE 250 JAVASCRIPT

JSON es un archivo tipo mapa y en donde dice name, al lado poner el nombre junto con la
extensión del archivo que queremos debugear luego apretar el icono verde luego chequear lo
que sale en la consola de depuración

CLASE 251 JAVASCRIPT

CLASE 252 JAVA POLIMORFISMO

CLASE 253 JAVA POLIMORFISMO

Si cuando realizamos una interfaz, queremos que un método tenga algún tipo de
implementación (ej setearlo) antes de definir el tipo del método poner default y luego el tipo ej
default int. Todos los métodos son SI O SI abstractos (por defecto) y para implementarlos, solo
en las clases donde se llamna a la interface

CLASE 254 JAVA POLIMORFISMO

No se pueden poner atributos private en la interface, una interface SOLAMENTE puede heredar
de otra interface, se puede poner como parámetro también

CLASE 255 JAVA POLIMORFISMO

CLASE 256 JAVA POLIMORFISMO

Para evitar que varias clases tengan el mismo método con la misma lógica, en una clase aparte
poner esos métodos y lógica

CLASE 257 JAVA POLIMORFISMO

Para implementar lo anterior ponerlo como atributo ej private nombre de la clase que quiero
implementar variable luego dentro del constructor sin parámetros this.variable= inicializar la
clase del atributo; luego ir a los métodos que coincidan en nuestra clase y en la que queremos
implementar, en el return poner this. Nombre del atributo. Nombre del método nombre del
parámetro del metodo); y si es tipo void this. Nombre del método (nombre del parametro);

CLASE 258 JAVA POLIMORFISMO

CLASE 259 JAVA EXCEPCIONES

 CLASE 260 JAVA EXCEPCIONES

Una pila de Java es parte de la JVM (maquina virtual) y almacena los métodos que se están
ejecutando. Además del bloque de código, la pila almacena las variables y referencias de ese
bloque. Entonces, la JVM organiza la ejecución y sabe exactamente qué método se está
ejecutando, que es siempre el método en la parte superior de la pila. La JVM también sabe qué
otros aún deben ejecutarse, que son precisamente los métodos que continúan.

CLASE 261 JAVA EXCEPCIONES

Hacer doble click en donde quiero ver la ejecución del programa para debugear y se tiene que
ver un punto violeta luego apretar el bichito luego en la izquierda se ven 3 lineas azules y eso
representa la pila. Si aparece disconnecte dsignifica que el debug ya se termino

CLASE 262 JS DOM

Abrir una nueva terminal y poner git checkout -b “nombre al que queremos poner al archivo” y
para ver si esto fue exitoso, enter y tiene que aparecer switched to a new Brand ‘lo que puse
entre comillas dobles’ asi se creo una rama en git para luego unificarlo con otras ramas. Ir al
index, click derecho, abrir con live server

CLASE 263 JS DOM

Para cambair el texto desde la consola de js en el navegador, ir a consola y poner

document.querySelector(“nombre de la etiqueta/class/id al que le queremos hacer el
cambio”).textContent=”lo que quiero como nuevo texto” despues poner enter

CLASE 264 JS DOM

CLASE 265 JS DOM

CLASE 266 JAVA EXCEPCIONES

Un error es cuando sucede un suceso inesperado en el código que impide la ejecución del
mismo, thread es el flujo de ejecución

CLASE 267 JAVA EXCEPCIONES

CLASE 268 JAVA EXCEPCIONES

CLASE 269 JAVA EXCEPCIONES

La primera parte es el nombre de la excepción. La primera parte es qué excepción lanzó. La
segunda parte es el mensaje. Hay excepciones que te da un mensaje sobre exactamente qué
fue lo que ocurrió, qué es lo que pasa aquí. División por cero. La tercera parte es lo que
llamamos el stack trace o en español, lo que sería pues la traza de la pila, lo que la pila fue
recorriendo, y dejó

CLASE 269 JAVA EXCEPCIONES

Si creo que en alguna parte del código va a haber un error, poner try{poner aca adentro el
código con los posibles errores}catch(nombre de la excepción que va a atraer luego asignarle
un nombre ej AritmethicExcepcion nombrelol){poner lo que queremos que sucede ejemplo
imprimir esta variable. Usar algunos de los métodos ej equals} y si queremos obtener el stack
trace, dentro del catch nombre de la variable.printStackTrace() Esto hace que el programa siga
su flujo de ejecución a pesar de ese error, se pueden hacer varios catch siempre y cuando el
tipo de error sea diferente cada vez que hagamos uno. Tambien se pueden poner mas de 1
excepcion en un mismo catch asi (nombre excepción 1 | nombre excepción 2 variable)

CLASE 270 JAVA EXCEPCIONES

CLASE 271 JS DOM

Para guardar los nuevos cambios en el git, poner nueva terminal y poner git add -A, ejecutar,
luego git commit -m “comentarios acerca de los nuevos cambios” después crear otra rama en
git. Para hacer que el botón tome un evento, ir al codugo donde esta el botón y poner al lado
del class data-form-btn asi cuando alguien cambia el nombre de la clase, el código sigue
funcionando luego en el js poner dentro de un const lo del querySelector(‘[poner el data]’)
luego nombre del const.addEventListener(‘nombre del listener que quiero ej click’, lo que
quiero que pase una vez que el usuario genera esa acción ej function(){accion} luego en
inspeccionar, consola, apretar la rueda y tildar segunda opción a la izquierda para evitar que se
vaya lo que pusimos cada vez que la pagina se actualiza

CLASE 272 JS DOM

Poner en el input data-form-input y despues ponerlo en el querySelector dentro de la function

creada, asi captamos lo que el usuario escribe en el formulario

CLASE 273 JS DOM

Para evitar que por defecto el formulario se actualice cada vez que se apreta el botón, ponerle
un nombre al parámetro de la función luego dentro de esta poner el nombre del
parámetro.preventDefault() luego eliminar function y después del parámetro poner => para
que la función sea anónima
 CLASE 274 JS DOM

Para que al apretar el botón, lo que escribamos se borre, dentro de la función poner un
const=nombre const con el data input. value luego a esto ultimo ponerlo abajo= “” asi lo que se
hace es que después de apretar, se crea y muestra un string vacio dentro del input del
formulario. Ir a HTML donde quiero que el texto se ponga (ósea en el elemento donde quiero
que se modifique el contenido en base a lo que puse en el input) luego hacer un const cuyo
querySelector sea ese data luego hacer otro const=`poner el código html correspondiente a la
parte donde queremos que se ponga el texto del input y al lado del span>${poner nombre del
const con el .value}` luego para que se vea nombre del value con el querySelector con el
task.innerHTML= nombre del const con el código html

CLASE 275 JS DOM

Para que cada vez que asignemos una tarea, se cree una nueva tarjeta ir al html y poner data-
list donde quiero que se origine esta nueva carta luego ir al JS y en donde pusimos el data-task
poner.createElement(“nombre del elemento html que queremos ccrear ej li”) luego hacer un
querySelector con el data-list después con ese const.classList.add(‘nombre al que le queremos
poner a esa clase’) luego con ese const.appendChild(nombre del const con el createElement)
luego guardar los cambios en git.

Todos los elementos en nuestro árbol de DOM son nodos y todos los nodos pueden ser
accedidos vía JavaScript. Los nodos pueden ser eliminados, creados o modificados. Durante el
curso utilizamos el método appendChild que siempre es implementado al final del nodo, para
colocar un nodo hijo dentro del nodo padre. Existen otros métodos que podemos utilizar para
manipular nodos:

 insertBefore(padre, hijo): Coloca un nodo antes del otro

 replaceChild(elemento1, elemento2): Sustituye el nodo del elemento 1 por el nodo del
elemento 2
 removeChild(elemento): Remueve un nodo del árbol

CLASE 276 JAVA EXCEPCIONES

CLASE 277 JAVA EXCEPCIONES

Las excepciones también son objetos y nosotros podríamos crear nuestras propias excepciones
también. Vamos a crear nuestra propia excepción por ejemplo ArithmeticException, entonces
voy a decirle ArithmeticException y declararlo como un objeto Y si yo quiero, crear una
referencia a ese objeto, entonces le puedo dar un new ArittmeticException y para que esta
excepción se ejecuta, debajo del objeto previamente creado poner throw nombre del objeto
SOLO SE PUEDE USAR THROWPARA OBJETIPO DE TIPO EXCEPCION
 CLASE 278 JAVA EXCEPCIONES

Si pongo throw, debajo no tiene que haber código, ósea que tiene que ser la ultima línea
también se puede inicializar la excepción dentro del throw tipo throw new nombre de la
excepción()

CLASE 279 JS DOM

Para el estilo cambie cuando le indicamos que la tarea se realizo, donde tengo el
addEventListener del botón, lo que voy a hacer es crear una nueva función y es anónima,
adentro poner con const =document.createElement(‘nombre del const’)

Después lo que voy a hacer es agregarle las clases donde queremos que modifique. Vamos
entonces a poner: nombre del const.classList.add(‘nombre de la clase’) luego para que retorne
poner return nombre del const. Mas arriba en el código, poner dentro de un console.log al
nombre de la función anónima creada. Debajo, poner un const=document.
createElement(‘nombre de la etiqueta que queremos crear’) luego para agregarle subclases a la
clase creada en el créate, poner el nombre del const donde esta el
createElement.classList.add(“nombre de la subclase que queremos”) comentar lo del
innerHTML, luego dentro del const con el código HTML poner dentro del const donde creamos
el elemento principal.appendChild(nombre del const donde se creo el elemento hijo) luego
abajo del classList para poder cambiar el contenido del mismo nombre del const donde quiero
cambiar el contenido.innerText= nombre del const que toma lo que el usuario pone luego
agregar la función anónima y el const con la creación del elemento que sufre la modificacion
con appendChild en el elemento padre para que se muestre lo anterior OJO CON EL ORDEN DE
LOS APPENDCHILD YA QUE SE AGREGAN EN BASE A LO QUE AGREGUES PRIMERO

CLASE 280 JS DOM

Para evitar poner .add y agregar cada clase, en un solo add ponerlas todas entre ‘’ y separadas
con comas.

Para darle funcionalidad al apretar el botón para indicar que una tarea esta hecha, dentro de la
función anónima y luego del add poner .addEvenListener(‘click’, nombre de la función con los
toggle’). Para captar el cambio a la hora de apretar el mouse, hacemos otra función anónima
con un parámetro dentro crear un const=parámetro.target ESTO NOS PERMITE SABER QUE
ESTA TOCANDO EL USUARIO luego para seleccionar y deseleccionar el botón, debajo de lo
anterior ponemos el nombre del const.toggle(‘nombre de las clases correspondientes al boton)

CLASE 281 JS DOM

Para evitar que el usuario a través de la consola de inspeccionar, se le autocompleten el
nombre de las funciones utilizadas en el código vamos a utilizar algo que se llama immediately
invoked function expression o bien por sus siglas: IIFE, que es tal cual, son funciones que en
cuanto se declaran, se ejecutan.

Entonces para poder ver cómo es que funciona lo que vamos a hacer es ir al inicio del código y
hacer una función anónima ( (){código})(); luego si vamos a la consola e intentamos llamar o
autocompletar con el nombre de la función, no va a aparecer y si lo ponemos salta un error
diciendo que no esta definido

CLASE 282 JS DOM (ver github)

Para agregar el icono del tacho de basura, crear un const para luego hacerla una función
anónima y dentro de esta crear un const=document.createElement(‘nombre del const’) luego
con el classList.add(‘poner nombre de las clases que quiero agregar’) poner un
addEvenListener(‘click’, nombre de la función con el target.parentElement)luego en el return
poner el nombre del const con el createElement luego agregar las 2 funciones con
appendChild() hacer una función con un parámetro poner una
const=parámetro.etarget.parentElement con esto podemos saber cual es el elemento padre
que debe eliminarse luego imprimimos ese const

CLASE 283 JS DOM

[00:00] Muy bien, entonces en para continuar con nuestro proyecto o ya nada más para darle
los últimos detalles, lo que vamos a hacer es implementar algo que se llaman módulos.
Entonces, ¿qué es lo que necesitamos? Pues bueno, lo que nosotros podemos ver aquí es que
tenemos 55 líneas.

[00:22] Y lo que nosotros entonces podemos hacer es crear justamente módulos, los cuales se
van a encargar solamente de contener cierta parte de código, entonces para poder hacer eso,
lo que voy a hacer aquí es crear una carpeta que se va a llamar components. Muy bien, ahora
entonces voy a crear un archivo que se va a llamar checkComplete.

[00:51] Y también voy a crear otro archivo que se va a llamar deleteIcon. ¿Esto por qué? Porque
son elementos diferentes. Tenemos este de acá, que es para crear el icono de checkComplete y
la función que se va a mandar a llamar cuando le dan clic y lo mismo con el deleteIcon y la
función deleteTask. Entonces bueno, voy a crear el otro archivo que se va a llamar deleteIcon.js.
Muy bien.
[01:23] Ahora entonces lo que voy a hacer es venir, voy a cortar todo este código. ¿Cuál es? Es
el checkComplete que es este de aquí. Voy a guardar, voy a venir aquí y voy a cortar también de
nuevo esto de acá, que es el deleteIcon. Ahora nosotros ya tenemos nuestro código separado,
por así decirlo, pero lo que necesitamos es de alguna manera importarlo aquí.

[02:02] De hecho, si nosotros, por ejemplo venimos aquí, voy a quitar el IFEE, voy a guardar, voy
a regresar de nuevo aquí a mi a mi código. Vamos a ver qué pasa, voy a recargar. Hacer curso
de react. Me aparece un error, me dice que createTask no está definido. Bueno, checkComplete
no está definido.

[02:29] Entonces lo que necesitamos es, así como nosotros lo estamos creando aquí,
necesitamos exportarlo. ¿Cómo hacemos eso? Con un export default. ¿Y cuál es lo que
queremos exportar? deleteIcon. Voy a guardar y lo mismo voy a hacer con el checkComplete:
export default checkComplete.

[02:55] Ahora entonces, así como nosotros tenemos un export, también tenemos un import y
los imports, bueno, vamos a ponerlos hasta aquí arriba. Lo que voy a hacer entonces es import
checkComplete. ¿De dónde? Pues bueno, le tenemos que dar la ruta. Entonces esta ruta puede
ser con punto, slash, y aquí ya me hace el autocompletado.

[03:18] Vive dentro de la carpeta components y el archivo se llama checkComplete. Y después

voy a hacer lo mismo con el import deleteIcon. ¿De dónde? Pues bueno, va a ser igual, de la
misma ruta, components, pero ahora vamos a apuntar a nuestro archivo deleteIcon. Voy a
guardar. Voy a regresar aquí. Vamos a recargar.

[03:43] ¿Qué es lo que me dice? Que nosotros no podemos importar fuera de un módulo. ¿Esto
por qué? Porque simplemente aquí lo que estamos haciendo es decirle que importe un archivo
script, pero necesitamos definir que es de tipo módulo, entonces vamos a ponerle que es type.
¿Y cuál es el type? Va a ser de type="module".
[04:02] Voy a guardar. Entonces bueno, aquí me está apareciendo un error, vamos a ver por
qué es ese error. Vamos a ver aquí. En la consola deleteIcon, vamos a ver, al parecer hubo aquí
un tema, vamos a ver aquí import. Sigue habiendo aquí algún tema. Vamos a ver qué es lo que
tiene /components/checkComplete. Vamos a ver, vamos a ponerle la extensión .js. Vamos a
guardar, vamos a regresar aquí y listo.

[04:37] ¿Cuál era el tema? El tema es que el autocompletado simplemente me puso a

checkeComplete pero no puso la extensión, entonces por eso no podía acceder. Vamos a ver
entonces aquí: Hacer curso de react, vamos a agregarlo, vamos a ver, vamos a darle entonces
aquí para decirle que ya hice esta tarea, hacer curso de node. Vamos a agregar.

[05:02] Muy bien. Podemos eliminar y listo, sigue funcionando. Muy bien. Entonces, nosotros
ya pudimos separar nuestro código, ponerlo en diferentes archivos y mandar a llamar ese
código conforme lo necesitemos. Muy bien. Hasta aquí ya terminamos nuestro proyecto, ya
somos capaces de crear diferentes tareas.

[05:23] Pero hay un tema. ¿Qué pasa por ejemplo si yo recargo? Se elimina la tarea. Hacer
curso de node. Por más que yo venga y le esté dando aquí reload, lo que va a pasar es que se va
a eliminar. Esto porque no estamos almacenando la información. Muy bien.

CLASE 284 JS EN LA WEB

Minlength=”nro de caracteres minimos” maxlength=”nro de caracteres máximos”

CLASE 285 JS EN LA WEB

i nosotros quisiéramos pasarle propiedades como lo hicimos aquí, de decirle cuál iba a ser la
longitud mínima y la longitud máxima, realmente no sería tan conveniente. Lo que nosotros en
cambio vamos a poder utilizar es algo llamado the pattern, que sería patrón.

[00:53] Voy a eliminar estos dos de aquí, voy a escribir aquí pattern. Este pattern lo que va a
recibir es una expresión regular. Entonces, en caso de que no hayas visto o no sepas muy bien
qué es una expresión regular, aquí en Alura tenemos un curso igual impartido por mí o si no
igual puedes simplemente venir al navegador, poner regex contraseña, regex es password.
Vamos a ver aquí, por ejemplo, de aquí regexlib.
[01:36] Aquí bueno, ya tienen diferentes opciones o expresiones que han desarrollado otras
personas, en las cuales o te puedes basar o simplemente puedes copiarlos y pegarlos. Esta sería
una opción. También está el sitio más popular creo que de todos los programadores que es esta
Cover Flow, y pues igual aquí, en este caso, pues puedes encontrar cuál sería la respuesta.

[02:01] Entonces aquí como comenta, pues bueno, al menos 8 caracteres y al menos una letra y
un número, entonces, toda esta expresión regular genera ese patrón que nosotros buscamos
dentro de nuestro input de contraseña. Pero bueno, yo no voy a tomar ninguno de estos, yo ya
tengo aquí uno definido, que es esta expresión regular de aquí. Y vamos a pegarlo también aquí
abajo para ver de qué se trata.

[02:40] Lo que nosotros tenemos es estos símbolos. Uno, que es como un acento, lo voy a hacer
un poco más grande este acento y cierra con el símbolo de peso. Lo que prácticamente le estoy
diciendo aquí es que quiero que evalúe todo nuestro texto con esta lógica.

[03:04] Después, lo que tenemos aquí son diferentes conjuntos de reglas que queremos que se
apliquen a este texto. En este caso son cuatro. El primero es ?=. Lo que estamos diciendo
prácticamente es que vamos a aceptar caracteres siempre y cuando, cuando el punto, este
punto lo que hace referencia es que no sean saltos de línea o enters.

[03:31] Entonces lo que estamos diciendo, vamos a aceptar dígitos o números o cualquier
carácter realmente. Y ahora con * lo que le estamos diciendo es que tiene que venir al menos
una vez y este al menos una vez, pues bueno, va a ser sobre este conjunto, es decir, desde la A
minúscula hasta la Z minúscula.

[03:49] Ahora, si te das cuenta realmente tanto el primero, el segundo y el tercer conjunto de
reglas, pues es prácticamente lo mismo. Lo único que va a cambiar es qué es lo que nosotros
estamos aceptando. En el primero de la A minúscula a la Z minúscula, el segundo, de la A
mayúscula, a la Z Mayúscula, el tercero del 0 al 9 para poder aceptar números.
[04:15] Y el último que nosotros tenemos aquí, lo que le estamos diciendo es prácticamente
nosotros no vamos a aceptar, igual de nuevo, saltos de línea o al menos un espacio en blanco,
un símbolo de admiración, @, #, gato o almohadilla, como le digan, símbolo de peso,
porcentaje y así sucesivamente.

[04:40] Y por último, lo que le estamos definiendo aquí es que queremos que se cumplan esta
serie de reglas, y tiene que ser entre 6 a 12 veces. Es de esta manera en la cual nosotros le
estamos definiendo que nuestra contraseña tiene que tener al menos 6 caracteres y máximo,
12 caracteres.

[04:59] Muy bien, voy a eliminar entonces esto de aquí. Voy a regresar de nuevo aquí a mi
input. Si recuerdas, pues bueno, simplemente lo que hicimos fue poner entre comillas la
expresión regular y le estamos asignando a pattern. Lo voy a guardar, voy a regresar de nuevo a
mi navegador. Voy a cerrar esta de aquí, voy a poner mi nombre.

[05:24] [email protected] y la contraseña pues bueno, la voy a poner ahorita solo 5

caracteres. Le voy a dar clic en registrar. Y ahora me comenta: Haz coincidir el formato
solicitado. Yo sé que se necesitan al menos 6 caracteres. Voy a ver qué pasa si sigo escribiendo
6 caracteres, le voy a dar clic en registrar, en este caso me dejó escribir, ya no me puso un
máximo de caracteres como tal, pero pues de nuevo me está comentando que necesito
coincidir el formato solicitado.

[06:00] Entonces nosotros sabemos, porque lo estamos programando, cuál es ese formato que
nosotros queremos en ese input, pero necesitamos decirle al usuario cuál es ese formato.
Entonces para poder llegar a eso, lo que voy a hacer aquí es igual dentro del mismo input de la
contraseña, lo que voy a escribir entonces es algo llamado title.

[06:25] En este title voy a decir un texto que le explique al usuario cuál es este formato. Le voy
a poner al menos 6 caracteres, un máximo 12, debe contener una letra minúscula, una letra
mayúscula, un número y no puede contener caracteres especiales. Muy bien, entonces voy a
guardar.
[07:13] Le voy a poner un punto final, voy a guardar. Voy a regresar aquí a mi proyecto, voy a
poner entonces mi nombre, mi correo electrónico, la contraseña y ahora, como puedes darte
cuenta, yo escribí solo 5 caracteres y ya ahora sí me está dando un texto explicativo de cuál es
el formato o el patrón que nosotros estamos esperando.

[07:37] Entonces es: Al menos 6 caracteres máximo 12, debe contener una letra minúscula, una
letra mayúscula, un número y no puede contener caracteres especiales. Entonces bueno, solo
para recapitular, si nosotros quisiéramos justamente tener ciertas reglas respecto a la
información que ingrese el usuario, nosotros vamos a utilizar una expresión regular y la vamos a
asignar aquí a nuestro pattern.

[08:06] Al momento de hacer eso, nosotros ya no vamos a tener un texto, por así decirlo que le
diga al usuario qué es lo que le está faltando o cuál es el formato esperado y para eso vamos a
utilizar la propiedad title.

CLASE 286 JS EN LA WEB

Bueno, ya conseguimos entonces definir que el nombre es requerido, el correo electrónico

también es requerido y tiene que tener al menos el @. También ya insertamos a un pattern o
un patrón que nosotros queremos en el campo de la contraseña. Vamos a continuar entonces
con el input de fecha de nacimiento.

[00:21] Ahorita como está actualmente yo realmente puedo escribir lo que quiera, si te das
cuenta. Esto no es un formato válido para una fecha de nacimiento. Entonces, lo primero que
voy a hacer es voy a venir a mi formulario y lo que voy a hacer entonces aquí en fecha de
nacimiento tenemos aquí el input.

[00:43] Lo que voy a hacer es escribirle que es requerido y el tipo ahora lo voy a cambiar para
que sea de tipo date. Voy a guardar, voy a regresar a mi proyecto, y ahora ya cambió.
Anteriormente era simplemente un input, pero ahora ya nos aparece un icono que hace
referencia a un calendario y el formato de la fecha.

[01:07] Entonces yo puedo escribir aquí la fecha, por ejemplo, esta de aquí, o bien, pues bueno,
puedo darle clic al iconito y pues puedo ir aquí jugando con las fechas. Muy bien. Entonces
imagina que nosotros tenemos una regla en la cual solamente vamos a dejar que se complete el
formulario o que este input sea válido, siempre y cuando sea mayor de 18 años.

[01:40] Es decir, que al menos haya nacido hace 18 años. Lo que voy a hacer entonces es voy a
venir al código, voy a generar un archivo JavaScript, porque toda esta lógica ya la vamos a hacer
con código de JavaScript. Ya no vamos a utilizar como tal a pattern porque realmente no
podemos definir todo ese tipo de reglas tan específicas.

[02:07] Entonces lo que voy a hacer es voy a crear una carpeta que se llame JS, aquí dentro de
JS le voy a poner el nombre de validaciones.js. Muy bien. Lo que voy a hacer entonces aquí, solo
para corroborar que tenga mi archivo bien vinculado, voy a poner un console.log, voy a
guardar.

[02:36] Aquí en mi archivo de registro.html, antes de que cierre el body, lo que voy a hacer es
escribir una etiqueta script, abre y cierra y le voy a decir cuál es el source. En este caso va a ser
js.validaciones. Voy a guardar. Voy a regresar a aquel proyecto, le voy a dar clic derecho
inspeccionar aquí en la parte de la consola y aquí tengo mi consola de validaciones.

[03:06] Ya tenemos entonces funcionando la conexión entre el archivo HTML y el archivo JS.
Ahora lo que yo quiero es que cuando yo salga de este input, es decir, cuando yo termine de
completarlo y salga, verifique si la fecha que yo ingresé es mayor o hace referencia a que tengo
más de 18 años. Entonces vamos a hacer eso.

[03:40] Lo primero que voy a hacer es encontrar dentro de todo mi DOM este input, en este
caso este input puedo acceder a él a través del id “birth”, que hace referencia a la fecha de
nacimiento. Voy a hacer entonces aquí una constante que se llame inputNacimiento =
document.querySelector. Y entre paréntesis le voy a decir cuál es el id de mi input.

[04:21] Es este de aquí. Voy entonces a poner, a este input voy a agregarle un
addEventListener. InputNacimiento.addEventListener. ¿Y cuál es el tipo de evento que yo
quiero escuchar? Pues bueno, cuando salga, entonces va a ser “blur” o cuando quite el input o
el foco de ese espacio o de ese input.
[04:45] Después voy a ponerle aquí una función anónima, voy a recibir mi evento, voy a poner
entonces aquí solo un console.log(evento.target); voy a guardar, voy a regresar aquí. Voy a
seleccionar aquí alguna fecha, le voy a dar clic en registrar y aquí entonces ya estamos
obteniendo nuestro input.

[05:14] Ahora vamos a crear una función que se va a llamar validarNacimiento. Esta función lo
que va a hacer es recibir nuestro input. Muy bien. Es más, vamos a agregarlo aquí de una vez,
en lugar del console.log, lo que voy a hacer es validar nacimiento. Una vez que yo recibo el
input, a mí como tal no me interesa en este momento este input de aquí, sino lo que yo quiero
acceder, es al valor.

[05:50] ¿Entonces, cómo accedo a ese valor? Pues bueno, vamos a crear una nueva constante
que se llame fecha y esta fecha va a ser input.value. Un console.log(fecha); voy a guardar, voy a
venir de nuevo aquí a mi proyecto, voy a seleccionar alguna fecha y aquí tenemos la fecha. En
este caso, por el formato que recibe, es año, mes y día, por eso es 2021-08-01.

[06:24] Ahora, entonces, ¿qué más vamos a hacer? Bueno, necesitamos verificar de alguna
manera si esta fecha que nosotros estamos ingresando es mayor o tiene una diferencia de al
menos 18 años, para corroborar que nosotros o el cliente que está llenando esta información es
mayor de edad.

[06:45] Para eso, bueno, voy a crear una función que se va a llamar mayorDeEdad. Lo que va a
recibir entonces aquí es la fecha. Muy bien, entonces voy a tener esta función, que es
mayorDeEdad, y lo que voy a hacer aquí primero es crear una nueva instancia de nuestra clase
date y lo que voy a hacer es mandarle este input.value.

[07:22] Vamos a guardar, vamos a regresar a ver qué es lo que obtenemos. Seleccionamos una
fecha, registrar y aquí ya tenemos nuestra fecha. ¿Ahora qué más necesitamos? Bueno,
necesitamos verificar si es mayor de edad, por eso vamos a recibir esta fecha.
[07:42] Vamos entonces a tener que hacer la comparación entre la fecha de hoy y la fecha que
ingresó el usuario. Voy a crear entonces aquí una nueva fecha que se llama fechaActual, que
simplemente lo que vamos a hacer es crear una nueva instancia de la clase date y al momento
de simplemente definirla, no necesitamos especificarle nada, ya lo va a hacer
automáticamente.

[08:11] Vamos a poner aquí mi console.log de fecha actual y esta fecha le voy a cambiar el
nombre, tal vez como fechaCliente. Lo voy a poner aquí y en lugar de hacer el console.log, voy a
poner aquí mayorDeEdad. Vamos a guardar este, vamos al navegador, entonces y voy a poner
aquí la fecha que estamos recibiendo, que es fechaCliente y la fecha actual.

[08:51] Voy a poner aquí solo para separarlo algunos espacios. Voy a seleccionar aquí otra
fecha, tal vez aquí. Bueno, aquí. Voy a seleccionar otra fecha. Bien. ¿Qué es lo que tenemos
aquí? Tenemos la fecha que puso el cliente, que es 31 de diciembre del 2008, y la fecha de hoy,
que es primero de agosto del 2021.

[09:31] Entonces ahora lo que vamos a necesitar es hacer la comparación. Vamos a ver cómo lo
vamos a realizar. Muy bien, lo que vamos a hacer entonces es crear una nueva constante que se
llame diferenciaFechas, va a ser igual a una nueva instancia de la clase date, en la cual le voy a
poner la fecha que estamos recibiendo aquí, punto getUTCFullDate() + 18 años.

[10:10] Como segundo parámetro va a recibir el mes, que en este caso va a ser
fecha.getUTCMonth(), y por último, fecha.getUTCFull. Aquí, perdón es FullYear y aquí es
FullDate. Y vamos ahora a hacer el console.log(diferenciaFechas); vamos a seleccionar aquí
alguna fecha.

[11:07] Bueno. Voy entonces a buscar cuáles son los métodos. Aquí tenemos getUTCDATE,
getUTCFullYear. Entonces aquí tenemos la referencia de todos los métodos a los cuales vamos a
poder acceder. En este caso, me parece que getUTCFullYearm, getUTCMonth y getUTCDate.
Este FUllDate no debería de venir aquí.
[11:48] Vamos a guardar, vamos a volver a verificar aquí. Voy a seleccionar una nueva fecha.
Entonces, ¿cuál es la diferencia o qué es lo que estamos obteniendo aquí? Lo que estamos
obteniendo es la fecha que está ingresando el usuario como fecha de nacimiento y le estamos
agregando 18 años. ¿Para qué?

[12:13] Para obtener por ejemplo este 2031. 2013 + 18, nos da 31, entonces por eso la fecha
nos está mostrando 2031. Ahora lo que necesitamos regresar o verificar es si la fecha actual es
menor o igual a la diferencia de fechas. Vamos a ver qué obtenemos. Voy a seleccionar aquí
una fecha entonces.

[12:50] Me está diciendo true. Entonces al nosotros obtener este true, ¿qué es lo que nos está
comentando? O sea que esta fecha actual, que era la fecha en la que estamos ahorita es menor,
entonces nosotros tenemos al revés nuestra validación. Lo que puedo hacer aquí es
simplemente fechaActual.

[13:28] Vamos a ver qué es lo que obtenemos, voy a seleccionar aquí de nuevo otra fecha.
False. ¿Entonces en este caso esta fecha tiene al menos 18 años o esta persona que nació en
este día o en esta fecha tiene al menos 18 años? Falso. ¿Qué pasa si yo vengo y lo voy a cambiar
ahora por alguien que nació en el 2012 en enero?

[13:58] True. Entonces, la persona que nació el primero de enero del 2002 ya tiene al menos 18
años. Entonces, con esta función ya lo que hicimos fue obtener o saber si una persona es mayor
o no de edad. Lo único que vamos a hacer en lugar de hacer el console.log es vamos a regresar
esto de aquí.

[14:19] Al momento de regresarlo, pues bueno, ¿qué es lo que necesitamos? Necesitamos

verificar si es o no mayor de edad a través de lo que nos está regresando. Y aquí viene algo
interesante, nosotros tenemos nuestro input, pero vamos a necesitar algo que se llama
setCustomValidity.
[14:44] Vamos a ver, al buscarlo, qué es lo que tenemos. El método SetCustomValidity define el
mensaje de validación personalizado para el elemento seleccionado. Aquí con la contraseña,
ves que si yo le doy clic aquí en registrar, bueno, tengo el nombre, disculpa.

[15:15] Aquí me aparece este texto, pues bueno, eso lo vamos a poder rellenar de una manera
dinámica con Este setCustomValidity. Entonces es una función que va a recibir un mensaje. Este
mensaje voy a hacer una variable let, donde el mensaje primero va a estar vacío, y si es mayor
de edad, simplemente no nos importa darle ningún mensaje, porque esa es la idea que
nosotros queremos, que sea mayor de edad.

[15:50] Entonces lo que voy a hacer es negarlo. Si no es verdadero, en este caso false, si es
false, quiero que el mensaje sea: “Debes tener al menos 18 años de edad”. Voy a guardar.
Vamos a ver qué es lo que obtenemos. De nuevo voy a poner aquí mi nombre, mi correo, la
contraseña, le voy a dar clic en registrar. Tengo que seguir el patrón.

[16:33] Okay, completa este campo, le voy a decir que este usuario nació en el 2014 en enero.
Clic en registrar y, como puedes darte cuenta, aquí ya me está pareciendo, debes tener al
menos 18 años de edad. Entonces vamos a hacer ahora la prueba con alguien que pues sí ya
tiene más de 18 años.

[17:00] Aquí ya el formulario sigue trabajando, ya me redireccionó a esta vista. No le hagan

caso a esto de aquí, es una extensión. Pero bueno, lo importante es que ya nosotros estamos
avanzando con nuestro formulario, ya aprendimos que es el SetCustomValidaty, ya también
estuvimos checando esta parte de las fechas.

CLASE 287 JS EN LA WEB

Bueno, vamos a continuar. Nosotros ya logramos saber si la fecha de nacimiento es mayor a 18

años, pero lo que nosotros hicimos aquí de esta constante de input nacimiento, el
querySelector, yendo solamente a una id no es tan buena práctica.

[00:21] Además, nosotros queremos que este addEventListener lo podamos reutilizar, es decir,
no solamente utilizarlo para el input nacimiento o tener que escribir un addEventListener por
cada uno de nuestros inputs. Lo que queremos es que sea lo más sencillo o reutilizable nuestro
código. Lo que voy a hacer entonces aquí es simplemente voy a eliminar esto de aquí. Voy a ir a
mi registro HTML.

[00:49] Y lo que nosotros posiblemente vamos a utilizar, y ya tal vez lo has visto en otros cursos
es son los data attributes. Entonces le voy a poner data-tipo= “nacimiento”. Voy a guardar, voy
a venir aquí a mi archivo de validaciones.js y lo que voy a hacer es crear una función que se
llama válida() y esta función lo que va a recibir va a ser nuestro input.

[01:29] Aquí lo que vamos a tener es una constante que se va a llamar tipoDeInput que va a ser
igual a nuestro input.dataset.tipo. ¿Qué es este dataset? Lo que nosotros estamos poniendo
aquí, data-tipo, bien pudiéramos poner tal vez un data, guión otra cosa. Entonces con este
dataset lo que nosotros estamos obteniendo es la colección de todos los datas y el .tipo es para
obtener justamente este de aquí.

[02:10] Si le quieres poner otro nombre, pues bueno, tendrás que cambiarlo. Voy a eliminarlo
entonces aquí. Ahora, lo que yo quiero es tener una constante que se va a llamar validaciones o
validadores, va a ser un objeto. Y en el cual les voy a poner para que coincidan el nombre del
tipo con la llave dentro de este objeto.

[02:37] En este caso, como yo le puse aquí nacimiento, pues bueno. Voy a poner aquí
nacimiento. Va a ser una función que va a recibir input y lo que va a hacer es mandar a llamar
validarNacimiento. Es aquí simplemente un arrow function y le voy a mandar entonces aquí mi
input, aquí ya lo tenemos.

[03:02] Lo que nosotros entonces necesitamos es por cada uno de los tipos de input o por el
tipo de input, verificar si existe dentro de los validadores, es decir, si es nacimiento yo quiero
que se le asigne entonces nacimiento. Lo que voy a hacer aquí es primero verificar si dentro de
validadores existe el tipo de input.

[03:33] Y si existe, lo que voy a hacer entonces es hacer validadores[tipoDeInput] y voy a

mandar a llamar aquí o le voy a pasar como parámetro input. Entonces este input es el que va a
recibir o el que va a estar vinculado con otro archivo que ahorita vamos a ir a generando. Pero
bueno, más bien lo que voy a hacer es guardar esto de aquí.

[04:00] Voy a crear un nuevo archivo que se va a llamar app.js para tenerlo más separado. Y lo
que voy a hacer entonces es exportar esta función: export function valida. ¿Para qué? Para que
yo pueda utilizarlo en otros archivos. Voy a importar, vamos a ver si el autocompletado está
aquí, aquí está. Importó valida de validaciones.js.

[04:32] Muy bien, ya tenemos entonces aquí nuestra función de valida. Ahora lo que nosotros
necesitamos es agregar el addEventListener que va a mandar a llamar esta función cada vez que
el input sufra el cambio o tenga el cambio de blur, cada vez que salga el usuario de ese input.

[04:53] Entonces lo primero que vamos a hacer es hacer una constante que se llame inputs.
Este inputs va a ser igual a document.querySelectorAll() para que seleccione todos nuestros
inputs, y lo que voy a hacer entonces aquí es voy a ponerle todos mis elementos que sean de
tipo input.

[05:16] Después, inputs. Yo cuando digo document.querySelectorAll lo que me va a regresar es

un arreglo. Y como recuerdas, los arreglos los podemos iterar, lo cual voy a hacer aquí. Lo que
vamos a recibir aquí es nuestro input, y lo que voy a hacer entonces es para cada uno de los
inputs vamos a obtener input, lo que vamos a tener entonces es a nuestro
input.addEventListener le vamos a decir cuál es el tipo de evento que queremos escuchar.

[05:51] En este caso va a ser blur. Va a recibir una función anónima, un arrow function, un
callback. Le vamos a decir entonces que nosotros vamos a recibir aquí nuestro input. Vamos a
checar entonces aquí nuestro valida y le vamos a mandar este input, pero el .target, entonces
vamos a hacer input.target, vamos a guardar y bueno, como te comentaba, la idea es que
primero vamos a seleccionar todos los inputs, todos los inputs que nosotros tenemos aquí.

[06:24] Después, lo que va a pasar es le va a agregar a cada uno de estos inputs el

addEventListener de blur cuando salga de foco, y cuando salga de foco va a mandar a llamar
esta función la cual es valida. Esta función valida vive aquí en validaciones, va a recibir el input,
va a verificar cuál es el tipo de input a través de dataset.tipo y a partir de ahí lo que vamos a
tener que ir armando, pues bueno, es aquí todo un objeto con los diferentes tipos de input que
vamos a tener.

[07:03] Vamos a tener uno para nacimiento, otro para nombre, otro para correo electrónico o
número telefónico, y así sucesivamente. Entonces vamos a dejar hasta aquí la clase y te veo en
la siguiente. página https://regexr.com/

CLASE 288 JS EN LA WEB

Ahora posiblemente si tú no utilizaste la extensión de Live Server, este Open with Live Server,
sería buen momento para que lo hicieras.

[01:44] ¿Esto por qué? Porque bueno, si yo vengo aquí a mi explorador de archivos y voy a abrir
aquí entonces el proyecto, le voy a dar clic en inspeccionar y ahora vamos a la consola. Aquí me
comenta que no puede como tal encontrar este archivo debido a políticas de curso.
Prácticamente lo que está esperando es que este archivo viva en un servidor http.

[02:15] Como no está viviendo o como no lo tenemos levantado en un servidor por eso nos está
marcando este error. La recomendación sería bueno aquí en la parte de extensiones, busca
simplemente Live Server, este de aquí y lo instalas. En caso de que no estés trabajando con
visual Studio Code también podemos utilizar algo que se llama browser sync. Vamos a darle
enter. Este de aquí.

[02:56] Y seguimos las instrucciones. En este caso lo instalas, tienes que tener instalado Node, y
bueno, una vez que ya lo instalas, lo que vas a tener que hacer es venir a una terminal. En este
caso voy a utilizar la de Visual Studio Code. Esperamos a que cargue. Y tendrás que escribir el
siguiente comando: browser-sync start -s -f . - -directory. Le voy a dar enter.

[03:37] Y lo que va a hacer esta extensión es levantarnos un servidor. Aquí, nosotros ya

entonces vamos a obtener nuestro árbol de todos nuestros documentos, le voy a dar clic en
registro_html, inspeccionar. En la consola no obtenemos ningún error. Voy a poner aquí mi
correo que sería [email protected], mi contraseña, fecha de nacimiento, mi nombre,
clic en registrar. Okay, está funcionando.
[04:26] Lo único que voy a hacer, voy a seleccionar otra fecha. Bueno, esta sería otra manera en
la cual pudieras ir trabajando con este proyecto. La verdad, yo prefiero más utilizar Live Server
sin necesidad de tener que levantar browser-sync, pero de nuevo si estás utilizando algún otro
editor de código, pues bueno, puedes utilizar simplemente este comando.

[04:52] Recuerda instalarlo antes, si no, no te va a funcionar, y vas a poder levantar entonces un
servidor http, para que no obtengas el problema que vimos anteriormente.

CLASE 289 JS EN LA WEB

imagínate que tú en tu empresa o en tu lugar de trabajo te dicen: “mira, yo quiero”, el equipo

de UX o de UI, quieren que cuando exista ese error o exista algún error, nuestro input que
presenta ese error se ponga con rojito. Lo que voy a poner aquí es input-container--invalid.
¿Qué es lo que estamos teniendo aquí?

[00:56] Bueno, estamos aplicando una clase de CCS en la cual, pues bueno, se está poniendo el
estilo en rojo y resalta a la vista, en el cual nosotros estamos viendo que este campo no es
válido. Sin embargo, lo que nosotros hicimos fue escribirlo directamente, no es lo que
queremos.

[01:16] Voy entonces a eliminar esta clase que acabo de poner. Y, antes de proseguir a
codificarlo, mira. Lo que quiero enseñarte aquí es que nosotros tenemos, estamos
seleccionando aquí nuestro input y después lo que voy a hacer es .validity. Este validity es
prácticamente un objeto en el cual nos va a ir diciendo si nuestro input presenta ciertas
características, por ejemplo.

[01:58] Nos dice aquí que sí es válido. En este caso está false. Aquí dice que si está faltando
nuestro valor, en este caso es true. ¿Qué es lo que queremos entonces? Que a partir de este
valid verificar si está o no válido y dependiendo de eso agregar o quitar la clase. Lo que voy a
hacer es venir de nuevo aquí a validaciones, aquí en mi función valida. Recuerda que esta
función se manda llamar cada vez que el usuario sale del input que estaba rellenando.
[02:30] Lo que voy a hacer entonces es verificar if(input.validity.valid), si es válido, o sea, si está
en true, quiero que quite la clase. En todo caso quiero que ponga la clase CCS para que
represente que está mal. ¿Entonces, cómo vamos a hacer eso? Bueno, lo que vamos a hacer
entonces es primero verificar aquí nuestro input.

[03:16] Voy a guardar, vamos a esperar a que recargue. Aquí tengo mi input. Pero si nosotros
vemos nuestro HTML no es al input al cual le tenemos que poner la clase, sino es al padre. Y si
recuerdas las clases de HTML con Dom, bueno, sabes que lo que necesitamos hacer es
input.parentElement. Vamos a ver qué obtenemos aquí.

[03:53] Vamos de nuevo aquí. Aquí tenemos nuestro div. Entonces es a partir a este div al que
nosotros vamos a querer agregarle esta clase. Y bueno, lo único que tendremos que hacer es
decir Input.parentElement.classList. Recuerda la L en mayúscula. Y en caso de que sea true, lo
que voy a querer es que lo remueva.

[04:21] Remove. ¿Cuál es la clase que quiero que quite? Vamos a ver. Este “input-container--
invalid”. En caso de que no sea válido, voy a querer entonces que mi
input.parentElement.classList.add y voy a querer que agregue esta clase. Vamos a probar. Aquí
está el nombre. Vengo afuera, aquí ya me agregó la clase de CCS. Voy a poner mi nombre, salgo
y ya la quitpo.

[05:10] Entonces, bueno, recuerda. Nosotros utilizamos este if simplemente para verificar si es
válido o si el validity es válido. Si es true, va a quitar la clase. Si es false significa que no es
válido, por lo cual va a agregarla. Voy entonces aquí a eliminar este console.log.

[05:29] Y ahora si nosotros regresamos aquí, dice: este campo no es válido y así, si seguimos
probando con los demás, va a seguir teniendo el mismo texto. Lo que nosotros queremos es
que dependiendo del error, que es este de aquí, .validity, dependiendo de estos errores, o al
menos algunos de ellos, va a ser el texto que nosotros vamos a mostrarle al usuario.

[06:06] Entonces lo que voy a hacer aquí, voy a crear un objeto y bueno, y pues bueno se va a
llamar mensajes de error. Esto, como te comentaba, es un objeto y dentro de este objeto
vamos a ir definiendo cuáles van a ser los tipos de errores de cada uno de los inputs. Si
recuerdas, nosotros teníamos aquí el input de nacimiento que mandaba llamar esta función,
vamos a hacer prácticamente lo mismo.

[06:35] Nuestro primer input que tenemos, bueno lo voy a poner en español. Tenemos aquí
nuestro mensaje de error de nombre. Esto de nuevo va a ser un objeto. En este caso, como es
el nombre, yo lo que quiero verificar primero es verificar si el valor está faltando, valueMissing.
Este valueMissing, lo que voy a poner como texto de error es: “Este campo no puede estar
vacío”. Muy bien.

[07:15] Vamos entonces con el que sigue, que es email. Aquí vamos a tener nuestro email, que
de nuevo son objeto. Voy a copiar este valueMissing, de nuevo, esto sí es necesario y lo que
vamos a querer después entonces es nuestro typeMissmatch. Este tipo hace referencia a que es
correo electrónico. Entonces vamos a poner typeMissmatch.

[08:01] Voy a poner entonces: “El correo no es válido”. Vamos con el que sigue. Tenemos el de
contraseña. Lo voy a poner en inglés para que no tengamos problema. De nuevo, valueMissing,
en caso de que este campo está vacío. Y lo que vamos a tener ahora es nuestro
patternMismatch.

[08:33] Si recuerdas nosotros en este input lo que hicimos fue agregar un patrón que nosotros
esperábamos con una regex. Entonces lo que voy a hacer es venir aquí a mi archivo HTML. Voy
a venir a la parte de title, este de aquí, lo voy a copiar. Voy a venir de nuevo aquí a validaciones
y ahora lo que voy a querer es patternMissing me parece, vamos a verificar, patternMismatch y
voy a pegar el texto. Muy bien, ya tenemos ahí el de contraseña, vamos con el siguiente. Es el
de fecha de nacimiento.

[09:20] Entonces lo que voy a hacer es utilizar el mismo nombre que era nacimiento. De nuevo
va a ser un objeto, voy a poner cuál es el valueMissing, en este caso este de aquí. Y lo que
vamos a tener después es nuestro customError. Este customError es este de aquí, este mensaje
de aquí que nosotros agregamos con setCustomValidity. Entonces lo voy a copiar. Voy a ver qué
es customError y lo voy a pegar.
[10:04] Entonces bueno, vamos a esperar aquí a que recargue. Y ahora lo que nosotros
necesitamos ver es, dependiendo del tipo de input, que el usuario está interactuando es
verificar si está válido o no está válido. En caso de que no sea válido, vamos a necesitar acceder
a este objeto y a cada una de sus llaves, dependiendo del tipo de input, pero bueno, eso lo
vamos a ver en el siguiente video.

CLASE 290 JS EN LA WEB

Bueno, vamos a continuar. Primero que nada, si recuerdas, cuando nosotros mostramos aquí
un error, aparece este texto, este campo no es válido. Lo que vamos a necesitar entonces es en
nuestra función aquí de valida, en caso de que no existe algún error o de que sea válido, lo que
vamos a necesitar es seleccionar ese spam, este de aquí, y simplemente ponerle el innerHTML
como vacío.

[00:41] Entonces lo que voy a hacer aquí es input.parentElement.querySelector, y es una clase,

por lo tanto es punto y el nombre de la clase. O bien podría ser spam, pero en este caso voy a
utilizar la clase .innerHTML va a ser igual a un string vacío. Voy a copiar esto de aquí, y ahora en
caso de que si existe algún error, lo que quiero es mostrar error, mostrar mensaje de error,
para que se entienda mejor.

[01:28] Va a ser una función. En esta función lo que voy a recibir yo va a ser el tipo de input
como primer parámetro y el input. Ahorita vamos a ver para qué. Lo que voy a hacer entonces
aquí en esta función de mostrar mensaje de error, voy a generarla, no existe. La voy a generar
aquí. Va a recibir tipo de input y el input como tal.

[02:00] Muy bien, lo que nosotros vamos a tener entonces aquí es un mensaje que es el que
queremos decirle, o sea, dependiendo de si el campo está vacío, si no cumple con ciertas
características, prácticamente lo que nosotros necesitamos es acceder a estos diferentes
mensajes que escribimos en el video anterior.

[02:21] Entonces, bueno, aquí ahora voy a poner un return de nuestro mensaje. Muy bien.
¿Ahora qué es lo que necesitamos? Bueno, lo que necesitamos es de alguna manera interceptar
dependiendo del tipo de input, bueno, si el tipo de input es nombre, tendría que acceder aquí y
nos debería demostrar nuestro error de value missing.
[02:53] ¿Pero qué pasa, por ejemplo, con este de email que tiene un typeMismatch, o este de
aquí que tiene un patternMismatch? Nosotros tendríamos que hacer muchos ifs y diferentes
tipos de lógica para poder acceder a cada una de estas llaves de cada uno de los objetos.

[03:13] Lo que vamos a hacer mejor vamos a crear una función que se llame tipo de errores,
que va a ser un arreglo. Este arreglo, lo que va a tener es el valiueMissing. Va a tener
typeMismatch, va a tener pattern, y por último, va a tener el customError. Muy bien, ahora lo
que nosotros tenemos aquí ya es el tipo de input.

[03:48] Lo que vamos a necesitar después es recorrer este arreglo y dependiendo, lo que voy a
hacer entonces es para cada tipo de errores, lo voy a recorrer, si recuerdas, es un arreglo:
tipoDeErrores.forEach. En este tipo de errores voy a recibir cada uno de estos errores.

[04:10] Es decir, la primera vez que pase va a acceder a valueMissing, después a typeMismatch,
después patternMismatch, después customError. Ahora lo que yo voy a querer es si dentro de
mi input, recuerdas que trabajamos con validity, y yo quiero buscar este error, en caso de que
este error valiueMissing por ejemplo sea true, yo lo que voy a querer entonces es que el
mensaje sea, por ejemplo, el campo no puede estar vacío.

[05:02] Lo que voy a hacer aquí es un console.log, mejor para que quede un poco más claro, de
esto de aquí. Vamos a guardar, vamos a regresar, vamos aquí con el nombre. Y es más, aquí me
regreso que true, pero lo que voy a poner entonces aquí es para verificar cuál era el error.
Vamos a ver.

[05:29] Recargo ahí, salgo y me dice valueMissing. Entonces está faltando ese valor. Por lo
tanto, yo lo que necesito es, ya sé que es valueMissing el que está faltando. Ahora lo que
necesitamos es ver el tipo, eso es con este tipo de input que nosotros le estamos mandando.
Siguiendo toda esta estructura, yo lo que quiero hacer aquí es un
console.log(mensajesDeError[tipoDeInput])

[06:04] Este tipo de input puede tener valores de nombre, email, password, nacimiento y
después voy a querer acceder a cada uno de estos valores. Puede ser valueMissing,
typeMismatch. ¿Entonces cómo voy a acceder a ese? Pues bueno, voy a poner aquí el error.
Voy a guardar, voy a regresar aquí. Selecciono, salgo y al ocurrir un error, vamos a ver qué fue
lo que pasó.

[06:33] Nuestro tipoDeInput. Vamos a esperar aquí. Vamos a ver qué es lo que obtenemos. Y
me aparece un error. ¿Por qué dice undefined? Estamos recibiendo aquí undefined. Vamos a
verificar aquí. Teníamos el tipo, vamos a ver si nuestro input tiene el data-attribute y no lo
tiene, por eso nos está mandando un error.

[07:03] Entonces lo que nosotros necesitamos decirle aquí nuestro input es data- tipo. Si
recuerdas, pues bueno, tiene que ser nombre. Vamos a poner aquí nombre, voy a guardar,
vamos a verificar. Ahora sí, ya no me mandó el error. ¿Qué es lo que dice? Este campo no
puede estar vacío. Ya estoy teniendo acceso entonces a este texto.

[07:34] Lo que voy a hacer antes de eso, voy a terminar de rellenar todos estos data-tipo.
Entonces, vamos a tener data-tipo. Este de aquí. Este data-tipo va a ser email. Después vamos a
poner nuestro otro data-tipo, que pues bueno, va a ser password, que es la contraseña. Y
vamos ahorita con el último que hemos trabajado que es fecha de nacimiento, y este sí lo tiene,
entonces no tenemos ningún tema.

[08:14] Vamos a esperar aquí, vamos a seleccionar. Vamos a verificar por qué no le está
quitando este texto, vamos a ver, perdón, estos estilos. Classlist remove. Al parecer debería de
quitarse. Vamos a ver por qué no lo está haciendo. Input-container-invalid. Vamos a verificar.

[08:50] Bueno, lo que nosotros entonces necesitamos aquí es, ya tenemos aquí nuestro
console.log. Aquí ya nos está mostrando cuál es el error que se está generando. Lo que
necesitamos, por último, es simplemente decirle aquí mensaje va a ser igual a mensajes de
error, entre corchetes, el tipo de error para poder acceder a si es nombre, email, password,
nacimiento, el tipo de input y ahora sí por último, nuestro error.

[09:23] Vamos a guardar. Vamos a recargar. Tenemos nombre, clic afuera, este input no puede
estar vacío. Okay, le voy a poner aquí mi nombre, Harland. Voy a poner aquí el correo
electrónico, este campo no puede estar vacío, que es este de aquí. Entonces, si quisiéramos ser
más específicos, pudiéramos decir tal vez el campo nombre no puede estar vacío, el campo
correo no puede estar vacío.

[10:05] El campo contraseña no puede estar vacío y así sucesivamente. Vamos a verificar.
Vamos aquí a nuestro correo, salimos, el campo correo no puede estar vacío, el campo nombre
no puede estar vacío, entonces al parecer está funcionando. Entonces Harland, mi correo,
vamos a ver si solo le pongo mi nombre.

[10:29] Ahora dice que el correo no es válido, que entonces sería porque el typeMismatch no
está en true. Sin embargo, valueMissing está en false porque ya tiene un texto. Entonces
bueno, vamos a seguir viendo, tenemos nuestra contraseña. Vamos a ver tres números. Ahí me
dice que hay un error. El campo contraseña no puede estar vacío, eso está bien. Aquí ya tengo
la contraseña.

[11:05] Vamos a ver, ahí ya se ve la contraseña, mi correo, ahí también ya está bien. Fecha de
nacimiento. Vamos a ver, voy a seleccionar este de aquí. Debes tener al menos 18 años de
edad. Voy a ver si cambiándolo. 2005, 18. Necesitamos todavía más. Entonces bueno, como
pudiste darte cuenta, utilizamos diferentes objetos o ir trabajando con objetos, justamente
para tener el código un poco más organizado.

[11:52] Si nosotros conforme fuéramos realizando tal vez algún formulario, queremos manejar
algún otro tipo de input, perdón, algún otro tipo de errores, o bien lo agregamos aquí y
simplemente en este objeto ya lo único que tendremos que hacer es irlos agregando.

[12:09] La ventaja que tiene trabajar con este tipo de objetos es que, imagínate, tu página
puede estar en portugués, puede estar en español, puede estar en inglés, en cualquier idioma,
y realmente lo único que tendrías que hacer es tal vez desde un API o desde algún otro lado,
simplemente traer estos valores sin necesidad que estén escritos necesariamente en tu código
HTML.

CLASE 291 JS EN LA WEB

El número telefónico va a variar dependiendo del país e inclusive hasta de mismo de ciudad.
[00:20] Entonces ahorita para este ejemplo lo único que vamos a hacer es generar una
expresión regular muy sencilla de 10 dígitos, y si tú quieres desarrollar un proyecto en el cual
solamente sea para tu área local o para tu país, puedes tú buscar la expresión regular del
número telefónico de tu país.

[00:42] Vamos entonces a nuestro código. Aquí, en la línea 50 yo lo que tengo es un input.
¿Cuál es el tema con esto? Nosotros tenemos el tipo texto. Si yo lo cambio esto por type
number, vamos a ver qué es lo que tenemos. Tenemos aquí nuestro input de número
telefónico. Yo no voy a poder escribir ninguna letra a excepción de la E porque en matemáticas
la E hace referencia al exponencial.

[01:12] También, pues voy a poder poner un punto, voy a poder poner un + y puedo seguir así
sucesivamente con caracteres especiales. Vamos a querer que siga el formato de 10 dígitos,
solo como ejemplo. Lo que voy a hacer entonces es escribir la expresión regular aquí en
pattern, me faltó la n, y le voy a poner que quiero que los dígitos que pueden ir del 0 al 9, se
repitan 10 veces.

[01:43] Lo voy a guardar, le voy a poner también que este tipo requerido y vamos a probar. De
nuevo estoy probando aquí con las letras y no me deja. Voy a ponerle entonces aquí los
números. Y sin embargo, a pesar de que nosotros pusimos la expresión regular que sean
solamente 10 dígitos, la verdad es que me deja escribir más números. ¿Esto por qué?

[02:06] Porque nosotros necesitamos definirle aquí en el tipo, en lugar de number que sea de
tipo texto. Vamos a ver qué sucede. Lo cambio, esperamos a que recargue, voy a escribir los
números, en este caso, ¿qué fue lo que me faltó? Me faltó decirle cuál era el maxlength. Este
maxlength es de 10.

[02:25] Vamos a ponerle, aquí vamos a poder poner nuestros números y aquí ya me deja. Aquí
ya solamente me deja ingresar 10 números. Si yo le cambió el tipo de nuevo al number, vamos
a ver qué sucede. Voy de nuevo a escribir números y me dejó escribir más. ¿Esto por qué?
Porque este maxlength sirve solamente para el tipo text.
[02:52] Entonces lo vamos a dejar como si fuera de tipo texto y con la expresión regular
solamente deberíamos de poder obtener o poder ingresar números telefónicos. Muy bien,
vamos entonces, a pesar de que nosotros estamos poniendo aquí nuestro pattern y nuestro
maxlength, inclusive también pudiéramos ponerle un minlength de de 10 igual.

[03:26] Lo que vamos a hacer es, recuerdas en la parte de validaciones, tenemos un objeto en
donde nosotros vamos agregando todos los mensajes de error además como las validaciones.
¿Entonces, qué es lo que vamos a hacer? Vamos a venir aquí. Y si recuerdas hemos estado
trabajando con este data-tipo. Vamos entonces a agregárselo de nuevo: data-tipo = “numero”,
que va a ser el de número telefónico.

[04:05] Lo voy a guardar. Vamos a venir aquí a nuestro archivo de validaciones. Aquí, en la
parte de mensajes de error, vamos a agregar uno nuevo que va a ser número. Este iba a ser el
tipo de input que nosotros estamos obteniendo aquí en este tipo de input. Muy bien. Lo que
vamos a hacer entonces es crear un objeto y en este caso lo que podemos poner simplemente
es un valueMissing.

[04:39] Vamos a poner: “Este campo no puede estar vacío.” Y en nuestro patternMismatch
vamos a poner: “El formato requerido es xxxxxxxxxx”. Lo podemos poner esto en tren. Vamos a
dejarlo así, 10 números. Vamos a guardar, vamos a regresar aquí. Vamos a ver número
telefónico, salgo y dice: “Este campo no puede estar vacío”.

[05:35] Voy a ingresar un número. El formato requerido es de 10 números. Entonces, bueno,

¿qué pasa si yo le pongo aquí ya nuestros 10 números? Ya no tenemos el error. ¿Y ahora qué
pasa por ejemplo si yo agrego aquí la E? A pesar de que al usuario sí le deja ingresar la letra E,
ya cuando entra a la función esta de aquí de validar y verificar que el tipo de input, que es
número, el patternMismatch está como false entonces se da cuenta de que no está siguiendo la
expresión regular.

[06:13] Si recuerdas, nosotros le indicamos que solamente iban a ser los 10 dígitos y solamente
pueden ser números. Por eso es que está apareciendo el error.
 CLASE 292 JS EN LA WEB

Muy bien, entonces lo que vamos a querer aquí en nuestro input de dirección completa es al
menos 10 caracteres y tal vez máximo 40. Pueden incluir números, pueden incluir texto o
caracteres como tal letras, inclusive hasta nuestro símbolo de gato. Hay algunas direcciones
donde le suelen poner el número.

[00:23] Vamos a ver entonces, vamos a tener que ponerle aquí nuestro pattern entre corchetes
“[\s\S]”{10, 40} Vamos a ver qué sucede. Vamos a poner aquí Calle. Son solamente 5 caracteres,
bueno, 6 con el espacio. Vamos a ponerle aquí principal, ya nos está entonces aquí marcando
que no hay ningún tema.

[01:04] ¿Qué pasa si yo le pongo nuestro gato? Sigue funcionando, Calle principal número 12,
por decir. Entonces así como nosotros lo agregamos para nuestra dirección completa también
hay que hacerlo para la ciudad y el estado. En este caso lo que pudiéramos hacer tal vez para
no tener que estar repitiendo en nuestro objeto, tener que agregar ciudad y estado, como van
a seguir el mismo patrón, pudiéramos dejarlo con este tipo data-dirección.

[01:44] Sin embargo, pues bueno, lo que voy a hacer aquí es simplemente copiarlo. Más bien
voy a copiar todo este required, lo voy a poner en nuestro input de ciudad, el data-tipo le voy a
poner ciudad y aquí le voy a poner estado. Tal vez en tu país se llaman provincias. Déjalo a tu
criterio, pero bueno, al menos en México, así se les conoce como estados.

[02:15] Lo voy a guardar, vamos entonces a la parte de nuestras validaciones. Yo voy a hacer lo
mismo de aquí, simplemente lo voy a copiar y lo voy a pegar. Aquí el primero es ciudad y el
segundo es estado. Le voy a poner aquí: “La ciudad debe contener entre 10 a 40 caracteres” y
“El estado debe contener entre 10 a 40 caracteres”.

[02:48] Vamos a ver entonces. Nuestro formulario al parecer ya está completo. Si nosotros
accedemos y salimos, pues bueno, ya nos está marcando errores en todo nuestro input. Tienes
que checar, por ejemplo, aquí algo curioso. Cuando yo le di clic aquí al fecha de nacimiento y
salí, me dice que debes de tener al menos 18 años de edad.
[03:11] Esto prácticamente es porque en nuestra función para verificar si es mayor de edad,
está marcando un error, que en este caso es debes tener al menos 18 años de edad, pero
bueno, pudiéramos manejarlo ahorita por simplicidad, pues bueno, vamos a dejarlo así.
Entonces ya tenemos todos nuestros formularios. Si yo le pongo aquí ahora sí, mi información
completa, me voy a poner aquí.

[03:55] Fecha de nacimiento, el número telefónico, la dirección, Calle principal, ciudad CDMX.
Va a haber aquí algún tema. Posiblemente la parte de la ciudad pudiéramos bajarlo de
caracteres, tal vez pudiéramos manejarlo con 4 y tal vez el máximo pudieran ser 30. Y lo mismo,
tal vez con el estado, de 4 a 30.

[04:34] De nuevo mi nombre, mi correo electrónico, la contraseña, la fecha de nacimiento.

Recuerda que tiene que ser mayor de 18 años, número telefónico, dirección completa, CDMX y
el estado bueno, CDMX, igual en México así se conoce. Vamos a cambiarlo. Voy a ponerle
Ecatepec, el estado de México, no tenemos mucha imaginación con el nombre de los estados.
México.

[05:15] Okay, entonces ya le puedo dar clic en registrar. Y me comenta que el registro ya está
completado. Entonces prácticamente ya tenemos cómo es la validación. Ya aprendimos cómo
poder trabajar con todo este tipo de verificar que esté el patrón, verificar que no esté vacío, un
mínimo, un máximo de caracteres.

[05:36] Y a pesar de que nosotros no nos estamos conectando con un servicio al cual estemos
mandando la información, creo que pudiera ser muy buen ejercicio. Si ya sigues o si ya tienes
conocimientos de back-end pudieras tratar tú de crear un end point para recibir esta
información

CLASE 293 JS EN LA WEB

Vercel y Github Pages para colocar el proyecto en liena

CLASE 294 JS EN LA WEB

Muy bien, vamos entonces a ver cómo poder subir nuestro proyecto a un servicio para que
quede disponible en internet. Si tú copiaste este proyecto o si tú lo descargaste solamente
desde el punto zip o bien desde el repositorio, el link tal cual que aparece en GitHub, hay dos
cosas que puedes hacer.

[00:22] El primero o más bien lo que tendrías que hacer es hacer fork. Prácticamente lo que es
va a hacer una copia del código que tú quieres clonar en tu propia cuenta para que tú puedas
tener justamente una copia de ese código para que tú lo puedas modificar, puedas hacer
adecuaciones.

[00:41] En caso de que hayas descargado el punto zip, lo único que tendrías que hacer es aquí
en GitHub crear un nuevo repositorio y vas a tener esta vista. Vas entonces a tener que copiar
esta línea de aquí, el git remote add. Este de aquí. Vas a venir a Visual Studio Code en terminal,
nueva terminal para que cargue.

[01:13] Tienes entonces que inicializar git. En este caso le das git init y le das enter. Esto va a
inicializar tu proyecto git para que puedas ir llevando un control de versiones de tu código. En
este caso, como ya lo tengo, lo único que voy a hacer es pegar lo que copié, el git remote add
origin y toda esta URL.

[010:38] Bueno, le voy a dar enter. Y ahora sí, lo checo, con el comando git remote -v, aquí ya
dice que tengo mi origin y hacia dónde está apuntando. En este caso es mi repositorio. Lo que
voy a hacer entonces es aquí, ya cuando tengo todos mis cambios, quieres hacer git add -a para
tener todos los cambios, un git commit -m para guardarlos.

[02:01] Puedes poner realmente el texto que tú quieras, lo que sea. En este caso, como no
tengo ningún cambio, no me deja. Pues si tú tienes, pues bueno, te va a dejar. Y por último, un
git push origin master. Este origin, si recuerdas es el nombre que nosotros le asignamos al
momento de copiar esto de aquí. Es este mismo origin.

[02:23] Si tú le quisieras poner aquí algún otro nombre, lo puedes poner y solamente tendrás
que cambiar aquí. Y ahora lo que estamos diciendo aquí con master es la rama que nosotros
queremos subir. En este caso es master. Y de hecho, para que puedas ver, yo aquí con mis
ramas, cuando bueno, cuando puse mi comando de git branch me muestra todas las ramas que
yo tengo en este proyecto o versiones, por así decirlo.

[02:51] En este caso master ya es la rama que tiene todo el código que yo quiero subir a mi sitio
web. Entonces, ya lo que tendría que hacer es un git push origin master. Le voy a dar enter, si tú
no tienes configurado tu terminal, posiblemente te va a decir que inicies sesión, simplemente lo
inicias con tu correo electrónico y tu contraseña y listo.

[03:15] En este caso me comenta que ya lo subió, vamos aquí a GitHub. Si yo recargo, aquí ya
aparece mi todo mi código, con el cual yo he estado trabajando. Entonces lo que tendríamos
que hacer prácticamente es hacer un cambio. Bueno, vamos a ver. Vamos entonces aquí
nuestra sección de settings. Voy a checar aquí donde dice pages, que es páginas en inglés.

[03:44] Y aquí lo que me deja es poder seleccionar de qué ramas yo quiero tomar. Recuerdas la
copia que te había comentado. En este caso es master. Me va a decir aquí en dónde se
encuentra, le voy a dar route, le voy a dar clic en salvar. Okay, me dice aquí que él selecciona
algún tema.

[04:05] Esto realmente puedes seleccionar el que quieras. No hay ningún tema con el tema.
Bueno. Aquí ya lo seleccioné, tenemos ya este link y tenemos que acceder a /registro.html,
justo porque así se llama nuestro archivo aquí, registro.html. Nos muestra un error. Este error
dice que no puede encontrar las siguientes o los siguientes archivos.

[04:36] Y cómo prácticamente este de variables es donde se contienen todos los colores, el
tamaño de las fuentes y en general, todo lo que le da la estructura a nuestra página está
marcando un error y esto efectivamente no lo está encontrando. Entonces lo que tuve que
hacer es aquí, en nuestro import, le quité guión bajo que antes estaban así.

[05:04] Se los quité y al mismo tiempo también le cambié el nombre a mis archivos, en este
caso guión bajo reset, guión bajo variables. Entonces para que funcione deberías de tener
también esos cambios. Vuelves a hacer un git add –a, un git commit –m y un git push origin
master para que puedas obtener ahora sí el proyecto.
[05:31] Tienes que esperar a que guarde. Mira, voy a acceder a una página de incógnito,
problemas de caché, le voy a dar aquí enter y aquí, ahora sí ya tengo mis estilos. Entonces,
como puedes verificar aquí pues bueno, sigo teniendo todo mi formulario y ahora sí en una URL
en la cual podrías compartir con tus amigos, ponerlo en LinkedIn, poner un link directo en tu
portafolio, en tu blog, etcétera.

CLASE 295 JS EN LA WEB

amos a continuar entonces el otro servicio que nosotros vamos a utilizar se llama Vercel, de
hecho, es muy conocido en el mundo de React, porque es la empresa que está por detrás de un
proyecto llamado Next.js que justamente utiliza React y si en algún futuro te interesa, puedes
aprenderlo.

[00:18] En fin, lo que voy a hacer aquí es login o sign up, dependiendo. En este caso, como ya
tengo una cuenta, voy a hacer login, voy a seleccionar, voy a continuar con GitHub. Puede que a
ti durante todo este proceso, si tú no tienes una cuenta, te pida permisos de conexión con tu
cuenta de GitHub y simplemente lo autorices.

[00:40] Lo que voy a hacer entonces es crear un nuevo proyecto. Como te comentaba, tiene
para poder subir aplicaciones con Next.js, uno muy parecido que es Gatsby, Nuxt.js que está
con View. Pero bueno, lo que voy a hacer aquí es seleccionar el repositorio que yo quiero subir
a esta plataforma, en este caso es html-validaciones.

[01:05] Tú buscas solamente tu repositorio y listo. Le voy a dar clic aquí en importar. Me
pregunta si quiero crear un equipo, le voy a decir que en este caso no, que lo salte. Aquí en
framework preset lo que voy a hacer es seleccionar otro. Y en build y output settings lo voy a
deseleccionar, le voy a dar clic entonces aquí en deploy.

[01:30] Voy a esperar a que primero descargue el código que tenemos en GitHub, después siga
con el siguiente paso, construya la aplicación y lo suba ya una URL o producción. Vamos a
esperar a que termine todo este proceso. Aquí me comenta que ya está listo el proyecto, le voy
a dar clic en go to dashboard.
[01:51] Okay, aquí ya me aparece un botón para poderlo visitar, le voy a dar clic y voy a ver aquí
mi página. Igual, el mismo tema que teníamos con GitHub pages. Me dice que no existe. ¿Por
qué? Porque mi archivo es registro-html. Le voy a dar enter y listo, aquí ya tenemos nuestro
proyecto.

[02:14] En caso de que tú quieras que no tengan que escribir registro y que aparezca luego,
luego, lo que tendrías que hacer es el lugar que se llame registro, simplemente escribes
index.html y posiblemente lo has visto o aprendido en algún otro curso, pero cada vez que un
servidor busca dentro de todos los archivos por defecto, va a buscar el archivo index.html, y es
el que va a mostrar cuando nuestra URL no tiene nada después que la base, es decir esto de
aquí.

[02:49] Muy bien. Entonces, pues bueno, y tienes tu proyecto, tanto en GitHub pages como en
Vercel. Hay algunas otras opciones como pueden ser Netlify o esta empresa de aquí, también es
prácticamente lo mismo.

[03:10] Entonces, puedes ir probando las tres plataformas, me parece que incluso hay más,
estas al menos son las que yo he utilizado y creo que son de las más comunes, al menos para
este tipo de proyectos que no tienen la responsabilidad de manejar rutas del lado del back end
o guardar la información, entonces me parece que esta es una muy buena opción. Entonces,
vamos a dejar hasta aquí el video.

CLASE 296 JAVA EXCEPCIONES

ArithmeticException.class, llegué aquí, tiene un constructor super. Él llega aquí, vamos desde el
inicio.

[01:30] Tenemos la documentación de Java, el Javadoc como es llamado. Él aquí da una

pequeña explicación de qué es lo que sucede con esta excepción, aquí lo que él dice, por
ejemplo es: "lanzada cuando una condición aritmética excepcional ha ocurrido", por ejemplo,
un integer dividido entre 0, retorna una instancia de esta clase.

[01:52] Justamente fue lo que nosotros hemos provocado. Y aquí también da una explicación
de cómo debería ser construido este objeto y sobre qué cuáles son las clases padre, todo, pero
vamos con calma, vamos bajando por ahora. Vemos que ArithmeticException extiende the
RuntimeException. Aquí ya vemos un uso claro de la herencia.

[02:17] ¿Cuáles eran los objetivos de la herencia? Establecer relación entre objetos y
reutilización de código. Aquí ya vemos claramente que él extiende RuntimeException. Este
private static final long serialVersion es un número largo que sirve pues digamos para serializar
los objetos.

[02:38] Es un término que no viene al caso ahorita, serializar, pero solamente para quien tenga
curiosidad es cuando yo voy a enviar objetos por internet, por la red, ellos tienen un número de
serie único, para ser identificados por el receptor, por ahora no viene al caso. Si quieren,
olviden lo que dije.

[02:55] Y aquí tenemos el primer constructor, un constructor sin parámetros por defecto, que
llama un súper, ese súper lo que hace referencia a constructor de la clase padre, clase padre,
ArithmeticaException. Y vemos que aquí también él tiene otro constructor, un segundo
constructor con un String s que no sé qué es. Es un mensaje, acá la documentación dice que es
un mensaje.

[03:22] Entonces yo puedo mandarle un mensaje al ArithmeticException aquí, y vimos que sí se

puede, yo aquí puedo mandarle un mensaje, lo vimos en la clase pasada. Y él igual llama al
constructor de la clase padre y le envía como parámetro ese string, esa clase padre ya tiene dos
constructores entonces, y aquí acaba la clase.

[03:44] Bueno, ya exploramos ArithmeticException, vamos a explorar la clase padre. Entonces

nuevamente control RuntimeException y vemos nuevamente, bueno, acá el Java doc
correspondiente, esta es la superclase de las excepciones que pueden ser lanzadas durante
alguna operación normal, etcétera. Es lo que dice el Java doc.

[04:07] Y aquí tenemos que él extiende de exception, o sea, hasta ahora ya tenemos tres
niveles: ArithmeticException, RuntimeException y Exception. Tres niveles, por el momento y
nuevamente RuntimeException lanza un super aquí, o sea, él llama al constructor de su clase
padre, que es Exception. Y aquí, de la misma forma, él recibe un mensaje y lanza ese mensaje
para su clase padre.

[04:33] Y aquí tiene otros constructores también. Él tiene para lanzar un mensaje y tiene una
clase Throwable cause. Esto es nuevo para nosotros. La verdad es que él tiene aún más
métodos aquí, solamente para lanzar un Throwable, lo vamos a ver de aquí a poco. Y aquí tiene
incluso para lanzar muchos más parámetros: enableSuppression, writableStackTrace.

[05:01] O sea, vemos que en realidad es una clase con un poco más de abstracción que las
clases hijas. ¿Y en todos los casos, el común denominador cuál es? Super. Él siempre llama al
método, a los constructores de la clase padre, que en este caso es Exception. Eso nos dice que
Exception es una clase quizás hasta un poco más grande.

[05:25] Y, como no podía ser de otra forma, vamos a entrar a Exception. Y aquí finalmente, ya
que llegamos a Exception, nuevamente tiene su su serial, y tenemos el consultor Exception.
Vemos algo curioso: Exception extiende de Throwable, y esta es la razón por la cual vamos
ahora a hacer el nexo entre esta palabra reservada de aquí y throwable.

[05:55] ¿Por qué nosotros no podíamos lanzar un objeto de clase cuenta? Porque solamente
podemos lanzar objetos que extiendan de throwable, que throwable es la clase padre de las
excepciones. Si entramos aquí, vamos a ver que él implementa, ojo, es diferente aquí, haciendo
un repaso al curso anterior, en la que hace un extend, él es hijo de throwable y él aquí
implementa Serializable, la interfaz Serializable.

[06:28] Que como les dije anteriormente, sirve para lanzar objetos en la red en internet, para
enviar objetos en internet. No viene al caso ahorita. Y aquí él tiene ya un montón de lógica,
digamos, de campos. Tiene un una clase objeto backtrace, tiene mensaje detallado, un string.
En fin, es una clase, digamos un poco extensa. Yo creo que es muy extensa.

[06:55] Y si le damos "Ctrl + O" vamos a ver que él aquí, vamos a darle más arriba, con "Ctrl + O"
podemos ver una hacer un overview de la clase completa, de qué métodos tiene. Entonces
vamos aquí, "Ctrl + O" y aquí vemos todo el detalle de métodos que él tiene y aquí tiene causa,
stackTrace, depth, profundidad, throwable, ahí están todos los constructores que hemos ido
viendo en las clases hijas.

[07:22] PrintStackTrace, en fin, una infinidad de métodos. Entonces, ahora, nuevamente

volviendo a bajar, ya hemos subido hasta throwable. Hasta ahora tenemos cinco niveles de
abstracción. O claro, cinco serían. Serían ArithmeticException, que extiende a
RuntimeException, que a la vez extiende de Exception y de throwable. No, cuatro niveles,
disculpa, hay cuatro niveles de abstracción.

[07:50] Entonces, volviendo a Exception, vemos ahí, pues que de igual forma, él tiene los
constructores en todos casos llama a super, que es el constructor de la clase padre y listo.
Entonces, ahora que ya conozco throwable, al mismo tiempo se los diversos constructores.

CLASE 297 JAVA EXCEPCIONES

Ya hemos visto en el video anterior que las excepciones van extendiendo de distintos niveles de
jerarquía entre objetos. Dando una una visión, digamos un poco más gráfica, tenemos este
diagrama aquí. Comenzamos desde abajo. Tenemos ArithmeticException y
NullPointerException, que son las dos excepciones con las que hemos venido trabajando hasta
el momento.

[00:26] Las dos se extiendes de RuntimeException, lo hemos visto en el código. Y

RuntimeException extiende a la vez de Exception, el cual a la vez extiende de throwable. Esta es
la relación, digamos, jerárquica, que tienen ahora.

[00:43] Entonces, ahora la pregunta es, si yo quiero crear mi propia excepción, si

ArithmeticException y NullPointerException extienden the RuntimeException, ¿será que si yo
creo una excepción que extienda de RantimeException va a funcionar? Vamos a verlo, vamos al
código. Entonces, cerramos todo esto que hemos abierto aquí para explorar la excepción.

[01:09] Y vamos a crear aquí a new class y vamos a llamar MiException, solamente para fines
ilustrativos. Perfecto, le doy finish. Aquí yo ya he creado mi clase para mi excepción. ¿Qué es lo
que me falta? Extenderla de su clase padre que va a ser RuntimeException. Entonces le voy a
dar extends Runtime, "Ctrl + espacio" y la segunda opción de abajo RuntimeException.
[01:46] Listo. Y ahora, bueno, voy a crearle un constructor, porque si no le creo un constructor,
él por defecto va a ir a la clase del padre, y yo no quiero eso por el momento. Voy a crearle aquí
un public MiException. Ese un constructor por defecto. ¿Y aquí a quién invoco? Invoco a super,
para llamar al constructor de la clase padre.

[02:21] ¿Recuerdan que así estaba de igual forma en la anterior clase ArithmeticException? Y
solamente para ahorrar código voy a copiar, voy a pegar y aquí le voy a poner un String
message. Y este message lo voy a mandar en super como parámetro y todo bien, va a compilar
porque la clase padre también recibe ese parámetro. Perfecto. Entonces ya tengo mi excepción.

[02:44] Regresa a mi clase flujo y ahora voy a borrar esta cuenta que ya no me sirve por ahora,
y en vez de ArithmeticException voy a lanzar mi excepción. Está aquí, vieron, incluso el id ya me
autocompletó, MiException. Y le voy a mandar aquí un mensaje: "Mi excepcion fue lanzada",
perfecto. Y si ejecuto este método, voy a poner "Ctrl + S", ejecuto, guardo. Y listo, ¿aquí qué
salió?

[03:22] Main, método 1, método 2 y exception, en el hilo main Mi excepción fue lanzada.
Perfecto. ¿Entonces, qué significa? Yo ya he creado mi primera bomba, y lo mejor de todo, la
hice explotar. Si yo quiero tratar esta bomba, ¿cómo debería hacer? Voy a venir aquí a método
1, y repasando lo que vimos en la clase anterior, lo que voy a hacer es un try de método 2.

[03:54] Perfecto, porque le voy a decir: "intente ejecutar método 2 para que englobe todo este
código". Y, obviamente, un try no puede vivir sin su catch. Entonces le pongo catch. Los
paréntesis siempre. Y en catch, ¿será que si le pongo ArithmeticException,
NullPointerException, lo va a atrapar? No lo va a atrapar. ¿Por qué?

[04:19] Porque simplemente no es el tipo de objeto que yo estoy referenciando aquí, que es
MiException. Por ejemplo, si yo le pongo aquí NullPointerException y le hago aquí
printStackTrace, si yo ejecuto este código, nuevamente le digo que sí quiero guardar, él igual va
a lanzar MiException. ¿Por qué? Porque él no está preparado para ese tipo de excepción, eso ya
lo vimos en la clase anterior.
[04:53] Él no está preparado para lidiar con MiException. Está preparado para un
NullPointerException. ¿Qué hago entonces? Muy fácil, le voy a decir entonces "atrapa
MiException". MiException me, vamos a cambiarle la variable, el nombre de la variable. Listo,
vamos a acomodar esto un poquito aquí, perfecto.

[05:24] Ahora si ejecuto, le doy que sí quiero guardar, y vemos ahí bien claro que él dio un Inicio
en main, Inicio método 1, método 2. MiException fue lanzada nuevamente inicio método 2.
¿Por qué? Porque aquí se se nos escapó, yo no borré este método de aquí y lo curioso es claro,
él nuevamente llega, entra a método 2 y lanza MiException y aquí acaba el flujo.

[05:50] Eso es porque yo estoy ejecutando dos veces el método 2, entonces ese fue un error
mío. Yo no quiero esto, obviamente. Guardo aquí y nuevamente intento, y ahora si el juegos
está como esperábamos. ¿Por qué? Porque él dio Inicio main, Inicio método 1, Inicio método 2,
lanzó MiException. La exception que acabamos de crear nosotros en este mismo momento. ¿Y
qué hizo?

[06:15] Trató la excepción, la recibió, imprimió el StackTrace, el la traza de la pila de ejecución y

dijo: "perfecto, ahora voy a seguir con mi vida," sigue todo, Fin de método 1 y Fin de main. Y
vemos que, claro, obviamente, después de throw new MiException no imprime nada, porque
ya vimos que no puedes escribir nada más después del throw. Ahora llega una nueva duda.

[06:46] ¿Por qué entonces yo estoy usando MiException, extendiendo de RuntimeException y

no estoy extendiendo directamente de Excepción o, mejor aún, de throwable? Porque ya vimos
que es throwablel quien tiene toda la lógica, todos los métodos que usa exceptión, porque
ArithmeticException, RuntimeException, Exception todos lo único que hacen ¿qué es? Es llamar
super.

[07:17] Super, super, super, para llamar a la clase padre siempre. ¿Y al final quién hace todo?
Throwable. Entonces, eso es un poco sospechoso. Vamos a ver en el siguiente video un poco
más acerca de cómo están organizadas las excepciones en Java.

CLASE 297 JAVA EXCEPCIONES

MiException extiende de RuntimeException, que a la vez se extiende de Exception y a la vez
extiende de Throwable. Suena como un trabalenguas, pero en un momento ya va a tener un
poco más de sentido.

[00:23] Y la duda que a mí me quedó en el video anterior fue por qué es que yo no consigo,
pues digamos extender directamente de Throwable, si al final ya vimos en el código que
Throwable es quien hace todo el trabajo, digamos. Él es quien imprime el stackTrace, él es
quién define qué va a hacer con los parámetros que le enviamos al constructor, él es quien hace
todo ese trabajo. Bueno.

[00:52] La explicación es un poco simple. En Java tenemos dos grandes grupos que extienden
de Throwable. Tenemos, por un lado, las excepciones, exceptions. Y por otro lado tenemos los
errores. ¿Cuál es la diferencia entre estos dos? Las excepciones como tal son los errores que
son lanzados por nosotros cuando estamos programando normalmente cuando estamos,
digamos, creando clases, todo eso usando la JVM.

[01:30] Cada cosa que nosotros hagamos sobre la JVM va a lanzar excepciones, que son los
tipos de errores que nosotros podemos controlar, que el programador puede controlar. ¿Y
entonces qué es un error? El error viene a ser el tipo de error lanzado por la JVM. Entonces
vamos a hacer una diferencia aquí.

[01:54] Esta es la JVM, lo que está encima de la JVM son excepciones y lo que está dentro de la
JVM son errores. Esos errores son los que lanzan los que programan la JVM. La gente de Oracle
que da mantenimiento a la JVM no lanza excepciones, lanza errores. ¿Por qué?

[02:17] Porque recordemos que la JVM lo que hace ya es trabajar con bytecode a un nivel ya de
memoria directamente. Entonces ustedes aquí pueden ver que yo cité un error muy conocido,
muy común, que es el StackOverflowError. Nos damos cuenta en la nomenclatura que cuando
nombramos excepciones, llega, digamos el nombre de la excepción más el complemento
exception.
[02:46] En el caso de los errores, es la misma regla, nombre del error y el complemento, error,
para diferenciar justamente eso. Entonces, y solo para resumir aquí, excepciones es el tipo de
errores que retornamos los que programamos sobre la JVM, nosotros los programadores
normales. Bueno, no normales, pero los que hacemos features basándonos en la JVM.

[03:12] Y los errores son el tipo de errores retornados por los que programan la JVM en sí. Y
para dar un mejor ejemplo de lo que es un error yo aquí voy a generar un error y justamente
este error, el StackOverflowError. ¿Cómo lo voy a hacer? Muy sencillo, el StackOverflowError es
un error que se da cuando la memoria y cuando el stack propio dicho, cuando la pila se llena.

[03:440] Ustedes dirán, ¿pero cómo se puede llenar la pila? Simplemente yo puedo hacer eso
aquí. Método 2. ¿Por qué? Porque yo tengo aquí un método 2 que llama a método 2. Ahí yo ya
tengo un ciclo infinito, porque método 2 llega aquí y él va a llamar a método 2, y él va a llegar
aquí y él va a llegar acá. ¿Entonces, qué va a pasar con mi stack?

[04:11] Si yo tenía main método 1, método 2, método 2, va a llamar a método 2, llega aquí,
método 2 va a llamar a método 2, llega aquí, método 2 va a llamar a método 2 y así va a seguir
hasta el infinito, y todo tiene un límite, entonces vamos a ejecutar esto. Guardamos y listo.
Vemos que aquí dio error en algún punto.

[04:34] Si nosotros subimos, subimos, subimos todo el todo el flujo, vamos a ver que él dio aquí
StackOverflowError, excepción en el hilo main. ¿Dónde? En flujo Java línea 23. Aquí, método 2,
entonces este error no puede ser controlado por nosotros. ¿Por qué? Porque si es que
simplemente ya no hay más memoria en el stack no hay forma ninguna que nosotros
consigamos hacer algo al respecto.

[05:02] Simplemente se acabó la memoria. Muy diferente al caso de la excepción de aquí,

donde si detona una bomba del tipo ArithmeticException porque ya sea dividiste entre 0 o
NullPointerException porque la variable hacía referencia a un campo nulo en la memoria, son
cosas de las que el sistema se puede recuperar de cierta forma.
[05:27] Yo puedo adicionar cierta lógica para, en caso de que retorne null,
NullPointerException, entonces crea un nuevo objeto y sigue el camino. Solucionado. En el caso
de los errores no es así. El error simplemente ocasiona que si mi máquina se quedó sin
memoria, automáticamente mi programa va a morir, no hay nada más que hacer, no hay más
ciencia ahí, no hay forma que nosotros consigamos controlar ese error.

[05:51] Entonces esa es la diferencia básica entre estos dos grandes grupos de excepciones y los
errores. Entonces esa es, digamos, la primera razón por la cual yo no puedo extender
MiException de throwable, porque yo estaría quebrando la regla de Java de tener solamente
dos grupos de errores, errores como tal y excepciones, yo no puedo hacer eso.

CLASE 298 JAVA EXCEPCIONES

Tenemos el stack. En el stack tenemos los métodos, los métodos pueden lanzar excepciones. Yo
consigo tratar esas excepciones con try catch. Y consigo lanzar mis propias excepciones con
throw.

[00:31] Ahora, yo también puedo crear mis propias excepciones. Pero no puedo extenderlas
directamente de Throwable. ¿Por qué? Porque Throwable divide todo en dos grandes grupos
que son Exception y Error. Hasta ahí todo bien, y sabemos que hay una jerarquía entre las
excepciones que estamos viendo ahora.

[00:51] Y la duda con las que nos quedamos en el video anterior fue por qué yo necesito
extender de RuntimeException y no de Exception. Voy a hacer el experimento en el código. Sí,
aquí está MiException. Y en lugar de extender de RuntimeException, voy a extender de
Exception para ver qué qué es lo que pasa.

[01:18] Lo primero que yo he visto aquí, que ha saltado es que salió una x aquí en flujo.java, eso
ya me da un síntoma de que algo no está compilando aquí. Entro aquí, y en efecto, yo tengo
aquí ahora que MiException en el catch no está compilando. ¿Y cuál es el problema? Yo voy a
borrar esto de aquí, porque yo creo que no está compilando porque método 2 ya no lanza
MiException.
[01:47] Entonces voy a descomentar esto para que él lance MiException. Y él no está
compilando ni siquiera aquí mi método 2. ¿Por qué? Porque me dice que esta excepción no
está siendo atrapada, no está siendo tratada. ¿Pero por qué no? Si en catch, que está aquí yo
estoy de hecho, atrapando MiException. ¿Cuál es el problema aquí si ahora estoy extendiendo
de Exception?

[02:19] Voy a dar un paso hacia atrás. Voy a poner nuevamente RuntimeException solo para
comprobar que mi código ya compilaba antes. Voy a regresar aquí a flujo. Ahora con pila,
entonces el problema es cuando extiendo de Exception. Un paso hacia delante nuevamente. Y
vamos a averiguar por qué es que no compila.

[02:43] Si en la primera categoría estábamos en los RuntimeException, si ahora estamos en el

grupo de los Exceptions, yo necesito ser un poco más explícito en este momento a la hora de
tratar con MiException. ¿A qué me refiero yo? Ahora no solamente debo decirle al código que
si ejecuta esto, quizás de MiException.

[03:12] Ahora como es un exception propiamente dicho, ya no extiende de RuntimeException

sino desde Exception, lo que necesito decirle ahora es que él puede lanzar throws, diferencia
con throw, throws, él puede lanzar MiException. Esa es la diferencia. ¿Por qué? Yo aquí
necesito explícitamente en la firma del método, decirle: "método 2, lanza MiException". Yo
estoy seguro.

[03:48] Estoy totalmente seguro que él puede lanzar mi excepción, a diferencia del try catch,
que el try catch es una estructura básicamente si es que él lanza esa excepción, que no sé si lo
haga pero si la lanza, atrápala. Por ejemplo si yo ejecuto método 2 aquí fuera, él no va a
compilar. ¿Por qué no va a compilar?

[04:11] Porque uno, yo no estoy diciéndole a métopdo 1 que él puede lanzar esa excepción, es
la primera cosa. Ahora, si yo le doy un clic aquí, yo tengo dos opciones. La primera es, adiciona
la declaración throws, en la firma del método, o sorround con try/catch. ¿Qué significa eso?
Rodéalo con un try/catch, con una estructura try/catch, como es la que yo tenía anterior que es
esta de aquí, que sí compilaba sin problemas.
[04:42] ¿Por qué? Porque yo atrapaba esta excepción, la cual yo estoy seguro que este método
lanza. Primera cosa. Aquí yo estoy 100% convencido de que él lanza mi excepción o puede
lanzar mi excepción si da algún error, pero de alguna forma él puede lanzar esa excepción. No
es si por si acaso la lanza. No. Él puede lanzar esta excepción. Es certeza.

[05:07] Entonces, si yo no lo agrego aquí, en el try/catch, y dejo solamente método 2 por

ejemplo, yo voy a tener que adicionar aquí, de repente, si yo no quiero usar try/catch, de igual
forma, throws MiException y ahí compila este método. ¿Pero cuál es el problema? Sigue
subiendo. ¿Por qué?

[05:31] Porque main llama a método 1, entonces main ya necesitaría tratar con MiException.
Entonces se dan cuenta cómo la bomba que explota aquí abajo va subiendo, subiendo,
subiendo, si es que yo no le doy un tratamiento en el try/catch. Yo podría darle un tratamiento
en try/catch aquí. Por ejemplo aquí Eclipse me dice: "Sorround with try/catch". Si le doy clic,
automáticamente él me va a generar ese bloque try/catch.

[05:58] Aquí va a hacer un comentario, que este catch block fue generado automáticamente,
pero está bien, es lo que yo esperaba, y aquí ya tiene un tratamiento de MiException, entonces
básicamente esa es la diferencia si yo extiendo de RuntimeException o extiendo directamente
de Exception.

[06:23] En una yo preciso decirle a Java que puede, en una me refiero a RuntimeException, en
RuntimeException yo necesito decirle que puede ser, puede que sí, puede que no, pero puede
ser que en algún momento lance ese tipo de excepción. En Exception, yo le digo "él va a lanzar
esa excepción, cualquier cosa él va a lanzar esa excepción".

[06:47] Entonces es una forma ya digamos de verificar ese comportamiento usando Java. Este
tema de las excepciones, en realidad no solamente con respecto a Java. Lo único que sí es con
respecto a Java es esta división entre Exception y Error, ese tratamiento si es todo con respecto
a Java, la jerarquía si es puramente Java, pero cómo manejar las excepciones y cómo ya se
propagan en la pila de ejecución.
[07:16] Si es de cualquier lenguaje de programación, Python, Ruby, etcétera, todo eso.
Entonces ahora ya tenemos buenas razones para elegir o Exception o RuntimeException a la
hora de extender, entonces recapitulando un poco aquí, a lo que ya tenemos.

[07:36] Sabemos que las excepciones de Runtime extienden también de Exception y a la vez de
Throwable, pero Java nos obliga a declarar en la firma del método o un método try/catch, si
nosotros queremos extender directamente de Exception

CLASE 299 JAVA EXCEPCIONES

Ya sabemos que entre RuntimeException y Exception, la diferencia es que en una yo necesito

decirle en la firma el método que con certeza va a lanzar esa excepción y en el caso de
RuntimeException es que de repente por ahí él lanza esa excepción.

[00:56] En Java ellos tienen un nombre que es unchecked y checked. Unchecked es el grupo de
RuntimeException. ¿Qué significa? Como su nombre lo dice, unchecked, no verificado. Esas
excepciones no son verificadas por el compilador. Puede que lance, puede que no nace, el
compilador no nos va a alertar si es que por si acaso, él lanzó, él puede lanzar o no puede
lanzar, el compilador no va a hacer este trabajo.

[01:27] En el caso de checked, de verificado, el compilador sí nos va a obligar a tratar esa

excepción, si es que es lanzada en alguna parte del código. Si no, no va a compilar. Y eso lo
comprobamos aquí. ¿Por qué? Porque nuevamente yo voy a borrar este código. Esto es
solamente a modo de repaso, solamente para afianzar el el concepto de Exception de checked y
unchecked.

[01:53] Vemos claramente aquí que si yo aquí en método 2, yo estoy lanzando explícitamente
mi exception, él ya me obliga primero o hacer el try/catch a este nivel, a tratarlo aquí y encerrar
la bomba aquí, o avisarle al método que está abajo de la pila: "oye, por si acaso hay una
excepción aquí de tal tipo, sí o sí. Tienes que saber cómo tratar con ella".

[02:20] Es la primera diferencia y el compilador ya nos va a avisar en ese caso. Entonces como
yo ya estoy avisando en la firma el método, él lanza MiException, entonces automáticamente si
yo no lo atrapo aquí, si yo no le doy tratamiento aquí, y también le aviso al de arriba: "Oye, por
si acaso lanza MiException".

[02:40] Es como una especie de teléfono entre los entre los métodos de la pila, porque si tú no
vas a hacer nada con el Exception, avísale al siguiente que por si acaso le va a llegar un objeto
tipo MiException, una bomba tipo MiException. Si él no hace nada, avísale al que sigue, "por si
acaso te van a mandar una bomba tipo MiException" hasta que alguien se haga cargo.

[03:03] Y eso es lo que pasa aquí, porque él fue lanzado en método 2. En método 1 nadie le hizo
caso, pero sí le avisaron a main que tenía que hacer algo con esa bomba, tenía que hacer algo o
la bomba iba a detonar, o mejor dicho, ni siquiera iba a compilar si es que él no hacía nada.

[03:21] Entonces, esa es la diferencia, es una excepción del tipo checked, verificada, verificada
por el compilador. El compilador no me deja seguir adelante, ni siquiera generar el bytecode, si
es que yo no trato esta excepción, a diferencia de cómo vimos anteriormente, de Runtime.
Porque en Runtime yo no necesito avisar nada.

[03:46] Incluso yo tengo aquí: "throws MiException", "throw new MiException", etcétera, y el
compilador está feliz por su lado porque dice: "Esa excepción extiende de Runtime entonces es
una excepción unchecked, no verificada, entonces no me voy a tomar el trabajo pues de
verificar obviamente si él está atrapando o no". Entonces esta es la diferencia entre estos dos
subgrupos de excepciones.

[04:15] Repasando aquí. Throwable en la cabeza tiene dos grandes grupos de errores: errores y
excepciones. Los errores son lanzados por los programadores que mantienen la máquina virtual
de Java, la JVM, y las excepciones son lanzadas por nosotros que programamos sobre la JVM, la
máquina virtual de Java. Dentro de este pequeño grupo de excepciones tenemos dos
subgrupos: excepciones chequed y unchequed.

[04:45] Las unchecked son las que extienden de RuntimeException, y por lo tanto las que no
son verificadas por el compilador. Contrario a checked, que extienden de Exception y sí son
verificadas en el momento pues de hacer la compilación. Entonces en resumen lo único que
diferencia es al momento de la compilación, si tú quieres que el compilador te ayude a decidir
cómo tratar la excepción y si tú quieres atrapar el error porque tú crees que pueda dar ese
error.

[05:21] Ya es una elección dependiendo también del método que estés programando, el flujo
de negocios que estés programando, ya son varios factores. Pero básicamente la diferencia es a
la hora de compilar. Yo les recomiendo también dar una pequeña hojeada por ahí por las clases
que extienden de RuntimeException y de Exception. Conozcan los errores que la JVM ya trae
consigo.

[05:49] Conozcan pues el código que la JVM incluye. En el caso de RuntimeException ya vimos
que él incluye ArithmeticException y NullPointerException. En el caso de Exception, él tiene
clases hijas como IOException, que es cuando trabajamos con archivos.

CLASE 300 JAVA EXCEPCIONES

 Existe una gran jerarquía de clases que representan excepciones. Por

ejemplo, ArithmeticException es hija de RuntimeException, que hereda de Exception, que
a su vez es hija de la clase de excepciones más ancestral, Throwable. Conocer bien esta
jerarquía significa saber cómo usar las excepciones en su aplicación.
 Throwable es la clase que debe extenderse para poder lanzar un objeto en la pila (usando
la palabra reservada throw)
 Es en la clase Throwable donde tenemos casi todo el código relacionado con las
excepciones, incluyendo getMessage() e printStackTrace (). El resto de la jerarquía tiene
solo algunas sobrecargas de constructores para comunicar mensajes específicos.
 La jerarquía que comenzó con la clase Throwable se divide en excepciones y errores. Las
excepciones se utilizan en los códigos de aplicación. Los errores son utilizados
exclusivamente por la máquina virtual.
 Las clases que heredan de Error se utilizan para informar errores en la máquina virtual.
Los desarrolladores de aplicaciones no deben crear errores que hereden de Error.
 StackOverflowError es un error de máquina virtual para informar que la pila de ejecución
no tiene más memoria.
 Las excepciones se dividen en dos categorías amplias: las que el compilador comprueba
obligatoriamente y las que no.
 Los primeros se denominan checked y se crean por pertenecer a una jerarquía que no
pasa RuntimeException.
 Los segundos están unchecked y se crean como descendientes de RuntimeException.

CLASE 301 JAVA EXCEPCIONES

Java agrupa estas excepciones en dos grandes grupos que son las excepciones checked y
unchecked, que son digamos pues las verificadas y no verificadas.

[00:32] ¿Y qué significa esto de verificar y no verificar? Haciendo un overview de lo que

hemos visto la clase pasada, una excepción verificada, una del tipo check, es una
excepción que, valga la redundancia, es verificada por el compilador para que nosotros
tratemos esa excepción a nivel del código de forma obligatoria.

[00:56] Por ejemplo, si mi excepción verificada es declarada en la firma de un método,

entonces ahí yo sí o sí, de cualquier forma necesito que los métodos que van a llamar al
método que está lanzando una excepción sepan cómo tratar con ese tipo de error, caso
contrario de una excepción no verificada, que es la unchecked.

[01:19] Estas excepciones extienden de RuntimeException, y pueden ser excepciones

que pueden ocurrir o puede que no, pero si es que ocurren, esperemos estar preparado
para para poder tratar este tipo de error. Entonces las excepciones no verificadas
extienden de RuntimeException, mientras que las verificadas extienden de Exception.

[01:47] Es por esta razón, pues que no podemos hacer una extensión directamente de
Exception, si no obligaríamos pues a al programador a sí o sí hacer tratamiento de cada
excepción que vayamos lanzando. Y no es también el objetivo de Java. Por otro lado,
solamente mencionando tenemos el grupo de los errores. ¿Qué son los errores?

[02:06] Los errores son, valga la redundancia, los errores lanzados por la máquina virtual
de Java para situaciones en las cuales el programador no puede tener ningún tipo de
control, por ejemplo falta de memoria, que la máquina virtual de Java crasheó o alguna
cosa así. Entonces, esos son los errores.

[02:31] Como programadores no tenemos acceso a tratar errores ni a lanzar errores, eso
es hecho por la misma máquina virtual de Java, la JVM. Pero sí tenemos control sobre
las excepciones, podemos crear nuestras propias excepciones, como lo hemos hecho, y
definirlas como excepciones verificadas o no verificadas, según pues necesitemos.
[02:50] Ahora, con este overview, vamos a volver aquí al código. Y si recuerdan,
nosotros creamos una excepción nuestra, que es mi excepción y está extiende de
RuntimeException. ¿Qué significa? Que es una excepción no verificada. Yo voy a cambiar
esto aquí, para una excepción verificada, entonces yo quiero obligar aquí a que mi
Exception sea tratada en el código.

[03:19] Y para esto, solo para recrear lo que hemos venido haciendo, a modo de repaso,
yo voy a crear aquí un void deposita en la clase cuenta que hemos creado, recuerden
que esta clase cuenta no tiene nada, y yo voy a crear un método aquí de cero. Tengo el
método aquí en visibilidad por defecto. Por ahora no me voy a preocupar por eso.

[03:45] ¿Y cómo es que yo obligo a un método a verificar una excepción? ¿Cómo es que
yo obligó al código a que haga verificación de una excepción del tipo checked? Con la
palabra reservada throws, que está aquí. ¿Y qué voy a lanzar ahí? ¿Qué excepción va a
lanzar este método? MiException, perfecto. "Ctrl + espacio" y autocompletamos.

[04:10] ¿Cómo vamos a probar esto? Vamos a darle un New class y aquí le vamos a
escribir TestCuentaExceptionChecked, porque vamos a testear una excepción verificada.
Le damos finish. Venimos aquí y creamos nuestro ya conocidísimo método main,
recuerden, "Ctrl + espacio", nos va a sugerir el método main, le damos enter y él va a
autogenerar ese código por nosotros. Perfecto.

[04:42] ¿Y qué voy a hacer aquí? Voy a instanciar una variable tipo cuenta, entonces voy
a decirle cuenta, cuenta, = new, "Ctrl + espacio", cuenta. Perfecto. ¿Y qué voy a hacer?
Voy a llamar al método deposita. Y aquí ya viene, digamos, pues el primer error. ¿Por
qué? Él aquí no me está dejando compilar porque obviamente, él me está diciendo, tú
estás declarando en este método que él va a lanzar MiException.

[05:19] Y MiException es una excepción del tipo checked, es verificada, entonces el

compilador necesita de cualquier forma, asegurarse que nosotros estamos tratando
este error, cosa diferente si yo tuviera esto. RuntimeExcepcion, guardo aquí y vemos
que él compila tranquilamente. ¿Por qué?
[05:41] Por más que yo estoy lanzando aquí esta excepción o estoy diciendo que este
método va a lanzar esta excepción, como es unchecked, no verificada, entonces el
compilador no se va a importar, si es que yo estoy haciendo un tratamiento o no de esta
excepción. Para seguir con el ejemplo, yo lo voy a dejar solamente como exception.

[06:09] Voy a borrar, aquí voy a guardar nuevamente, él vuelve a dar ese error. Y para
esto lo que yo voy a hacer, el id aquí de Eclipse, aquí me da dos sugerencias, la primera
es o añades la declaración throws en la firma del método, en este caso, el método main,
o lo envuelves con una estructura try/catch, que es la que hemos venido usando para
tratar, pues las excepciones. Yo voy a escoger la segunda.

[06:36] Yo podría hacerlo de dos formas, podría escribir aquí try, abrir el bloque, y poner
este método aquí adentro deposita, recuerden que un try no puede vivir sin su catch, ¿y
en el catch yo qué excepción voy a atrapar? MiException. Y su nombre variable, ex. Y
aquí le puedo poner System.out.println("Exception atrapada"). Perfecto. ¿Cuál es la
segunda forma?

[07:11] Primero, vemos que aquí ya está compilando bien porque yo estoy haciendo un
tratamiento de la excepción. Pero si yo no quisiera escribir el código, entonces lo que yo
voy a hacer es voy a sacar esto de aquí, voy a borrar este try/catch porque no lo voy a
usar. Supongamos que no he hecho nada, yo puedo autogenerar ese código escogiendo
la segunda opción Surround with try/Catch.

[07:34] Le doy clic, ¿y automáticamente qué hizo? Básicamente el mismo código que yo
ya había escrito, él me lo ha autogenerado. Y aquí lo que él está haciendo, que es en mi
caso, yo imprimí manualmente vía consola la excepción, pero él está llamando
directamente al método printStackTrace, que ya lo hemos visto anteriormente, ya
sabemos para qué sirve, de la clase throwable.

[07:59] Él nos va a dar información de todo el StackTrace de la excepción lanzada.

Entonces, acabamos de ver que necesitamos atrapar esta excepción de cualquier forma,
si es que la excepción es del tipo checked. Si fuera una excepción del tipo unchecked,
entonces simplemente el compilador no se va a hacer ningún problema, me va a dejar
compilar y si en algún momento yo lanzo la excepción, bueno yo debería haber estado
ya preparado para tratarla.

[08:34] Pero no va a ser un requisito para compilar mi programa y vemos que aquí una
clase, la clase flujo, dejó de compilar. ¿Por qué dejó de compilar? Porque método 1 está
lanzando MiException, y MiException yo la he vuelto una excepción del tipo checked.

CLASE 302 JAVA EXCEPCIONES

] Vimos que ese caso se dio aquí a nivel de cuenta y yo conseguí y tratar como una
estructura try/catch. Ahora, quizás en algunos casos puedan pensar: "bueno, pero si va
a ser tan trabajoso tratar cada excepción ¿por qué no extiendo directamente de
RuntimeException, guardo y el código ya vuelve a compilar tranquilamente?"

[01:15] Y no es una solución válida. ¿Por qué? Porque tenemos que recordar que si
nosotros necesitamos o queremos asegurarnos que MiException siempre va a ser
tratado obligatoriamente por el programador nosotros nos apoyamos en el compilador
para que él verifique siempre que esta excepción de aquí MiException, está siendo
tratado.

[01:41] Entonces volvemos aquí nuestra clase Flujo y ya hemos visto que método 1 no
compila. Vamos a aplicar la misma estrategia que aplicábamos con la clase
TestCuentaException. ¿Qué vamos a hacer? Vamos a decirle que añada un try/catch y
listo, básicamente eso sería todo. ¿Pero qué es lo que yo les quiero mostrar aquí?

[02:05] Si recordamos las clases anteriores, ¿qué sucedería si después de método 2? O

mejor dicho, aquí, en este punto de aquí, Inicio método 2. Si yo hiciera esto de aquí y a
va a ser igual a 50 entre 0. ¿Qué les parece? Esto va a dar un error conocido. Esto de
aquí va a lanzar un ArithmeticException. ¿Será que yo puedo atrapar ese
ArithmeticException, aparte de MiException que yo estoy obligado a atrapar?
[02:51] Porque si se dan cuenta, aquí él va a dar una excepción y ya lo hemos visto, lo
hemos comprobado. Pero el compilador no importa si es que estamos o no haciendo un
tratamiento de esa excepción. Yo sé que va a dar esa excepción porque ya nos ha
pasado, lo hemos visto. Pero en este caso, bueno, el compilador no va a hacer nada.
¿Qué podría hacer yo? Ya lo hemos visto.

[03:15] Yo añado un pipe ¿y pongo qué cosa? ArithmeticException, ¿y con eso yo de qué
me aseguró? Entonces estoy atrapando MiException y estoy atrapando
ArithmeticException. ¿Ahora qué tal si yo aquí también hago algo como esto? Cuenta c
igual null, y aquí llamo al método deposita. ¿Qué les parece? Esto de aquí ya lo hemos
visto también. ¿Qué tipo de excepción va a dar? NullPointerException.

[03:48] Volviendo al Código. ¿Estoy atrapando NullPointerException en algún lado? No.

Pero el código compila, y yo sé que él va a dar NullPointerException porque ya lo hemos
provocado antes. Ahora solo estamos trayendo errores que ya habíamos cometido para
forzar a que ocurran. ¿Y qué podría yo hacer aquí en ese caso?

[04:14] Perfecto, entonces sí también sé que va a ocurrir NullPointerException, lo

agrego aquí con NullPointerException. Perfecto. Entonces yo aquí ya tengo las tres
excepciones atrapadas y aquí él está compilando. Porque bueno, claro, en el caso del
NullPointerException él no puede ser lanzado. Yo no puedo hacer catch de él porque no
extiende directamente de Throwable.

[04:46] Como yo no lo estoy lanzando directamente, no lo puedo atrapar aquí a ese

nivel, pero entonces vamos a quedarnos únicamente con estos dos, MiException y
ArithmeticException. Y si volvemos a la estructura, a la jerarquía de las excepciones, de
cómo es que están agrupadas, vamos a ver que todas extienden de Exception tanto
Runtime que es el caso de Arithmetic y NullPointerException como MiException.

[05:13] De alguna forma todas llegan a excepción, ¿entonces será posible que yo
consiga, digamos atrapar cualquier tipo de excepción en una sola sin necesidad de
escribir tantas excepciones aquí? ¿Ustedes que opinan? La respuesta es sí, y si ustedes
prestaron mucha atención a las clases de polimorfismo y herencia, van a saber muy
rápido por qué.
[05:45] Es que si yo aquí digo abierta y directamente Exception, él va a hacer catch de
cualquier excepción que ocurra en mi código, cualquier clase que extienda de Exception,
que como vimos son todas las Exception que tenemos disponibles, tanto checked como
unchecked. ¿Cómo vamos a asegurarnos de eso? Vamos a probar aquí.

[06:13] Y vemos aquí que él lanzó el ArithmeticException, pero me infinalizó. ¿Por qué?
Porque yo hice tratamiento. Hice tratamiento de Exception. Cualquier cosa que suceda
aquí, yo me hago cargo, con Exception. Entonces, borrando esto y lanzando
directamente MiException, puedo lanzar aquí, voy a decirle que sí lo quiero guardar, y
MiException fue lanzada pero también fue atrapada de manera genérica con Exception.

[06:53] Entonces esta es una forma más de digamos atrapar cualquier tipo de
excepción. Pueden haber casos en los que sea necesario, hay casos en los que es mucho
mejor dejar clara y explícitamente que yo estoy atrapando MiException. ¿Por qué?
Porque van a haber veces que yo quiero dejar bien en claro a nivel del código qué tipo
de error estoy tratando aquí, para el siguiente programador que venga a hacer un
mantenimiento en este código.

CLASE 303 JAVA EXCEPCIONES

Recordemos que las clases hijas pueden sobrescribir los métodos y añadir su propia
lógica. Entonces, ahora aquí yo tengo un constructor por defecto, tengo un constructor
en el cual yo envío el número de agencia, número de cuenta obligatoriamente, el
método deposita es del tipo abstracto, tengo el método saca. ¿Entonces, qué es lo que
vamos a hacer aquí?

[01:42] Recordemos que en los primeros ejemplos que vimos para el tratamiento de
excepciones yo mencioné mucho el método saca. ¿Por qué? Porque aquí la única
condición que yo estoy escribiendo para que él no pueda sacar dinero, es que
simplemente no tenga saldo, pero ya vimos que pueden haber muchos más motivos por
los cuales yo no pueda retirar dinero.

[02:05] Ya sea que mi cuenta está bloqueada, que el banco detectó un intento de fraude
que no tengo saldo y entre otros, entonces yo voy a implementar aquí esa lógica,
usando excepciones. ¿Cómo lo voy a hacer? Primero que todo tengo que definir el tipo
de método que yo voy a usar aquí. ¿Por qué? Porque saca era un booleano que me
decía si puedo o no puedo sacar.

[02:32] Pero también podría ser que simplemente saca sea un void que si saco, perfecto,
saqué mi dinero, y si no saco, él me va a decir por qué no saqué con una excepción, con
un error. Para eso, primero voy a crear mi excepción. Entonces voy aquí, Byte Bank, new
class. Y como va a ser una excepción, voy a llamarla SaldoInsuficienteException, y
recordemos que yo no necesito agregar ese exception al final.

[03:18] Yo no estoy obligado a que MiException tenga ese post de Exception, pero es
buena práctica y es ya una convención que si va a ser una Exception yo le diga, pues en
el nombre de la clase que en efecto va a ser un Exception. Entonces, le doy aquí finish, y
en SaldoInsuficienteException yo voy a decirle, pues que va a ser un RuntimeException
para no hacer mucho problema con la compilación del código que usa eso.

[03:46] Entonces yo le voy a decir aquí extends RuntimeException, perfecto. ¿Y aquí qué
puedo hacer yo? Puedo llamar a los constructores de la clase padre de
RuntimeException, y para este caso yo voy a llamar solamente al constructor que usa un
mensaje, que envía un mensaje, entonces yo voy a String mensaje, abro aquí y llamo a
super, entre paréntesis, punto y coma, y que le envió como parámetro el mensaje. Y
listo.

[04:31] ¿Qué estoy diciendo con esto? Declaro el constructor de

SaldoInsuficienteException y cada vez que yo lance esa excepción, yo voy a mandarle un
mensaje y él mediante el constructor de la clase padre que es RuntimeExceptin, él va a
setear ese mensaje. Hasta ahí todo bien.

[04:48] No hay más más ciencia aquí hasta el momento. Volvemos a cuenta y vamos a
nuestro método saca. Nuestra primera condición aquí es de que si mi saldo es mayor al
valor, entonces ahí yo puedo sacar dinero, le resto el valor al saldo, perfecto y retorno
true. Yo voy a sacar esta condición de aquí. Ya van a ver por qué.
[05:19] Bueno, primero que todo yo voy a borrar todo esto de aquí, el else, el return
True, porque ya no voy a retornar un booleano. Y esto de aquí lo voy a volver void.
Perfecto. ¿Con esto qué estoy diciendo? Con esto lo que yo digo es bueno, si es que
sacas dinero, perfecto, se va a restar el valor que quieres sacar de tu saldo. Y si no, pues,
te voy a tener que devolver una exception.

[05:52] ¿Y para esto, yo que voy a decir aquí? Le voy a preguntar una cosa. ¿En qué caso
yo voy a lanzar esa exception de saldo suficiente? Si this.saldo es menor a valor. Si es
igual, entonces perfecto, puedes sacar, te quedas en cero, pero si fuera menor,
entonces tú no puedes sacar. Y dénse cuenta que yo cambié la condición del if anterior.

[06:17] Si recordamos un poco, simplemente aquí lo que preguntaba era si yo tenía igual
o mayor saldo para retirar, pero aquí yo le estoy preguntando si él tiene menos saldo
que lo que él quiere retirar. ¿Por qué? Porque si esta condición es verdadera, ¿entonces
yo qué voy a hacer aquí? Voy a lanzar un nuevo throw new SaldoInsuficienteException.

[06:41] ¿Con qué mensaje? Perdí el cursor aquí. "No tienes saldo", y al final su punto y
coma. Perfecto. Entonces, es de esta forma que yo consigo tener un control de errores a
través de las excepciones. ¿Por qué lo puse aquí arriba y no aquí abajo? Porque
generalmente una buena práctica es todo lo que sea control de errores, validaciones, va
al inicio del método.

[07:15] Entonces, antes de yo efectuar cualquier operación, yo tengo que validar que los
parámetros que yo tengo actualmente sean válidos. Tengo que verificar en este caso
que tengo el saldo suficiente para retirar el dinero que yo estoy especificando en valor.
Y bueno, con esto tendríamos, pues ya terminado terminado este refactor. Refactor es
la reconstrucción del código para mejorarlo.

[07:43] Ahora ya no devuelvo un booleano, sino yo uso simplemente un void. ¿Y a quién

transfiere? Bueno, él está aplicando aquí la condición de que si el saldo es mayor,
entonces saca de un lado, deposita en la otra cuenta, perfecto, no vamos a modificar el
método transfiere, hemos modificado solo el método saca. Y vemos que aquí una de las
cuentas dejó de compilar y es la clase de cuenta corriente.
[08:13] ¿Por qué? Porque él está haciendo un overwrite, él está sobrescribiendo un
método del tipo boolean que se llama saca, pero en la clase padre, que es la clase
cuenta, ya no tenemos un método del tipo boolean con el nombre saca. Tenemos un
método del tipo void.

[08:33] Recordando un poco sobre herencia y polimorfismo, en esta clase de aquí, si yo

quito el overwrite, si yo comento esta línea de aquí, entonces este código de cualquier
forma tampoco va a compilar porque él está de alguna forma llamando al método de la
clase padre. Entonces, yo voy a dejar aquí el overwrite con el cual yo especifico que sí en
efecto yo quiero sobrescribir el método, quiero que el compilador se asegure de eso.

[09:15] Y principio básico, si yo sobrescribo el método de la clase padre, la firma del

método tiene que ser exactamente la misma, por lo cual, si aquí es un método del tipo
void, aquí él también tiene que ser del tipo void, primer punto. Guardamos aquí y vemos
que en esta línea él ya compila. Me dice: "Perfecto. Tú estás sobrescribiendo el mismo
método". ¿Pero ahora cuál es el problema?

[09:38] Que yo acá estoy retornando el método saca de la clase padre y el método del
tipo void no debería retornar ningún valor, entonces yo podría dejarlo simplemente así
de esta forma y listo, el método ya va a compilar. ¿Por qué? Porque él va a llamar al
método de la clase padre y en la clase cuenta él va a efectuar esta operación, y si es que
no hay saldo, pues entonces no hay saldo y va a darnos la excepción.

[10:09] Perfecto. Entonces vamos a hacer un testo de la cuenta. Vamos a venir aquí,
vamos a crear un nuevo test para no interferir con lo que ya hemos trabajado hasta
ahora en ese proyecto. Recordemos que es un proyecto de un módulo anterior del
curso. Aquí le vamos a poner TestCuentaExceptionSaldo. Finish

[10:40] Y como ya es de costumbre, vamos a crear nuestro método main, vamos a crear
nuestra cuenta = new, y va a ser del tipo CuentaAhorros, con un número de agencia
vamos a inventar 123 y un número de cuenta 456. Perfecto. Entonces hemos creado
aquí ya nuestra cuenta de ahorros. Nuestra cuenta de ahorros tiene sobrescrito el
método deposita pero no el método saca, primer punto que vamos a hacer aquí.

[11:21] Entonces, ¿qué vamos a hacer aquí? Depositar dinero. Cuenta.deposita, vamos a
depositarle 200, de cualquier moneda que ustedes quieran. Y ahora vamos a hacer un
cuenta.saca y vamos a sacar pues 200. Y vamos a ver qué es lo que sucede aquí.
Guardamos aquí, perfecto. Tengo una cuenta 456 con nombre cuenta, perfecto, creó la
cuenta, depositó y sacó.

[11:58] Y si yo hiciera esto de aquí, SaldoInsuficienteException. ¿Por qué? Porque yo le

dije: "Deposita 200, saca 210" y la operación no se pudo completar, y aquí está el
detalle: SaldoInsuficienteException, y el mensaje de ahí "no tiene saldo". Entonces es de
esta forma que yo consigo tener un control de errores mucho más detallado usando las
excepciones.

[12:29] Si yo le dijera por ejemplo, le doy igual saldo para que retire todo y deje la
cuenta en cero, perfecto, perfecto, él va a crear la cuenta y mi saldo va a estar en cero.
Si yo aquí le vuelvo a dar cuenta.saca y 10 más, entonces voy a ejecutar, va a la cuenta y
nuevamente no tiene saldo. ¿Por qué? Porque yo aquí ya saqué todo.

[12:56] De esta forma pueden ir jugando, yo aquí hice saca dos veces, una de 200 y una
de 10, y es exactamente el valor que yo deposité. Podemos ir jugando para ver cómo es
que funciona esto de las excepciones. Ya vimos aquí que en la clase cuenta yo podría
tener n condiciones para retornar n excepciones, relacionadas con las reglas del
negocio.

[13:29] En este caso, ¿cuál es la regla del negocio que yo quise validar? Que para retirar
dinero necesitas tener saldo suficiente. Pueden haber n reglas del negocio y las
excepciones no sirven para validar que esas reglas sean cumplidas.

[13:41] Entonces especificamos el mensaje de la excepción, tenemos la excepción. Ya

sabemos pues cómo implementar este concepto de excepciones y crear nuestros
propios tipos de excepciones al mundo real, en este caso en nuestro proyecto de Byte
Bank.

CLASE 304 JAVA EXCEPCIONES

Para dejar este concepto aún más afianzado, vamos a repetir el mismo ejercicio que
hicimos en nuestro proyecto actual del curso, pila de ejecución. ¿A qué me refiero? Voy
a llegar aquí a saldo insuficiente exception y voy a obligar a que esta excepción sea
tratada. ¿Cómo consigo eso?

[00:20] Extendiendo directamente de excepción para que sea una exception del tipo
checked, verificado. Voy a guardar aquí y automáticamente vemos que dejó de compilar
aquí. ¿Por qué? Porque él está lanzando esa excepción pero yo en ningún momento
estoy avisando que este método va a lanzar esta excepción, ¿entonces cuál es la única
solución que yo tengo aquí?

[00:47] Añadir la declaración throws SaldoInsuficienteException, entonces yo aquí estoy

alertando, este método saca lanza esta bomba. El método saca va a lanzar la bomba ,
del tipo SaldoInsuficienteException entonces quienquiera que llame a este método,
prepárate porque vas a recibir una bomba del tipo SaldoInsuficienteException. ¿Y quién
fue el primer afectado? Transfiere.

[01:13] ¿Por qué? Porque transfiere llama al método saca. Y ya vimos, diversas formas
en las que yo puedo atrapar este error. Puede ser simplemente diciendo: "por si acaso,
este método también va a lanzar un SaldoInsuficienteException". Y paso el problema
para un nivel más arriba. O si no quiero hacer eso, lo que puedo hacer es simplemente
un try/catch.

[01:43] Y quedaría así, simplemente yo no necesito avisarle al método que me va a

llamar, que va a recibir una bomba del tipo de SaldoInsuficienteException, porque yo ya
estoy atrapando esa bomba aquí y esa bomba ya no va a subir más en la pila de
ejecución, sino simplemente va a quedar ahí.
[02:05] Y en el caso de cuenta corriente también tenemos otro error. ¿Y por qué?
Porque aquí el método saca tampoco está siendo atrapado. ¿Entonces yo qué necesito
hacer aquí? También tratar este método, perdón, tratar este error, tratar esta
excepción, y lo puedo hacer de la misma forma.

[02:24] Lo que voy a hacer aquí, es decirle que en la firma del método throws
SaldoInsuficienteException, y listo, él va a seguir compilando tranquilamente. ¿Por qué?
Porque él en este punto está lanzando el exception y no hay quién lo trate hasta aquí. Y
ahora el último error que tenemos y es aquí en nuestra clase que hemos creado
anteriormente, TestCuentaExceptionSaldo. ¿Por qué?

[02:52] Porque él aquí está efectuando la operación saca, la cual va a detonar esa
bomba, y el método main no está haciendo tratamiento de esa excepción. Entonces,
nuevamente, ¿qué caminos tengo yo para hacer tratamiento de la excepción? Fácil.
Puedo decirle simplemente a throws declaration.

[03:15] Entonces, el método main ahora va a tener en la firma throws

SaldoInsuficienteException, lo cual de por sí ya es una muy mala práctica, porque
recordemos que el método main es el método principal de nuestro sistema. Entonces, si
el método main lanza un SaldoInsuficienteException, ¿quién va a tratar esa excepción?
Nuestra aplicación, simplemente va a morir en el acto, si esa excepción fuera tratada.

[03:43] ¿Entonces qué necesito hacer yo? Tratarla con otro tipo de estructura llamado
try/catch. ¿Cómo hago eso? Le puedo decir directamente que el IDE me ayude con eso y
él va a hacer aquí un try/catch. En este caso, como yo lo hice seleccionando pues una
sola línea de código y yo puse dos para el fin del ejemplo, el que está en la llamada al
método que está fuera de la estructura de try/catch, va a seguir dando el error. ¿Por
qué?

[04:16] Porque porque aquí vamos a ver que el scope, el alcance del try, el contexto del
try está aquí nada más, entre estas dos llaves, entonces try va a desactivar todo lo que
esté entre sus llaves y catch va a atrapar la excepción que yo le diga aquí, pero si yo
tengo esta llamada fuera del contexto del try, entonces try no tiene ningún control
sobre esto de aquí, sobre esta línea de aquí. ¿Qué puedo hacer yo?
[04:49] Lo meto dentro del try, entonces en el try, ahí ya yo tengo mi paraguas para
estas dos líneas de código, quien sea que lance la excepción, sea esta, o sea esta de
aquí, try ya me da ese paraguas para estar protegido de este error y atrapar esta
excepción del tipo checked, verificada y ahora el compilador ya no me está reclamando
nada. ¿Por qué?

[05:18] Porque yo ya estoy haciendo el tratamiento de esta excepción. Entonces,

nuevamente. El módulo de excepciones es un poco complicado de entender al inicio,
pero si ustedes van practicando crear sus propios errores, crear sus propias bombas, por
así decirlo e ir añadiendo eso a su flujo de control de errores, como lo hemos hecho aquí
en la clase cuenta.

[05:49] Que si es que yo no tengo saldo, entonces es saldo insuficiente, si mi número de

cuenta no fuera válido, entonces tengo otra excepción tipo cuenta no válida, excepción
y cosas así, n cosas, entonces sí me gustaría que sigan practicando este tema de los
errores, que practiquen bastante cambiando aquí el tipo de excepción, si va a ser
checked o unchecked, porque ahí ustedes ya van a comenzar a agarrar la onda más o
menos de qué trata.

[06:24] En qué casos les conviene usar un tipo, en qué casos les conviene usar otro tipo.
Y recuerden pues que hasta las mismas exceptions de Java extienen de esas dos clases,
van a entender hasta cómo funciona la JVM por dentro, por qué es que en algunos casos
lanza checked, por qué es que otras excepciones son unchecked.

CLASE 305 JAVA EXCEPCIONES

¿Qué son las aplicaciones distribuidas? Aplicaciones distribuidas es un conjunto de

aplicaciones que interactúan entre sí para conseguir satisfacer las necesidades de
negocio de una misma empresa, por ejemplo. Para tomar un ejemplo de la vida real y
sea más fácil de entender este concepto, vamos a hablar de Facebook.

[01:56] Facebook es un ejemplo ideal de aplicación distribuida. ¿Por qué? Porque toda
la funcionalidad que tiene Facebook no está en un solo proyecto. Está en varios
proyectos y estos proyectos a la vez se comunican entre sí para conseguir satisfacer
todas las reglas de negocio que tiene Facebook. Por ejemplo, manejar listas de amigos,
manejar grupos, modificaciones de contactos, ubicación en tiempo real, subir tus fotos,
todo eso no está en un solo sistema, está en varios sistemas.

[02:34] Está distribuido en varios sistemas y estos sistemas interactúan entre sí para
conseguir satisfacer todas esas necesidades de negocio. Entonces, este es el concepto
macro, en grande. Vamos ahora a un punto un poco más pequeño. Sabemos pues que
las aplicaciones tienen lo que es también la base de datos.

[03:00] ¿Qué es la base de datos? Es el repositorio en el cual pues todas las

transacciones que va haciendo la aplicación van a ser pues persistidas, guardadas y van
a quedar pues para que en el futuro pueda ser accesible y podamos obtener esos datos.

[03:21] Por ejemplo si yo necesito tener un histórico de saques de un usuario en mi Byte

Bank, lo necesitaría, pues una base de datos para guardar todo ese histórico de cuántas
veces él llamó al método saca, cuánto monto sacó, cuánto monto depositó, todo eso va
en la base de datos. Pero no vamos a profundizar tanto ahí porque eso ya va a ser parte
de un módulo futuro de su curso de formación en Java.

[03:47] Solo que es necesario hablar de esto para dar un mejor entendimiento a la
siguiente idea que les quiero explicar. Lo que yo voy a hacer aquí es crear una clase, y
esa clase se va a llamar conexión. Así. ¿Y cuál es la idea de crear esta clase conexión? Yo
aquí voy a simular una conexión con una base de datos, entonces para eso ya tengo un
código preparado. Lo que voy a hacer es copiarlo.

[04:25] Ese código, ustedes lo van a encontrar aquí abajo, también, detallado para que
también puedan copiarlo. ¿Y qué está haciendo este código? Vamos a ver aquí. Antes
que nada, él está creando, pues un constructor, él define un constructor y adentro del
constructor, ¿qué dice? Abriendo conexión. Entonces, con esto yo, ¿qué quiero dar a
entender?
[04:53] Con esta clase, yo le estoy diciendo que estoy abriendo en la conexión hacia una
base de datos, por ejemplo. Aquí tengo un método void, leerDatos, con el cual yo voy a
obtener los datos de la base de datos y pues bueno, esto es solo digamos para darle
contexto, no voy a implementar este método para obtener los datos, hacer una
conexión real, pero es para tener la idea de cómo debería funcionar.

[05:19] Finalmente tengo el método cerrar, en el cual yo estoy diciendo simplemente

aquí estoy cerrando la conexión. Perfecto, entonces, nuevamente recapitulando, aquí
abro la conexión, cuando yo la creo abro una conexión, recibo los datos, cierro la
conexión. Esa es la la idea central de esta clase. Y ahora vemos que aquí hay una
excepción comentada.

[05:52] Vamos a ver porque en un momento. Yo aquí voy a crear nuevamente un test. Y
se va a llamar, ¿adivinen cómo? TestConexion. Le damos finish y aquí lo que yo voy a
hacer es crear una nueva conexión. Conexión con = new Conexion. Perfecto. Entonces
guardamos aquí. Y yo me olvidé aquí algo muy importante.

[06:27] Si ustedes han estado atentos a todas las clases desde la primera, se van a dar
cuenta. Yo estoy seguro que llegaron a ese mismo punto. Ahora sí. Me había olvidado
de declarar el método main. Entoncesno iba a poder conseguir crear esa conexión.
Ahora que he declarado mi conexión, si yo llamo aquí a conexión.leerDatos, él va a leer
los datos. Si llamo aquí a con.cerrar, va a cerrar la conexión. ¿Están seguros? Vamos a
probar.

[07:04] Y en efecto él abre la conexión, recibe los datos, cierra la conexión. Ahora, ¿qué
pasaría si yo descomento aquí esta línea de aquí? Throw new IllegalStateException. Este
tipo de excepción es muy común cuando yo tengo algún tipo de error a nivel ya de
comunicación, de conexión con otros servicios, ya sea banco de datos o sea, pues un
servicio distribuido, otro servicio u otra aplicación puede ser.

[07:40] Entonces IllegalStateException es cuando simplemente la conexión no fue

exitosa y dio algún tipo de error. Y yo aquí cuando estoy leyendo los datos, estoy
lanzando IllegalStateException, perfecto. Entonces voy a guardar aquí y voy a repetir el
test aquí y cuando él recibe los datos, vemos aquí claramente que él dio un
IllegalStateException. Perfecto.

[08:11] Entonces, nosotros ya sabemos cómo tratar con excepciones. ¿Qué es lo que
voy a hacer yo? Usar un try/catch. ¿Entonces qué voy a hacer aquí? Voy a llamar a try y
le voy a decir esto: "Dentro del try, vas a leer los datos y vas a cerrar la conexión." Ahora
catch: ¿Qué excepción vas a atrapar? Vas a atrapar esta excepción de aquí:
IllegalStateException". Perfecto.

[08:46] Y me vas a imprimir el StackTrace de esa excepción, printStackTrace. Entonces, si

ejecutamos nuevamente, vamos a guardar, si ejecutamos nuevamente vemos que
bueno, él recibió los datos y lanzó un IllegalStateException y imprimió el StackTrace.
Para asegurarnos que entró en el catch, vamos a imprimir aquí "Recibiendo exception".
Perfecto.

[09:19] Volvemos a probar y, en efecto, conexión llegó aquí, leyó los datos, explotó la
bomba, cayó en el catch, catch recibió la excepción y nos pintó la traza del error, el
StackTrace. Y hasta ahora está según todo lo que hemos venido aprendiendo hasta
ahora, hemos hecho un buen tratamiento de la excepción, pero ahora llega una cosa
muy importante.

[09:52] Nosotros hemos abierto una conexión aquí, hemos recibido los datos y hemos
recibido la excepción. ¿Qué pasó con la conexión? Quedó abierta. Y cuando ya
trabajamos con aplicaciones reales, sean con bases de datos u otras aplicaciones, la
conexión siempre tiene que cerrarse, no podemos dejar múltiples conexiones abiertas
porque después eso va a generar otro tipo de errores que ya vamos a ver en otros
cursos.

[10:33] Pero la idea que quiero transmitir ahora es que toda conexión que abrimos,
tenemos que cerrarla siempre, siempre deberíamos llamar el método cerrar, para
asegurarnos que estamos cerrando la conexión.
[10:46] Y en efecto yo estoy llamando aquí el método cerrar, pero si vamos a la pila de
ejecución, a cómo esto está desencadenándose, como yo estoy lanzando el error aquí a
este nivel, él va a llegar al catch y este código jamás va a ser ejecutado. ¿Qué podría
hacer yo para cerrar la conexión?

[11:17] Bueno, la primera solución que se me puede ocurrir es de repente cerrar la

conexión aquí abajo en el catch. Puedo hacer esto, puedo cortar aquí y después de
imprimir el StackTrace, cierro la conexión, perfecto. Pruebo nuevamente y muy bien.
¿Qué hice aquí? Abrí la conexión, recibí misión datos, recibí MiException y cerré la
conexión. ¿Qué pasaría si nuevamente yo comento esta línea?

[11:54] La conexión fue exitosa, recibí los datos exitosamente. Voy a abrir aquí y abre
conexión, recibe datos y no cierra la conexión. Aquí ya la cosa comienza pues a ponerse
un poco más complicada. ¿Por qué? Porque entonces yo necesitaría cerrar aquí y
cerrarlo aquí, asegurarme ya, si eres exitoso, cierro la conexión aquí. Si la llamada no es
exitosa, entonces también cierro en el catch.

[12:29] ¿Puede resolver? Vamos a probarlo. Resuelve. Cerró aquí, vamos con el caso
contrario, supongamos que hubo el error, probamos aquí, cerró la conexión aquí.
¿Solucionamos el problema? Sí, solucionamos el problema. Pero nuevamente quiero
que se fijen aquí en estas dos líneas, aquí y aquí. Estamos repitiendo el mismo código en
ambos lugares.

[13:00] Si yo dejara de escribir ese código en este lado o en este lado de aquí, mi
aplicación estaría simplemente insegura, ya no conseguiría tener este control de
errores. Entonces hay una dependencia muy fuerte aquí. En pocas palabras, yo siempre
necesito llamar al método cerrar.

CLASE 306 JAVA EXCEPCIONES

Existe un tercer elemento en la estructura de try/catch, una palabra reservada y se

llama finally. También tiene su propio alcance su propio scope.
[00:35] ¿Y final y básicamente, qué es lo que va a decir? De una u otra forma vas a
cerrar la conexión. Entonces, si yo borro aquí y borro aquí, fíjense que yo no estoy ya
cerrando conexión en ningún lado, excepto en finally. ¿Por qué? Porque finally sí o sí.
allá éxito o haya error, él va a ejecutar ese método. Vamos a guardarlo aquí.

[01:05] Vamos a ponerle para eso un Sysout, y vamos a darle aquí "Ejecutando finally".
Perfecto. Entonces aquí vamos a probar cuándo estamos lanzando el error. Le damos
play y perfecto, abrió conexión, recibió los datos, dio excepción, ejecutó finally y cierra
la conexión. Vamos aquí a nuestra clase conexión, volvemos a comentar para probar el
otro escenario, ejecutamos nuevamente, abriendo datos, recibiendo, ejecutando finally,
cerrando conexión.

[01:47] ¿Entonces con esto qué aseguramos? Todos los casos con finally vamos a cerrar
siempre la conexión. Esa es la tercera estructura del try/catch. ¿Entonces qué hemos
aprendido hasta este momento?

[02:04] Try/catch es una estructura muy, muy poderosa para manejar errores y también
vamos a asegurarnos de que en casos como este que necesitemos cerrar la conexión,
entonces con finally tenemos el soporte necesario para que, ya sea que encontremos un
error o que no encontremos ningún error, finally va a ejecutarse.

[02:30] Ahora, otra cosa que me gustaría que se lleven también de estos videos, no
solamente es bueno hacer pruebas con el camino feliz, si es que no hay errores.
Recuerden siempre probar el camino lanzando la excepción y también el camino sin
lanzar la excepción. Puede ser un trabajo un poco manual pero nos aseguramos de que
nuestro código está protegido ante los dos casos que hemos mapeado hasta el
momento.

[02:59] Entonces esa práctica es muy buena para que puedan escribir código escalable y
seguro, código fuerte que no va a tener errores no mapeados o por lo menos va a
considerar la mayoría de casos para mapear esos errores y tratarlos ya sea en una
estructura try/catch o de alguna otra forma que ya ustedes pueden idear ahí.

CLASE 307 JAVA EXCEPCIONES

Ya sabemos aquí que yo puedo abrir una conexión con try/catch y finally, yo puedo
asegurarme pues que ejecute algún método, si ese método da algún error, catch lo va a
atrapar, y finally pues va a ejecutar alguna otra cosa que yo quiera que ejecute, haya o
no haya error. Finally es opcional. No es obligatorio tener la estructura de try/catch
finally, pero sí es obligatorio un try/catch.

[00:38] Ahora, yo voy a hacer una pequeña modificación aquí para explicarles el
siguiente concepto. Pues yo voy a instalar una conexión como nula y yo voy a crear aquí
esta conexión. Con = new Conexión. Perfecto. Voy a arreglar el código aquí, listo,
entonces la conexión aquí está nula. Yo voy a crear aquí la conexión.

[01:09] Y aquí yo voy a leer los datos, perfecto. Y aquí yo también podría hacer otra
cosa. Yo puedo tener también un try solo con finally. También es permitido. Pregunta de
examen de certificación. ¿Un try puede vivir solo? No, un try no puede vivir solo. ¿Un try
puede vivir con un finally? Sí, compila. ¿Con catch? Con catch también, cuántos quieras.

[01:42] ¿Dos finales por ejemplo o algo así? No compila, solo hay un solo finally. ¿Finally
y catch aquí abajo? No compila. Primero, debería ser el catch, entonces esa es la la
primera cosa. Esa es la estructura más o menos, más o menos que tiene este bloque
try/catch. Primero es try/catch, opcionalmente finally o try/finally. Vamos a volver aquí
al tema. Si yo aquí lanzo la excepción.

[02:25] Vamos a ejecutar aquí, guardamos. Vemos pues que abre la conexión, recibe los
datos y cierra la conexión. No está dando el excepcion. ¿Qué pasaría si yo hago esto de
aquí? Él cerró la conexión, pero dio un exception aquí. Curioso. En el finally él dio una
excepción. ¿Y cuál es? IllegalStateException en conexión en este método. De todas
formas, él pues reventó la bomba, y cerró la conexión.

[03:05] Llamó a su método cerrar y cerró la conexión, pero ¿qué sucedería si yo lanzo
esta excepción aquí en el constructor? ¿Es válido? Sí. Es totalmente válido, estoy
lanzando la excepción al momento de construir el objeto. Por lo tanto, ¿este objeto será
creado o no será creado? Vamos a averiguarlo.
[03:37] Nuevamente, él había abierto conexión, recibió datos, ejecutó finally, cerró la
conexión y de todas formas pues explotó la bomba. ¿Por qué? Por el finally. Como no
teníamos un catch para atrapar y desactivar la bomba, solo tenemos un finally, entonces
de todas formas explotó pero finally se ejecutó, cerró la conexión. Si yo vuelvo a lanzar
este código vamos a encontrar otro error.

[04:04] ¿Y cuál es? Abre la conexión, perfecto y ejecuta finally directamente. ¿Por qué?
Porque él dio un NullPointerException y vemos que la conexión nunca cerró. ¿Por qué
nunca cerró? Porque ni siquiera se ha creado. Recordemos que la conexión aquí está
null.

[04:24] Como la conexión aquí es nula y yo la estoy creando aquí, yo necesitaría que la
conexión ya esté instanciada, ya esté creada, para llamar al método cerrar, si no este
método de aquí va a llamar a un NullPointerException. Hasta ahí estamos todos en la
misma página. ¿Entonces yo cómo conseguiría aquí tratar este problema, por ejemplo?
Yo voy a regresar aquí el catch, primero, para atrapar la excepción que estoy lanzando
aquí.

[05:16] Entonces yo ya me voy a asegurar de que voy a atrapar IllegalStateException

cuando él esté creando la conexión. Perfecto. Entonces nuevamente ejecutó y él ejecutó
el finally, perfecto. Agarró IllegalStateException, imprimió, pero también el
NullPointerException y nuevamente no está cerrando la conexión. ¿Por qué? Porque es
nula. Recordemos que ahora la la bomba está explotando en el momento de la creación
del objeto.

[05:48] ¿Cómo puedo yo asegurarme de cerrar la conexión? Se me ocurre algo como

esto. Si conexión es diferente de null, entonces llama a cerrar. ¿Qué les parece?
Entonces, con esto, ya me aseguro de que no voy a tener un NullPointerException o por
lo menos esa debería ser la idea. Excelente. Abrí la conexión, explotó la bomba, la
atrapó el catch, imprimo el StackTrace y como la conexión es nula, entonces él no llama
al método cerrar.

[06:33] Podría ser que aquí yo le ponga un else con igual new Conexión y aquí hacer un
con.cerrar. Podría ser, pero aquí yo estoy ya abriendo una nueva conexión y estoy
cerrando una nueva conexión que no tiene nada que ver con esto. Entonces esta opción
no es válida por ahora. Y si aquí yo, nuevamente, vamos a testear, vamos a probar ahora
el otro caso, nuestro caso de éxito. Cierro aquí. Guardo aquí.

[07:12] Ejecuto. Perfecto. Perfecto. ¿Por qué? Porque creé la conexión, no hubo error,
leí los datos, no hubo error. No hay catch, no se acciona el catch porque no hay error. Y
finalmente, la conexión es nula. No, no es nula. Entonces, ahora sí puedes cerrar la
conexión. Pero nuevamente aquí ya vemos aquí una validación dentro del finally.

[07:38] El código ya está comenzando a entreverarse un poco. Estructuras como esta,

donde creamos el objeto con null aquí encima son muy comunes. ¿Por qué?

[07:50] Porque en el código, generalmente cuando cuando va evolucionando y lo toca

un programador, otro programador y otro más, cada uno va adicionando su lógica y
generalmente vamos a encontrarnos con situaciones en las que el try inicializa un nuevo
objeto, ya sea porque en la inicialización puede haber un tipo de exception que pueda
ser lanzado, como fue este caso que hemos provocado aquí.

CLASE 308 JAVA EXCEPCIONES

Primero, tenemos una conexión que la inicializamos como nula. ¿Por qué? Porque como
estamos lanzando la la excepción en el constructor, queremos atrapar esa excepción en
el catch.

[00:36] ¿Entonces, qué tenemos que hacer para eso? Crear el objeto adentro del try. Si
lo creamos afuera, entonces el catch no va a atrapar a esa excepción cuando suceda. Y
después de eso, leemos los datos de la conexión, perfecto, hasta ahí. Y si hay algún
error, el catch lo va a atrapar. Y finalmente, yo quiero cerrar la conexión. ¿Pero qué
problema tenía yo aquí?

[01:03] Si yo quería cerrar la conexión y había ocurrido algún error, la conexión estaba
nula, por lo tanto me iba a dar otro exception aquí del tipo NullPointer. Para asegurarme
de no tener un NullPointer en el finally, yo hago una validación que si la conexión es
diferente de null, entonces en efecto yo voy a cerrar esa conexión.
[01:24] Si no, entonces no voy a hacer nada. ¿Ahora el código funciona? Sí, el código
funciona. ¿El código resuelve el problema? Sí, el código resuelve el problema. Pero el
código puede mejorar, y eso es lo que les voy a enseñar aquí, entonces para esto lo que
yo voy a hacer es comentar este bloque de código.

[01:46] Voy a usar el tipo de comentario en bloque, que es con slash, un asterisco, y un
asterisco y un slash yo delimito el total del bloque que yo quiero comentar, entonces
estoy comentando toda esta línea de código. ¿Y qué es lo que voy a hacer ahora? Le voy
a presentar a otro nuevo tipo de try. Este es un tipo de try. El try/catch finally.

[02:15] Pero existe otro tipo de try que es algo así: try, abre paréntesis, ya no abre llaves
directamente, este abre paréntesis, entonces alguna cosa debe ir adentro de ese
paréntesis. Y ahora abre llaves, vamos a dejarlo hasta ahí. Y dentro de los paréntesis
normalmente en un método ¿qué ponemos adentro de un paréntesis? Un objeto cierto,
que en este caso lo vamos a llamar de recurso.

[02:50] Entonces vamos a ponerle conexión con igual new Conexion. Perfecto. Dénse
cuenta lo que yo acabo de hacer, yo he declarado la creación de un objeto del tipo
conexión dentro del try. ¿Es válido? Sí, es válido. Pero no está compilando. ¿Y por qué
no está compilando? Vamos a ver qué me dice el mensaje.

[03:20] El recurso del tipo conexión, dénse cuenta de ese nuevo nombre que le ha dado,
él no me está diciendo el objeto del tipo conexión. Él me dice el recurso. El recurso del
tipo conexión no implementa la interfaz AutoCloseable. ¿Qué es la interfaz
AutoCloseable? Tranquilos, vamos a descubrirlo dentro de poco.

[03:41] Vamos aquí a la clase conexión. Y como él no implementa la interfaz

AutoCloseable y prácticamente me dice que el error es que no la está implementando
¿cómo lo puedo solucionar? Implementando AutoCloseable. Entonces voy a decirle
implementes, recuerden su curso de herencia y polimorfismo. AutoCloseable, "Ctrl +
espacio", AutoCloseable.
[04:09] Y ahora conexión ya no está compilando. ¿Por qué? Porque necesito
implementar los métodos de esta interfaz y esta interfaz tiene un solo método que se
llama close, AutoCloseable, método close. Entonces, en el método close, antes de
implementar este método, vamos aquí. Él, en este punto me dice que ahora yo no estoy
atrapando la excepción, que puede ser lanzada por AutoClose.

[04:51] Si le doy un throws, entonces, simplemente perfecto, él puede lanzar cualquier

excepción en caso el método close lance algún tipo de error cuando está cerrando el
recurso, ya sea del tipo NullPointer o alguna cosa así. Para mantener esto simple, por el
momento, yo voy a llamar en el método close a mi método cerrar. Perfecto. Entonces,
tiene total el sentido.

[05:17] El método close va a llamar al método cerrar conexión. Y ahora mi código, pues
compila correctamente, vemos aquí. ¿Y qué voy a hacer ahora si yo ya hice mi new
Conexion? Yo ya estoy abriendo aquí mi conexión. Voy a intentar leer los datos, vamos a
ver qué es lo que sucede. Voy a guardar aquí y voy a comentar aquí para probar primero
en nuestro caso feliz, happy.

[05:58] Voy a ejecutar este código, vemos que él compila correctamente y quiero ver
qué pasa. Y miren aquí, cosa curiosa. Abrió la conexión, perfecto, porque él está
creando aquí un objeto Conexion new Conexion, recibe los datos, porque porque yo
estoy leyendo los datos. ¿Y qué hace él aquí? Cerrando conexión. Esto es lo interesante
de esta estructura de try, que se llama try with resource.

[06:27] Try con recursos, es por eso que él ya no lleva el nombre de objeto, sino de
recurso. Es un try con recursos. ¿Por qué? Porque en esta estructura try lo que hace es
abrir un objeto, inicializa un objeto, instancia un objeto, pero este objeto tiene que
implementar la interfaz AutoCloseable, porque esa interfaz te obliga a implementar un
método close. ¿Por qué?

[06:59] Porque con ese método close al finalizar, al finalizar esta ejecución, entonces
automáticamente, ¿qué va a hacer? Como está llamando a una clase que implementa
de AutoCloseable, va allamar al método close y va a cerrar la conexión. Ahora, ese es el
primer test. Vamos a ejecutar nuestro segundo test.

[07:25] Supongamos pues que, en efecto, él dio un error aquí al momento de la

creación, si yo ejecuto aquí nuevamente vamos a ver, pues que él no cierra la conexión
porque simplemente pues dio una excepción. ¿Cómo yo me aseguro de tratar esa
excepción? Con catch. Y eso ya lo conocemos. Entonces el try with resources, el try con
recursos también me permite usar un catch para atrapar el error.

[07:56] Y yo voy a poner aquí lo mismo. Y voy a decirle aquí "Ejecutando catch".
Perfecto. Voy a probar nuevamente y vemos pues que él abrió la conexión y ejecutó el
catch, y no llamó pues a al método close, porque nunca se completó este ciclo. Ahora
voy a sacarlo de aquí y nuevamente voy a dejarlo en el método leerDatos, voy a guardar
aquí. ¿Y ustedes qué creen que es lo que va a pasar? Vamos a ver aquí.

[08:41] Miren qué fue lo que pasó aquí. Él abrió la conexión, recibió los datos, cerró la
conexión y ejecutó el catch, en este caso primero fue lanzado, pues el StackTrace
porque el error ocurrió primero. En este caso ocurrió después, se van imprimiendo en la
consola, de acuerdo a cómo van llegando. La pila de ejecución existe, pero para que los
eventos sean registrados en la consola tienen que ser enviados.

[09:17] Entonces como es un procesador, y obviamente pues los eventos no son

síncronos uno detrás de otro, en este caso en el caso anterior, primero imprimió el
error, pero el el orden correcto es este que acaba de imprimir ahora. Simplemente él
abrió la conexión, recibió los datos, cerró la conexión. ¿Por qué? Porque es un
AutoCloseable y ejecutó el catch, y en el catch me imprimió el StackTrace.

[09:45] Pero miren, hace exactamente lo mismo que todo este bloque de código de
try/catch finally. Yo lo he resumido en tan solo seis líneas. Miren la diferencia. Es así
cómo, para este tipo de casos, en el caso de la conexión, tiene total sentido usar esta
estructura try with resource. Este tipo de try de aquí también viene mucho en examen
de certificación. Entonces, para los que ya están pensando, pues en tomar un examen es
totalmente válido, estudiar esta parte de aquí.
[10:29] ¿Y en qué casos me conviene usar este tipo de try con finally y en qué casos me
conviene usar este de aquí? Quién va a decidir eso es esta interfaz de aquí. Si tú
necesitas que este objeto haga algo al momento de dejar de existir, en este caso,
cuando se ha cerrado, cuando se ha cerrado me refiero cuando ya no voy a utilizarlo
más, que ya se convierte en un recurso, un recurso es algo que yo agarro, utilizo y
después desecho.

[11:05] Si fuera un recurso, yo necesito cerrarlo, después puedo implementar la interfaz,

AutoCloseable y automáticamente él va a cerrar ese recurso y va a ejecutar todo
normalmente, pero si mi objeto no implementa AutoCloseable, yo tengo esta otra
estructura de aquí para manejar mis errores incluso en distribuciones de Java antes de
Java 1.7, si no me equivoco, esto de aquí no existía y la única estructura para
tratamiento de errores válida era esta de aquí.

[11:42] O sea, este sería mi código optimizado al máximo que yo hubiera podido escribir
si estuviéramos usando Java hasta la versión 1.6. Pero a partir de 1.7 llega esta
estructura try with resource, que simplifica mucho, mucho el tratamiento de errores y
ejecuciones de finally cuando mi recurso implementa AutoCloseable y yo necesitaría
cerrar alguna conexión o cerrar algún lector de datos, alguna cosa de ese tipo.

[12:14] Entonces, nuevamente, practiquen mucho esta estructura de try, el try with
resource, para mí fue un poco más complicado entender esta sintaxis del try que esta de
aquí, pero una vez que agarran la práctica de cómo funciona la declaración de un
recurso adentro del try y saber que el método close va a ser llamado de cualquier forma,
después se les va a hacer bien fácil.

[12:44] Y recuerden, aquí no llamamos de objetos, llamamos de recursos. ¿Por qué?

Porque el recurso es algo que al final yo voy a tener que cerrar, sea una conexión, un
lector de datos, alguna cosa así, yo tengo que cerrarlo. Ahí, try with resource es lo que
nos va a salvar el día, si no fuera así, si tuviera un objeto normal, una estructura de try
tradicional, nos va a servir muy bien.
[13:09] Recordando aquí nuevamente, voy a descomentar aquí. Recordando aquí. ¿Try
puede vivir solo? No. Try no puede vivir solo, no va a compilar. Try necesita de un catch
o de un finally y puede tener ambos. El finally es opcional. Si nosotros queremos
ejecutar un código, haya o no haya error. Y no puede ir el finally antes del catch.
Obviamente. Bueno.

IllegalArgumentException e IllegalStateException son dos excepciones importantes que

el desarrollador de Java debería utilizar. En general, cuando tenga sentido, utilice una
excepción estándar en lugar de crear la suya propia.

CLASE 309 JAVA LANG

Entonces, ¿se imaginan tener aquí 500 clases, 500 archivos? Es muy complicado después
organizar toda esa información, si tienes que hacer un mantenimiento, una cosa así, es
muy complicado identificar dónde es que tienes que trabajar. Vamos a notar algo muy
curioso aquí.

[03:15] Tenemos aquí, por ejemplo, nuestra clase administrador, interfaz autenticable,
una clase autentificación útil. Vamos bajando, tengo funcionarios, gerentes, todo, y aquí
comenzamos a tener TestControlBonificación, TestCuenta, TestCuentaException saldo.
Entonces vemos que si bien todas son clases Java, son archivos digamos de diferente
jerarquía. ¿Por qué?

[03:45] Porque tenemos por un lado, digamos las clases de modelo, los actores de
negocio que son el administrador, el cliente, el contador, la cuenta, el funcionario.
Tenemos una clase útil que puede ser, digamos, se interpreta como una clase de
servicio, esto lo van a ver más adelante, y después tenemos los tests. Entonces
necesitamos organizar nuestro código.

[04:11] Y en Java, ¿cómo organizamos el código? Con los llamados paquetes. Si ustedes
ven aquí este icono de aquí, es el icono que Java usa para identificar lo que son
paquetes. Entonces, vamos a venir aquí a nuestra vista navigator, que es una vista muy,
muy parecida al explorador de Windows que tenemos normalmente.

[04:37] Y ya hemos dicho en los cursos anteriores que aquí lo que tenemos es una
estructura de archivos: los .class, el proyecto como tal, los archivos .java, pero desde
una vista de de explorador, básicamente, donde tenemos la estructura de carpetas y
archivos. Entonces, vamos a cerrar lo que es los compilados, que estos .class, recuerden
eso, no vamos a trabajar con los puntos clase ahora y vamos a maximizar esto un poco.
¿Qué es lo que vamos a hacer aquí?

[05:10] Lo primero que queremos hacer es organizar nuestras clases, digamos de

negocio en una carpeta, en un lugar y nuestras clases de test en otro lugar. Para eso
vamos a venir aquí a bytebank, que digamos, es nuestra carpeta base. Le vamos a dar un
clic derecho, new, y no quiero un proyecto, no quiero un ejemplo, quiero otra cosa.

[05:36] Y aquí en general, algo así que creó un folder. Le doy a next y a este folder, yo le
voy a poner modelo. ¿Por qué modelo? Normalmente nos referimos por modelo a las
clases que representan cada entidad de nuestro negocio. Un cliente, un contador, un
funcionario son entidades que representan cómo sería sistemáticamente esa parte del
negocio. Entonces le vamos a llamar modelo, le vamos a dar finish y perfecto, creó la
clase modelo aquí.

[06:11] Entonces, ¿qué es lo primero que voy a hacer? En modelo voy a copiar todas las
clases que no sean test. En este caso, ¿cuáles son? Administrador, autenticable, todas,
hasta sistema interno. Si se dan cuenta, lo único que he hecho hasta ahora es crear
solamente una carpeta más, carpeta, folder, es lo mismo.

[06:35] Y lo estoy pasando todo aquí a modelo. Y fíjate cómo cambió aquí la estructura.
La estructura ahora tiene una carpeta dentro que se llama modelo, y ahora en el lado de
aquí, vemos que salieron muchos errores. Pero fíjense algo curioso que está aquí abajo,
aquí abajito. Ahora tenemos un bytebank.modelo.

[07:04] Tenemos un paquete bytebank y un paquete bytebank.modelo. ¿Y por qué se

forma esta estructura? Por lo que les comenté antes, en Java esta estructura, esta
jerarquía de carpetas, en otros lenguajes de programación siguen siendo carpetas,
folders, pero en Java nos referimos a esto como paquetes.

CLASE 310 JAVA LANG

Lo que vamos a hacer ahora es ver qué errores es lo que está saliendo aquí. Por
ejemplo, aquí administrador. Voy a ver aquí mi clase administrador.

[01:38] Y vemos que en la línea 1 ya me está dando un error, me lo está subrayando

color rojo. ¿Qué es lo que me dice este error? Este error me dice el paquete declarado
bytebank no coincide con el paquete esperado, bytebank.modelo. Entonces, ¿qué
significa esto?

[01:57] En Java la declaración del paquete va a ir a línea 1 y toda clase pertenece a un

paquete. Si recordamos el paquete, antes se llamaba solamente bytebank. Pero ahora
ya no se llama bytebank, ¿cómo se llama? Bytebank.modelo. Entonces, ¿a qué se debe
el error en esta clase administrador?

[02:19] Él me dice: "Yo no sé cuál es el paquete bytebank. Yo no conozco un paquete

bytebank, yo conozco un paquete bytebank.modelo, porque yo estoy dentro de este
paquete bytebank.modelo. Entonces, si yo escribo bytebank.modelo y si se dan cuenta
Eclipse ya me está sugiriendo aquí bytebank.modelo, le doy doble clic y
automáticamente desapareció el error.

[02:46] Y vemos que la clase ya no tiene más errores. Si yo guardo aquí, se fue el error y
ahora vamos a ver qué hay en autenticable, y el error es exactamente el mismo. ¿Por
qué todas estas clases tienen el mismo error? Porque necesitamos especificar el
paquete correcto en la línea 1 del archivo de cada clase, clase ya sea de test, sea de
servicio, cualquier clase.

[03:14] La línea 1 es la declaración del paquete, la ubicación de esta clase. Esa es

pregunta de examen de certificación. Y de igual forma, incluso si hoy solamente punto,
Eclipse me dice: ¿cuál de estos dos paquetes es el dueño de esta clase? ¿El paquete test
o el paquete modelo? Le voy a decir que el paquete modelo. Guardamos, "Ctrl + S" y
nuevamente solucionamos el error.
[03:41] Entonces vamos a pasárnosla por ahora solucionando estos errores. Perfecto.
Entonces, ahora ya vimos que para declarar una clase nueva necesitamos especificar su
paquete completo. Vamos a dejarlo por ahí por el momento y nos vamos a ir aquí a las
pruebas para ver cuál es el error aquí en los test, porque creo que hay otra cosa que no
estamos viendo aún, y es esto de acá. Vamos a ver aquí.

[04:23] Bueno, el error de la primera línea ya lo conocemos. Y en este caso ya no es

modelo, es test. Solucionado, pero aquí tenemos otro error con el gerente. La clase
gerente aquí aún tiene error. Voy a entrar aquí. Sí, la clase gerente aún tiene error, lo
voy a solucionar. Perfecto. La clase de gerente tiene errores, ya no tiene errores,
perfecto. Volvemos aquí a test de gerente y vemos que gerente sigue sin funcionar.

[04:57] Alguna cosa aquí está rara, si yo ya solucioné el error de la clase gerente y
gerente, existe en bytebank.modelo, ¿por qué el test del gerente no puede acceder al
gerente? Vamos a ver qué nos dice aquí Eclipse. Eclipse nos dice: "gerente no puede ser
resuelto como un tipo".

[05:16] ¿Qué opciones tenemos? Importar gerente, que está dentro de

bytebank.modelo, crear una clase gerente, crear un interfaz gerente. ¿Entonces, qué es
lo primero que tenemos que ver aquí?

[05:31] Todos los archivos a nivel de carpeta, vamos a volver aquí a nuestra vista de
navigator, todo archivo que esté dentro de esta carpeta de aquí, de test, y quiera
acceder a cualquier archivo que esté en esta carpeta de aquí, modelo, necesita conocer
el nombre específico del archivo al cual quiere acceder. ¿A qué me refiero con el
nombre específico del archivo?

[05:58] Si ahora el paquete se llama bytebank.modelo, en Java el nombre de estas clases

no es solamente el nombre como tal. El nombre de una clase en Java está compuesto
del paquete con el nombre de la clase. Es decir, en Java, para yo poder usar aquí el
gerente en este test voy a cerrar además los demás archivos. Yo tendría aquí que decirle
exactamente la ubicación de dónde está ese gerente que yo quiero traer.
[06:36] Sería como decir bytebank.modelo.Gerente y vemos que aquí ya compila. Y aquí
de igual manera, bytebank.modelo. Voy a copiar, voy a pegar aquí y vemos que él ya
compila. ¿Por qué? Porque él ya tiene la información de dónde buscar este gerente. ¿Y
por qué tiene que ser así en Java?

[07:10] Porque en Java, de repente yo tengo un gerente en algún paquete y en otro

paquete de otra librería tengo otro gerente, entonces digamos que es como una
estructura del tipo nombre y apellido. Lo primero que tenemos que ver aquí, voy a
poner comentario, es package, que es paquete en inglés, más el nombre de la clase:
package + classname.

[07:41] Esa es la forma en la que Java va a nombrar a nuevos archivos, por ejemplo
antes nuestra clase gerente ¿por qué era accesible? Por los tests, porque ellos estaban
en la misma carpeta, en el mismo paquete, por lo tanto eran completamente accesibles
unos con otros.

[08:00] Vemos que es el caso de aquí de repente del administrador, que extiende de
funcionario y que implementó autenticable. Como todos están dentro de la misma
carpeta, si se dan cuenta, funcionario aún con el error que no hemos corregido es
accesible desde administrador. ¿Por qué? Porque están en el mismo paquete.

[08:20] Vamos a ver cómo funciona esta estructura de visibilidad por paquetes un poco
más adelante, pero lo que me importa por el momento es que conozcan la estructura de
cómo Java le da el nombre a los objetos que tiene dentro de a los archivos. Entonces el
nombre correcto de este archivo es bytebank.modelo.Gerente.

[08:48] Ese sería el nombre real de este archivo, que extiende de

bytebank.modelo.Funcionario que a la vez extiende de bytebank.modelo.Autenticable.
¿Pero por qué aquí no necesito especificar todo ese nombre? Porque están dentro del
mismo paquete, digamos que es como que son familia, son conocidos.
[09:06] Entonces entre familias no nos llamamos de nombre y apellido. Pero cuando,
digamos, estamos en el instituto, en la escuela nos llaman de nombre y apellido. ¿Por
qué? Porque en mi caso Diego, pueden haber muchos Diegos en el salón. Para saber qué
Diego soy yo, necesitan identificarme por mi nombre y mi apellido.

CLASE 311 JAVA LANG

Pero pueden haber dos personas con el mismo nombre y apellido? Sí pueden haber, en
el mundo real pueden haber dos personas con el mismo nombre y apellido.

[01:21] Pero en el mundo de Java, en el mundo del sistema, eso no es permitido, incluso
eso no es permitido a nivel ya de sistema operativo. ¿Por qué? Vamos a ver un ejemplo
claro, tengo aquí el explorador en este caso de Mac, pero pueden abrir el explorador de
Windows y pueden hacer el siguiente ejercicio. Yo he creado aquí una carpeta en
blanco, que está completamente vacía y lo que voy a hacer aquí es crear una nueva
carpeta. ¿Y cómo le voy a poner? Alura. Perfecto.

[01:51] Y creé mi carpeta Alura. Ahora voy a hacerle clic derecho, nueva carpeta y lo voy
a llamar Alura también. Son dos carpetas con el mismo nombre dentro de la misma
carpeta, en la misma ubicación. Y si quiero crear, ¿qué me dice? El nombre Alura ya
existe, elige otro. Entonces, a nivel del sistema operativo como tal, yo no puedo tener ni
siquiera dos carpetas con el mismo nombre en la misma ubicación.

[02:19] Por lo tanto, yo no puedo tener dos archivos con este mismo nombre con esta
misma estructura. Entonces, ¿qué es lo que voy a hacer aquí? Vamos a trabajar ahora
con la vista de package explore. Voy a minimizar esto un poco y voy a dejar esto aquí. Si
yo aquí quiero, por ejemplo, crear una clase, otra clase, digamos cliente.

[02:50] ¿Qué sucede? Para comenzar, el botón finish está deshabilitado y aquí tengo un
error. El tipo bytebank.modelo.Cliente, ya existe, already exists, entonces yo estoy
prohibido de crear nuevamente ese tipo en la misma ubicación.

[03:08] Entonces, volviendo al primer caso que les planteé hace un momento, ¿qué
sucedería si yo tengo, si yo trabajo en una empresa, puede ser a nivel mundial y tengo
que integrar mis módulos y me voy a encontrar sí o sí con objetos con el mismo nombre,
clases con el mismo nombre, mismo nombre y el mismo apellido?

[03:33] En Java se dieron cuenta que podía haber este conflicto de nombres, y por lo
tanto se estableció una convención. ¿Qué es una convención? Es una es una regla,
digamos que no está escrita en piedra, es una regla que no está en ningún lugar, pero
que es aceptada por la comunidad de desarrolladores de Java.

[03:54] Esa es la convención, entonces, ¿cuál es la convención en este caso para

nombrar paquetes? ¿Y qué es lo que se hace para nombrar un paquete? Bueno, vamos a
darle new package. ¿Y cuál va a ser el nombre del paquete? Lo primero que se ve en el
nombre del paquete es el país. Y el país puede ser Perú, puede ser Argentina, pero es un
nombre largo. ¿Entonces qué es lo que se hace?

[04:27] Es la extensión del dominio del país. ¿A qué me refiero con eso? Si la página es
una página solamente de Argentina, la extensión del dominio va a ser .com.ar, si es de
Brasil, .com.br, si es de Mexico, .com.mx.

[04:42 Entonces, esa última extensión del dominio es lo que va a definir digamos, a qué
país pertenece esa página web. ¿Cierto? Vamos a aplicar eso mismo en Java. Por
ejemplo, si bytebank es de aquí de Brasil, ese paquete va a comenzar con br. Ese punto
es el separador que me va a decir: "Okay, tu paquete base es br, tu carpeta base es br
de Brasil".

[05:16] Esto ya me dice que no pueden haber entonces dos bytebank.modelo.Gerente

que vengan del mismo país, de Brasil. ¿Que más dice esta convención? Esta convención
también dice que después, dependiendo del tipo de empresa que tienes, si es compañía
u organización, tenemos un diminutivo para esto.

[05:37] Que es el mismo que se aplica en los dominios de las URL de internet, que puede
ser .com, .org, entonces en este caso Alura es una compañía, entonces com, .br.com de
compañía. Punto. ¿Y qué es lo que sigue ahí? El nombre de la empresa como tal, que en
este caso es bytebank, perfecto.

[06:02] Entonces, tenemos ya con br.com.bytebank. Pero esto si fuera solo el bytebank
de aquí de Brasil. Aquí puede ser ar.com, mx.com.bytebank, pe si fuera de Perú. Pero
como estamos viendo pues un curso abierto para toda Latinoamérica, todos los que
sean de habla hispana, entonces, solo por esto vamos a dejarlo directamente con com.

[06:34] Perfecto, pero recuerden que si están haciendo un proyecto para un país en
específico, entonces la extensión de dominio de ese país va en primer lugar para que
identifique a qué país hace referencia ese proyecto, esa compañía, esa organización.
Entonces ahora lo vamos a dejar con com.bytebank.

[06:56] Y después de bytebank, ya van a seguir, pues nuestras clases, modelo o servicio
o test o el paquete que necesitemos crear, entonces vamos a recrear aquí con modelo.
Es com.bytebank.modelo. Y le vamos a dar finish, le damos finish y aquí nos ha creado
una estructura com.bytebank.modelo.

[07:25] Vamos a la vista de navigator para que entiendan cómo él ha creado a nivel de
carpetas nuestros paquetes. Es una carpeta base com, una carpeta hija bytebank y otra
carpeta hija modelo. Esto es en la vista de explorador de Windows, explorador normal
de archivos.

[07:45] Y lo que voy a hacer ahora es copiar estos archivos aquí dentro,
com.bytebank.modelo. Le voy a poner okay, dice que encontró algunos problemas. Voy
a dar a que continúe y listo. Entonces aquí tenemos que ahora bytebank.modelo está
vacío, entonces el icono con el que Eclipse nos dice que un paquete está vacío, es un
icono de un paquete en blanco y lo podemos eliminar.

[08:16] Vamos a eliminar este paquete que no nos sirve, un poco más, entramos aquí y
vemos que automáticamente ya cuando yo copio mis archivos por medio del explorador
de proyectos, automáticamente Eclipse ya actualiza el nombre de mi paquete, muy
diferente de cuando lo hicimos manualmente aquí con la carpeta.

[08:42] Entonces, ahora tenemos el caso de los tests, de las pruebas. ¿Qué vamos a
hacer entonces? Vamos a darle otra vez SRC, nuevo, package, y lo vamos a llamar igual
com porque hacemos referencia a una compañía, bytebank, porque la compañía se
llama bytebank, y le vamos a llamar test.

[09:09] Mejor dicho, si estuviéramos trabajando solamente para o Brasil o Argentina o

Perú, iría primero br, o ar de Argentina, pe de Perú, porque el país, digamos, es como
que la base del nombre del paquete, pero no es el caso. Aquí lo vamos a dejar
solamente con com.bytebank.test.

[09:29] Le damos a finish, él creó un paquete nuevo en blanco y de la misma forma yo

voy a copiar todos estos test aquí dentro, com.bytebank.test. Y aquí una cosa curiosa,
que no les comenté anteriormente, para que Eclipse automáticamente actualice la
declaración del paquete en el archivo, le vamos a dar check a este primero que es
Update reference to 7 moved elements. ¿Qué significa? Actualízame el nombre del
paquete de estos elementos.

[10:02] Le damos a okay, lo del otro no necesitamos marcar, lo vamos a ser un poco más
adelante. Le damos a okay y veremos cómo automáticamente él ya actualizó el nombre
correcto. Y ahora seguimos teniendo este problema de aquí, que es que no está
encontrando a dónde pertenece a este funcionario. ¿Qué tenemos que hacer aquí
entonces?

[10:28] Como ya les expliqué anteriormente, sería com.bytebank.modelo.Funcionario y

él ya encontró dónde está funcionario. Y él dice: "está aquí, funcionario está en
com.bytebank.modelo.Funcionario, él pertenece aquí". De la misma forma, yo voy a
copiar esto, lo voy a pegar aquí y él compila. ¿Por qué? Porque contador también está
en el mismo paquete.
[10:58] De la misma forma, aquí, con gerente nuevamente aquí gerente y aquí también
y vamos viendo. ¿Será que de verdad necesito tener todo este nombre para una clase?
¿Y qué pasaría si yo hago algo así como otro paquete, un paquete aquí dentro?
Modelo.cliente, por ejemplo. Le doy a finish y voy a copiar mi cliente aquí dentro.

[11:39] Y aquí me dice que una clase va a tener problemas. Le doy okay. Y si yo quiero
traer aquí al cliente, tendría que escribir com.bytebank.modelo.cliente.Cliente. Si es que
yo quisiera usar esta clase cliente que acabo de mover a este paquete interno también.

el FQN (Full Qualified Name) es el nombre completo de la clase, que consta del nombre
del paquete y el nombre de la clase.

FQN = Nombre del paquete. Nombre de clase simple. La regla para escribir paquetes es:
nombre de la pagina al reves.nombre del proyecto

CLASE 312 JAVA LANG

A nivel de paquetes está organizado de esta forma, con los puntos, que esa es la forma
en la que Java estructura los paquetes: país, punto, tipo de organización, punto, nombre
de la empresa, punto y el nombre del paquete con el nombre de la clase. Es de esa
forma que Java los organiza.

[01:43] Y volviendo al problema, ¿será que entonces necesito especificar todo este
nombre largo cada vez que yo estoy llamando a cliente? No, ¿por qué? porque Java se
dio cuenta de esto y nos ofreció una forma rápida de poder usar el cliente. ¿Y qué forma
es esa? Eso se llama importación. ¿Qué es una importación? Tenemos otra palabra
reservada aquí, que es import.

[02:13] Vemos que él nos la subraya en morado, porque es una palabra reservada del
lenguaje e import nos permite traer clases de otros paquetes directamente a nuestro
archivo actual, que en este caso si yo quiero traer una clase de otro paquete, estaría
trayendo com.bytebank.modelo. Y voy a traer. Perdón. Cliente.

[02:51] No, voy a traer funcionario mejor. Y voy a traer aquí al funcionario. Perfecto.
Entonces aquí yo ya no necesito declarar toda esta parte de aquí. ¿Por qué? Porque Java
ya sabe dónde está viniendo el funcionario. Mi archivo ya sabe, funcionario está
viniendo de esta ubicación, si yo busco aquí, entonces voy a encontrar al funcionario.

[03:18] De igual forma con el contador. ¿Por qué? Vemos que nuevamente no compila.
Y si yo le digo import com.bytebank.modelo.Contador; él compila. ¿Por qué? Porque él
ya sabe en donde está contador. Yo ya declaré el nombre y apellido de contador arriba
de mi clase y entonces mi método main ya sabe dónde encontrar esos objetos.

[03:53] Esta parte de los imports siempre va inmediatamente después del package. ¿Por
qué? Porque yo no puedo usar una clase aquí, si es que antes no la he importado, es
imposible. Si yo corto esto, digamos, y lo copio aquí abajo, vamos a ver que nada de
aquí va a compilar, porque yo no estoy respetando el orden que Java me ha definido
para lo que es package importa la clase como tal. Esa es pregunta de examen de
certificación también.

[04:21] Entonces venimos aquí, nuevamente, no pasó nada. Y tenemos ya funcionario,

contador. ¿Qué más usamos aquí? ControlBonificación. Vamos a ver aquí entonces otra
vez. Import com.bytebank.modelo. "Ctrl + espacio", bonificación, listo, me ayudó ahí, el
autocompletar de Eclipse. Y ahora la clase ya compila.

[04:52] Pero similar a lo que les he dicho anteriormente, cada vez que necesitamos
repetir alguna parte del código es que ese código puede ser mejorado. Y es este caso
también, porque nuevamente estamos repitiendo bytebank.modelo, modelo y modelo.
Perfecto. ¿Será que puede importar todo esto de una sola? De repente, yo puedo hacer
algo así como import com.bytebank.modelo.

[05:28] Y voy a borrar todo esto. Para importar, digamos, la carpeta entera, el paquete
entero. No se puede. ¿Por qué? Porque yo no puedo importar directamente el paquete,
lo que yo importo son los elementos dentro del paquete. Y para eso Java me ofrece lo
que es un white card, un comodín, que es el asterisco. ¿Y el asterisco qué me indica?
Importa todo lo que esté adentro de com.bytebank.modelo. Todo.
[05:58] Entonces, como yo estoy importando absolutamente todo este paquete, yo
tengo acceso no solamente a gerente, contador y control bonificación, yo tengo acceso
a CuentaAhorros, si se dan cuenta, cuenta, cuentaAhorros, cuentaCorriente. Tengo
acceso a funcionario y a todas las clases que están aquí adentro.

[06:22] Entonces tenemos que ahora diferenciar cuándo necesito el comodín, el

asterisco, y cuándo necesito especificar el nombre exacto de la clase. Normalmente por
buena práctica, si yo solamente voy a trabajar con gerente en este archivo, importo
específicamente en la clase gerente, pero si voy a trabajar con cinco clases o más que
estén incluidas en el mismo paquete, entonces, ahí ya es un poco mejor importar
directamente todo el paquete entero.

[06:59] Esto no, no, no va a reducir performance ni nada, entonces todo bien hasta aquí.
De esta misma forma vamos a corregir el test de cuenta, el test de funcionario, les
recomiendo practicar usando tanto el nombre completo de la clase de paquete más
nombre de la clase, así como los imports.

[07:20] Recuerden nuevamente: la estructura de una clase Java es primero paquete,

imports y la clase como tal

CLASE 313 JS POO

Imaginemos que tenemos nuestras llaves y definimos nombreCliente, dniCliente,

numeroCuenta y saldoCuenta. Si pudiésemos tener esa estructura de esa forma y
repetirla n veces, sin tener que definir n variables sino solamente a partir de ese molde
resolveríamos nuestro problema, ¿cierto?

[04:44] Ese molde existe en JavaScript. Ese molde, como está en la pantalla se llama
clase. Y a partir de esa definición vamos a trabajar nuestro sistema. Entonces, la clase va
a ser el molde y esa clase se va a definir, lo vamos a ver en el próximo video, con ciertas
palabras, cierta definición, pero nos va a permitir generar piezas de clientes, instancias
se define eso, instancias de clientes, con lo cual vamos a poder manejar la información
de cada uno de nuestros clientes.

CLASE 314 JS POO

vamos a nuestro PowerShell, vamos a nuestra carpeta de trabajo. Bien. Hacemos un
clear y tenemos acá. Llamamos a Node con index y nos trae. Bien. Sin problema. Vamos
a ver, si queremos imprimir el DNI, tenemos que imprimir esto. Llamar a console log con
DNI de cliente. Ejecutamos y así sucesivamente. Si hacemos presentación de cada una
de nuestras variables de nuestros clientes, vamos a tener que imprimir cada una de las
líneas.

[02:02] Volvemos a repetir que esto no es viable, no es manejable. Ahora, vamos a

nuestra estructura, nuestro molde aquí, y vamos a ir definiendo. ¿Cómo definimos una
clase? Más de nuestro molde. Pues empecemos con la palabra reservada class, class en
inglés, y después definimos un nombre para esa clase. En este caso va a ser un nombre
representativo que nos indique sobre qué tipo de datos estamos manejando.

[02:28] Vamos a decirle que vamos a manejar la clase cliente, que ya definimos nuestro
molde. Allí ya está nuestro molde hecho. Ahora, ¿cómo creamos piezas de ese molde?
Creemos una nueva pieza, bastante intuitiva la forma que lo debemos hacer. Vamos a
llamar a la palabra reservada new, nuevo en inglés, le decimos nuevo ¿qué? Nuevo
cliente. Paréntesis porque es una clase.

[03:00] Ahí ya tenemos creado nuestro primer cliente, la primera pieza. Pero aún no le
hemos dicho cómo lo vamos a referenciar. ¿Recuerdan que en las clases de Primeros
pasos hablamos de atributo y nombramiento de variables? Acá tenemos que crear una
variable para gestionar nuestra pieza. Vamos a decirle que palabra reservada const,
cliente 1, igual ¿a qué? A una pieza, un molde de cliente.

[03:35] Y ahora podemos simplemente acceder a las variables internas de ese molde, al
nombre, al DNI, al saldo, a la cuenta, que en el caso de objetos no se llaman variables.
Ya aquí ellas toman una nueva forma de llamarse, se llaman atributos o propiedades. Si
yo voy aquí en el Visual Studio y coloco el cursor encima de lo que antiguamente
llamamos variable, aquí me dice propiedad, porque es parte de una clase.

[04:09] Entonces yo ahora puedo decirle cliente 1, al darle punto él me muestra sus
propiedades, sus atributos. Le podría decir cliente 1 nombre, nombre cliente igual a
José. Y podría decir cliente 1 DNI de José. ¿Por qué? Interesante esto. Cuando yo le digo
cliente 1 punto, y nombro, selecciono un atributo, estoy diciendo que es parte de ese
cliente 1. Está referenciado, ya está relacionado ese cliente 1. Entonces cliente 1 punto
número de cuenta. La cuenta de cliente 1.

[04:56] Aquí el número de cuenta. Y nos falta el saldo. Ahora ven la diferencia, la
facilidad que vamos a conseguir para referenciar nuestras variables. Acá tenemos un
console log para cada una de las variables. Ahora yo fácilmente voy a poder mostrar
todos los atributos de mi pieza. ¿Cómo? Diciendo console log cliente 1. Y allí me va a
mostrar todos los datos.

[05:33] Vamos a ejecutar el programa. ¿Vieron qué fácil? Tenemos ya toda la

información definida. Ahora, ahí en mi pantalla vean este detalle aquí en la cuenta, acá
me dice "saldo cuenta undefined", no está definido, y saldo 2000. ¿Qué pasó? Que acá
en el código, yo estoy diciendo "saldo cuenta" como atributo, le asigné saldo, saldo que
no existe.

[06:11] Entonces ahora a saldo cuenta le decimos 5000 por ejemplo, salvamos,
ejecutamos, y ahora no nos sale undefined. ¿Por qué? Porque yo atribuí unas
propiedades que no existían y no atribuí el valor para la propiedad que existía
realmente. Ahora bien, en este punto ya podemos decir que vamos a crear un nuevo
cliente y en lugar de definirlo de esta forma tradicional vamos a decir que ahora const
cliente2 igual a un molde de cliente, a una instancia de la clase cliente.

[07:01] Le asignamos los valores. Cliente2, quitamos acá, como ya lo había nombrado
con el nombre correcto, simplemente hago esto. Y fácilmente puedo crear acá un
cliente3. Bien. Y aquí le decimos cliente3, recuerda quitar este 2 de aquí, porque no es
un atributo, no están nombrados con el 2 al final, es nombreCliente de mi cliente.
Vamos aquí a atribuir nuestras propiedades.

[07:52] Cliente, cliente3, vamos a colocar otro dato aquí, María, vamos a decir que
ahora DNI es diferente, el número de cuenta es diferente y ya quitamos estas líneas acá
porque no tenemos estas variables y podemos mostrar en pantalla los tres clientes.
Nuevamente un dni cliente undefined. ¿Por qué? Porque llamé dniCliente3. Ten en
cuenta que los nombres de los atributos deben coincidir con los del molde, si no, va a
pasar esta afirmación que dice undefined.

[08:49] Vamos a ejecutar nuevamente y vamos a hacer un Node y tenemos nuestros

tres clientes en pantalla, y así sucesivamente. Ya podemos tener n clientes y nuestro
código no va a necesitar definir n veces las variables. Simplemente partimos de un
molde, de una definición inicial de la clase cliente. Si necesitásemos por ejemplo el
número de identificación fiscal, en algunos países se llama RUT, otros NIF, no recuerdo
otras formas, RFC.

CLASE 315 JS POO

Si vamos a atributos, nuestra clase cliente tenemos el nombre, el DNI, tenemos su

número de cuenta, saldo cuenta y podemos tener también su número de identificación
fiscal o RUT.

[01:39] Ahora, el número de cuenta y el saldo hacen parte de los datos de un cliente,
son atributos del cliente como tal, pues nos parece que sí pero no, ¿cierto? Entonces si
definimos una nueva clase llamada cuenta corriente, ¿qué debe tener esa cuenta? Debe
tener un número, debe tener un saldo, puede tener una agencia, ahora bien, revisando
la clase cliente nos damos cuenta de que tanto el número como el saldo se repite. ¿El
atributo saldo de quién es?

[02:25] ¿El cliente tiene un saldo o la cuenta tiene un saldo? La cuenta tiene un saldo.
Entonces saldo no debe ser parte de la cuenta. ¿El número es de la cuenta o del cliente?
El número es de la cuenta. Entonces, ya vemos aquí que tenemos ciertas cosas que no
son parte. Ahora, ya tenemos dos clases separadas. De alguna forma más adelante las
comunicaremos, pero de esta forma ya, aquí tenemos los datos como debemos
organizarlos.

[03:03] Veamos un poco nuestra línea, entonces ya definimos nuestras clases, definimos
la clase cliente, definimos la clase cuenta corriente, vamos aquí a separar un poco, ya en
esta parte del código vamos a ir limpiando, el número de cuenta no es del cliente, sino
que vamos a tener que crear aquí una nueva instancia, un nuevo objeto llamado cuenta
corriente 1 igual a un nuevo objeto de la clase cuenta corriente.
[03:49] Y en esta parte a esta instancia, a este objeto que hemos creado, vamos a
atribuirles los valores de número y de saldo, entonces ahora queda más natural hablar
de que tenemos el saldo de la cuenta corriente, tenemos el número de la cuenta
corriente. Anteriormente hablaremos como el saldo del cliente. Se puede hablar, pero
no es correcto.

[04:23] Es el nombre del cliente, es el DNI del cliente, es el saldo de la cuenta. Esos
atributos que estamos hablando, esa abstracción es llevar ese modelo del mundo real al
código, es visualizar las cosas como clases y objetos. Aquí también, hacemos nuestra
segunda cuenta corriente y atribuimos los valores o definimos los atributos de la cuenta,
queda natural.

[05:03] Vamos aquí, bien. Vamos a quitar este tercer cliente que ya no nos interesa
mucho y vamos a imprimir sus valores. Entonces hagamos aquí un console.log de
cuentaCorriente1, punto y coma final, no es necesario pero es conveniente, y luego
hacemos cuentaCorriente2. Vamos a nuestro PowerShell, hacemos un Node. Vamos a
nuestra aula 2. Aquí vamos a hacer nuestra carpeta. Refrescamos.

[05:58] Vamos acá, vamos a abrir nuestra carpeta, open folder, estamos en esta, en aula
2, y ahora volvemos acá y le decimos node index. Tenemos acá impresiones, aquí
tenemos cliente, donde el RUT no está definido, no lo hemos definido, tenemos cuenta
corriente que tiene un número y un saldo, luego tiene una agencia. Veamos, vamos a
atribuir estos valores acá.

[06:40] Vamos a decir que cliente2.rut cliente es igual a DNI, en algunos países es igual.
Y aquí en cliente, rutCliente, le definimos otro número cualquiera. En cuentaCorriente1
decimos que la agencia es la 1001. Y en el caso de la cuenta2 decimos que la agencia es
la 1002. Veamos acá, vamos a nuestro PowerShell, limpiamos la pantalla y ejecutamos.
Nos está dando un error.

[07:33] Nos dice: cliente2 no se puede acceder antes de inicialización. Vamos a ver qué
fue lo que hicimos aquí. Lo llamamos sin declararlo. ¿Qué pasó aquí en este error? Hice
copiar y pegar y llevé la asignación del rut del cliente2 al punto de estar solamente para
el cliente1. Cuando yo ejecuto el Node me dice: "no tienes un objeto llamado cliente2,
por lo tanto no puedo acceder a ningún elemento, a ningún atributo de él". Importante
eso.

[08:08] Yo ejecuto ahora nuevamente, ahora está todo saliendo. Nos falta aquí agencia
en cuentaCorriente2. Probablemente fue un copiar y pegar. Ahora está saliendo todo
bien. Perfecto. Acá ya cubrimos este punto. Ahora, ya tenemos nuestros objetos,
tenemos nuestras clases, nuestro molde. Ahora vamos a hablar de un siguiente punto.
Las clases, esos moldes, tienen atributos que son esos valores, las variables.

[08:44] Tradicionalmente tienen una definición que se llama método. ¿Qué son los
métodos para una clase? Son los comportamientos, es lo que va a hacer. Por ejemplo,
una cuenta corriente, ¿qué comportamientos puede tener una cuenta corriente?
Entonces la creamos. Cuando se crea, va a tener un saldo inicial, pero ahí adelante va a
tener operaciones. Va a entrar dinero, va a salir dinero, entonces nosotros podemos
definir esos comportamientos.

[09:19] Fácilmente yo pudiese acá decir: "bueno, cuentaCorriente2.saldo va a ser igual a

el saldo que tiene más 100". Esta sería una operación de entrada de dinero, un depósito.
Si yo acá, vamos a quitar esto, esta situación de acá. Yo ahora voy aquí a hacer un
console.log de cuenta corriente pero solo del saldo. Vean cómo yo accedo a él, solo del
saldo.

[09:58] Y luego acá voy a hacer otro console.log, después de la operación. Ejecutamos,
ahí está, saldo inicial 1000, operación de 100 de depósito, son 1100. Lo mismo puedes
hacer para el caso de retiros, solo que esos comportamientos, esas funciones o esas
funcionalidades de la clase llamadas métodos se van a definir dentro de la clase,
entonces yo acá yo debería hacer un primer método, solo para mostrar cómo funciona.

[10:38] Aquí yo podría decir que es depósitos en cuenta, ¿el valor va a ser igual a qué? Si
yo voy y me traigo el código de acá, le digo que la operación se va a tratar de un saldo y
ese saldo se lo voy a sumar lo que llega de valor, vamos a ejecutar esto acá, nos queda
el saldo, pero acá estoy diciendo: "A la instancia cuenta corriente 2, a su saldo agrégale
lo que envié", pero en este punto yo no estoy en una instancia, estoy en el molde, estoy
en la parte genérica.

[11:25] Estoy en el comportamiento general de cualquier cuenta corriente, entonces yo

debería intentar acceder a la cuenta corriente actual que estoy manejando, que puede
que sea cuentaCorriente2 o puede que no sea. Para yo generalizar ese comportamiento
yo debo cambiar el nombre de la instancia, que es algo particular y luego generalizar
diciendo que para esta cuenta corriente del inglés this.

[11:53] Entonces hacemos el cambio y decimos que para esta cuenta corriente y su
saldo, atribuir el valor que mande. This define la cuenta corriente actual. Yo puedo estar
en la 1, en la 2, en la 3. Pero cuando yo le digo: depósito en cuenta, de la cuenta
corriente, él va a saber que es de la cuenta corriente actual por el hecho de que yo estoy
manejando la variable this.

[12:19] Y acá esta operación la hemos visto ya, no necesitamos hacerlo de forma tan
extensa, simplemente de forma abreviada le decimos que lo que tiene saldo le agregas
valor. Eso lo vimos en el curso de Primeros pasos con el lenguaje, que si aún no lo han
visto o si necesitan dar una repasada, vayan para allá y den una mirada nuevamente a
esos videos.

[12:42] Definimos nuestro método, el comportamiento de la clase, la cuenta corriente

va a manejar depósitos y yo acá vengo y le digo a mi cuenta corriente 2 que estoy acá, y
en lugar de decirle esto, le digo cuentaCorriente2 depósito en cuenta y le paso los 100.
El comportamiento esperado que ahora me imprima lo mismo pero quedó genérico.
Veamos acá. Imprimir.

[13:22] ¿Qué es lo simpático de esto? Que ese comportamiento quedó definido y yo no

voy a repetir más ese código. Simplemente cada vez que la persona haga un depósito,
llamo a la función y vean lo que va a pasar aquí. Yo voy ahora a llamar a mi cuenta, a
imprimir el saldo de la cuenta corriente y se va a mostrar de una manera correcta. Le
decimos clear y ahí está. Cada depósito que se hizo, se ve reflejado.
[13:58] Y solamente estoy hablando del método que define el comportamiento de la
cuenta tiene una operación que incrementa su saldo, de depósito

CLASE 316 JS POO

vamos a hablar de los métodos. Vamos a crear el método de retirar de la cuenta. Ya

tenemos el de depositar, veamos el de retirar. Entonces vamos a crearlo de la misma
forma. Creamos así: retirar de cuenta. ¿Qué vamos a retirar? Vamos a retirar un valor.
Entonces definamos nuestro parámetro valor. Si en sí para depositar en la cuenta
hacíamos un this.saldo, recordando que el this era aquella palabra reservada que nos
permitía acceder a la cuenta actual.

[02:26] Estamos en nuestro programa, podemos tener la clase que la tenemos una sola
vez pero podemos tener miles de cuentas que van a ser miles de instancias, para que la
clase sepa hacia qué instancia se va a referir, recordamos que tenemos que usar la
palabra reservada this, de esta o de este en inglés. Entonces, hacemos uso del this.
Decimos que para el saldo de esta cuenta vamos a decrementar o vamos a retirar, como
bien dice, el valor.

[03:00] Entonces sería saldo igual a saldo menos valor, o hacemos la forma abreviada,
que es indicando saldo menos igual a valor. Vamos a crear una nueva instancia. Vamos a
decir que cuenta de Leonardo es igual a una nueva cuenta corriente. Si hacemos un
console.log de cuenta de Leonardo, salvamos, vamos a nuestro PowerShell y
ejecutamos node index.

[03:50] Creo la cuenta, no tiene ningún atributo, por tanto sus tres atributos están
undefined. ¿Está correcto? Bien. Ahora, cuenta de Leonardo, depositamos dinero en la
cuenta, vamos a decir que 100, y hacemos un console.log y luego hacemos un retiro.
Retiro de cuenta de 50. Y volvemos a hacer un console.log. Ahora vamos a nuestro
PowerShell nuevamente, buscamos la última instrucción, con flecha arriba, node,
ejecutamos y ahora nos dice que saldo no está definido como número.

[04:38] ¿Qué sucede acá? Sucede lo siguiente. Yo en este proceso no definí su valor
inicial de saldo, entonces estoy diciéndole al compilador "cualquier cosa, agrégale 50",
JavaScript no sabe qué tipo de dato es cualquier cosa, entonces no consigue hacer la
operación. Para resolver esto de una manera fácil y rápida vamos aquí en cuenta de
Leonardo.saldo inicializamos en cero.

[05:08] Ahí ya le estamos diciendo a JavaScript: "Este atributo saldo es de tipo numérico,
entonces manéjalo como numérico". Si vamos a nuestro PowerShell nuevamente y
ejecutamos el código, flecha arriba, ahora tenemos saldo 100, saldo 50. Nuestra
operación de retiro está funcionando. Si seguimos nuestra ruta, hablemos de por qué
ese error sucedió.

[05:44] Ese error sucede porque como le indicaba, saldo no estaba definido, entonces
para JavaScript eso es cualquier cosa. Cualquier cosa puede ser no definido. Él no va a
asumir que es carácter, que es numérico, que es booleano. No. él no tiene definición.
¿Qué podemos hacer nosotros o qué debería hacer nuestro programa cada vez que crea
una cuenta?

[06:10] Debería ese molde dejar ya listo esa pieza con lo normalmente que funciona
para esa pieza o con lo que normalmente funciona para esa clase. Entonces, el
comportamiento de defecto es lo que se define en sí. ¿Cómo podemos nosotros definir
ese comportamiento de defecto? Las clases tienen una operación que se llaman
constructor, que se ejecuta al momento de crear la instancia.

[06:37] Cuando aquí yo digo new cuenta corriente, JavaScript busca en su clase si existe
un constructor. ¿Para qué? Para ejecutarlo. ¿Para qué nos sirve esto? Perfectamente
nos sirve para este error que dejamos de tener, que ya corregimos pero que podemos
mejorar. ¿Cómo? Le decimos constructor de la clase, y en ese constructor nosotros
podemos decir que el saldo que this.saldo es igual a cero.

[07:07] Entonces toda vez que creemos una nueva instancia de la cuenta corriente, ya el
saldo va a venir cero por defecto. No vamos a tener que colocarlo, no se nos va a
olvidar. Entonces de esa forma no vamos a tener el error que presentamos.
[07:23] Acá, si yo comento esta línea, que coloqué para solventar el error que me salía
de ese N A N que más adelante les puedo comentar qué es, no se asusten, si yo ejecuto
nuevamente aquí mi código, ya no necesité ese saldo igual cero sino que la clase buscó
en su constructor y ya inicializó ese parámetro. Ahora tenemos dos parámetros que nos
están saliendo undefined. Deberemos arreglarlo.

[07:56] ¿Cómo creen ustedes que pueden arreglar ese undefined? Pónganle pausa un
momento al video e intenten pensar cómo colocar en su constructor esa inicialización.
¿Lo hicieron? Veamos, ¿cómo yo debería inicializar eso para que no me salga
undefined? Yo vuelvo aquí a mi Visual Studio Code, subo al constructor y voy a hablar a
JavaScript y digo: "para este número, this número, déjalo vacío, y para esta agencia
déjala vacía."

[08:34] Toda vez que crees una nueva instancia, inicializa tus valores de esa forma.
Cuando yo ejecute nuevamente el código ya me salen vacíos, no tuve que colocar un
valor inicial, porque el constructor ya sabe que tiene que colocar ese valor inicial.

CLASE 317 JS POO

Si colocamos punto, Visual Studio nos muestra toda la lista de métodos de

comportamientos disponibles en esa clase y sus propiedades.

[02:41] Entonces buscamos aquí depósitoEnCuenta, le decimos que vamos a depositar

10, negativo. ¿Qué va a pasar? Que lo acepta. Debemos colocar una protección para
eso. Vamos a nuestro Visual Studio Code, volvemos aquí a la parte de depósito, y yo solo
voy a depositar si valor es mayor que 0, si no, no tiene sentido.

[03:05] Vamos a nuestro PowerShell, ejecutamos nuevamente, no estoy limpiando la

pantalla para que mantengamos el histórico. Ejecutamos y ahora ese depósito no lo
permitió porque era un número negativo. En los objetos, en las clases, hay un
comportamiento interesante para esto, es lo siguiente.

[03:25] Nosotros podemos definir atributos privados, que solo la clase internamente
puede operarlos y no afuera. Eso es un paradigma, es un concepto de programación
orientada a objetos. En JavaScript, por ser un lenguaje bastante libre, no existe una
definición rígida para eso, pero existe una convención que está en proceso de
aprobación que es así.

[03:50] Si yo le coloco al nombre de mi atributo un numeral al inicio, le estoy diciendo a

JavaScript "Trátame ese atributo como privado". Entonces, ¿qué sucede? Si yo en algún
punto hago esta operación, que teníamos antes, ¿sí? que era inicializar el valor, ¿yo qué
iba a cambiarlo? Vamos a poner 10 por ejemplo, no me importa.

[04:18] Puedo dejarlo en 0, o puedo colocarle 10. Pero estoy hablando, ah, tenemos que
cambiar en todos lados, porque si no, voy a tener dos variables, eso es importante.
JavaScript va a crear una variable saldo y una variable numeral saldo. Lo importante es
cambiar en todos los puntos. Ya hicimos el cambio, okay.

[04:35] Si yo hago esta operación de intentar atribuirle un valor a esa variable que
estamos definiendo privada, en realidad es una propuesta, y ahora mismo les voy a
mostrar el enlace para que den una mirada a eso, porque no existe una definición como
en otros lenguajes, como en lenguaje C, como en Java, que tú puedes indicarle
explícitamente que el atributo es privado.

[04:57] Si yo ejecuto aquí, ahora sí podemos limpiar, si yo ejecuto acá mi código, él me

dice: "No puedes indicar un valor para un atributo privado". Entonces solo la clase
internamente podría hacer ese cambio. Para yo retirar este error, simplemente tengo
que quitar esta línea y siempre hacer las operaciones de saldo sobre la cuenta con los
métodos, los comportamientos definidos por la clase.

[05:29] Vuelvo acá, salvamos, volvemos a nuestro PowerShell, ejecutamos el código,

flecha arriba, todo vuelve a su normalidad. Solo que ahora no vemos el saldo allí. No
vemos el saldo. ¿Por qué? Porque es privado. Entonces no está abierto para que sea
visible. ¿Bien?
[05:50] Esa definición de atributos privados acá la pueden conseguir en este link que
está acá de documentación oficial de Mozilla, donde hablan de la propuesta que está en
proceso, está en una tercera fase, y ya Node a partir de la versión 12 la incorpora. Por
eso nosotros podemos usarla, porque está en nuestra versión que hablamos al inicio del
curso.

[06:11] Si vamos a nuestro PowerShell nuevamente y miramos nuestra versión, tenemos

una versión mayor a 12, por lo tanto ya está soportada. No es parte del estándar
todavía, entonces no está disponible, no es rígida, pero sería bueno que empezaran a
usarla, que conocieran esa propuesta.

[06:30] Y acá la definición exacta está en GitHub, también está el link, yo los voy a dejar
en nuestras direcciones para que lo puedan visualizar y le den una mirada. Actualmente
JavaScript, oficialmente, ¿qué tiene? La definición o lo que está aceptado es que si tu
atributo empieza por underscore o ahí también abajo, le está diciendo a los otros
desarrolladores: "Mira, trata este atributo como privado, trátalo como privado".

[07:10] ¿Pero qué sucede? Aquí viene un error, aquí es importante. "Trátalo como
privado". ¿Qué sucede? Que si yo ejecuto el código, la variable sale, entonces es como
solo una sugerencia. "Mira, todo lo que esté con signo underscore al inicio, es privado.
No lo cambies en tu código. Si lo haces, estás haciéndolo mal, pero JavaScript lo va a
aceptar."

[07:35] La otra definición que está en propuesta es mucho más rígida, te salta el error,
entonces eso es importante. Yo voy a trabajar con la otra propuesta, con la propuesta
que está en tercera fase, que aún no está aceptada pero que ya Node me salta el error.
Por lo tanto, les recomiendo que ustedes de aquí en adelante lo hagan también.

[07:54] Si ya la conocían, si conocían la propuesta de usar el underscore al inicio,

cámbiense a usar el numeral. Si no la conocían ni recuerdan la otra, vamos a usar el
numeral para definir nuestras variables privadas. Aquí tenemos un error, salvamos.

CLASE 318 JS POO

La clase está haciendo sus operaciones pero está hablando, no está retornando valores.
Es importante entonces, según nuestra hoja de ruta, vamos a implementar el retorno de
los resultados de las operaciones.

[01:57] Si vemos, deberíamos tener un retorno acá. Entonces, podemos hacer lo

siguiente. En nuestro depósito en cuenta podemos hacer un return del valor recibido o
del saldo. Entonces, ¿qué nos va a permitir esto? Toda vez que hagamos un depósito, la
función nos va a decir: "Depositaste y quedaste con tanto dinero en la cuenta" o toda
vez que hagas un retiro, copiamos y pegamos, cada vez que hagas un retiro vas a saber
con cuánto saldo quedaste en la cuenta.

[02:40] Acá yo puedo empezar a informar. ¿Por qué? Porque si yo ejecuto este código,
vamos a nuestro PowerShell y ejecutamos nuestro código, hacemos un clear y
ejecutamos nuevamente. Ejecutó, no dio ningún error, no nos dijo nada. ¿Por qué?
Porque ya no tenemos los console.log. Vamos a empezar a hacer nuestro programa que
interactúe con el usuario, de forma que empiece a hablarle.

[03:05] Vamos a definir una variable con saldo, const. El saldo va a variar en la ejecución
del programa, por tanto no puede ser const, tiene que ser let. Recordando que const y
let son palabras reservadas que nos permiten definir el comportamiento de la variable.
Si no lo recuerdan, pueden ir a nuestro curso de Primeros pasos con el lenguaje
JavaScript y dar una revisada a esas clases.

[03:34] Entonces let es igual a cero. No debería ser igual a cero, debería ser igual al valor
inicial de la cuenta que tengo en ese momento, entonces deberíamos tener una función
para saber el saldo. Entonces vamos a crear una función, vamos a crear un atributo
nuevo a la cuenta. Ya tenemos un depósito, tenemos un retiro, deberíamos tener un ver
saldo.

[03:57] No recibe ningún parámetro y vamos a hacer uso nuevamente de esta palabra,
que la vimos hace unos segundos y no se las expliqué, que es return, de retornar, de
devolver. Entonces acá va a quedar muy claro de que voy a retornar, voy a devolver el
saldo. Y en este punto del código, en la línea 40, estoy diciéndole que a saldo asígnale lo
que tiene la cuenta en ese momento, y ya hicimos la definición e inicializamos saldo.
[04:27] Si yo acá, ahora sí empiezo a hablar console.log, el saldo actual es, hacemos
interpolación de variables, saldo, vamos acá, y ahora si ejecutamos nuestro código,
volvemos a nuestro PowerShell, volvemos a nuestro código y nos dice que no. Vamos a
colocar acá así, como concatenación de cadenas. Ejecutamos nuestro código y dice cero.
Bien.

[05:20] En este punto vamos ahora a depositar en cuenta y vamos a imprimir nuestro
saldo nuevamente. Yo puedo decirle al sistema copiando y pegando estas dos líneas,
hizo la operación de cuenta, y acá nuevamente, hizo la operación de cuenta y acá
nuevamente hizo la operación de cuenta.

[05:46] Si yo ejecuto mi código con ese retorno que está haciendo ver saldo,
ejecutamos, pues me dice 0, 100, 0, 0. Ejecutemos. Iniciamos la cuenta. El saldo al inicio
es 0 por el constructor, depositamos en cuenta en la línea 43. Aquí en el PowerShell se
nos muestra, lo estoy marcando, que es 100. Luego retiramos 100, por lo tanto el saldo
vuelve a ser cero, segunda línea 47.

[06:14] El saldo acá es cero, y en la línea 51 intentamos depositar negativo, por lo tanto
no hace el depósito, por lo tanto el saldo sigue siendo 0 donde estoy marcando. Para
probar, si yo acá cambio y le quito negativo, dejamos depósito en cuenta 10,
ejecutamos y nos dice que el saldo es correcto.

[06:38] Ahora, sería interesante por ejemplo, si vemos nuestro código, que estamos
haciendo una devolución del saldo cada vez que depositamos, cada vez que retiramos,
entonces yo pudiese hacer lo siguiente: en lugar de llamar a ver saldo, yo acá puedo
decirle "saldo es igual a lo que me retorne el depósito", porque ya esa operación me va
diciendo cuánto me va quedando, o "saldo es igual al retiro de la cuenta", a lo que
quedó del retiro.

[07:04] Igual acá, saldo. Y aquí yo le estoy quitando estas líneas y si ejecuto mi
programa, voy al PowerShell, flecha arriba, ejecutamos, sigue comportándose de la
misma forma. Ahora nuestra clase sigue retornando valores, nuestra clase está
hablando y si se dan cuenta, mantuvimos nuestro atributo privado saldo sin acceso.

[07:27] En el código en ningún momento: estamos usando el atributo de la clase, porque

es privado. Está protegido y estamos interactuando con esta clase a partir de las
funciones, a partir de los atributos que ella nos está colocando a disposición. Entonces
aquí estamos usando ya nuestra clase, estamos usando funciones o métodos de nuestra
clase.

[07:52] Sabemos que existen atributos privados y estamos retornando cosas ya de

nuestra clase. Con esto ya hemos sentado una base importante de lo que es la
programación orientada a objetos y hay un concepto, una palabra, que se llama
encapsulamiento, que es que nuestra clase ella encapsula, encierra dentro de sí su
comportamiento y solo libera o solo pone a disposición lo que realmente nosotros
necesitamos.

[08:24] El comportamiento interno está definido, nosotros no tenemos que acceder a

cosas internas, ella simplemente encapsula su comportamiento.

CLASE 319 JAVA LANG

Qué es un modificador de acceso? Es lo que delimita el alcance de un objeto en Java.

Puede ser un objeto, un método, un campo, una variable, cualquier cosa. El modificador
de acceso delimita el alcance que él que va a tener.

[00:44] ¿Y a qué me refiero con el alcance? Es la visibilidad que va a tener dentro del
proyecto. Vamos a verlo mejor con un ejemplo. Voy a abrir aquí y aquí tengo mi clase
contador. ¿Qué sucedería si este public que está aquí lo borro? Entonces, lo borro, lo
guardo aquí, automáticamente vemos que salió un error aquí abajo en el text.

[01:11]¿Y qué es lo que está pasando aquí? Él me dice: "contador no existe aquí". Y yo
digo: "no puede ser, pero si yo estoy especificando com.bytebank.modelo.Contador."
Diego, tú nos dijiste que si yo especificaba el nombre y el apellido de la clase, entonces
yo podía entrar a esa clase y podía trabajar con ella.
[01:33] Si es verdad, pero aquí entra otro factor muy importante, que es el modificador
de acceso. ¿Qué es el modificador de acceso? Como anteriormente ya les dije, él
delimita el alcance que va a tener esa variable. Y cuando no tengo modificador de
acceso, directamente empieza como class, ¿cuál sería el modificador? Es el llamado
default.

[02:02] El modificador de acceso default nos dice, bueno, si no especificas, es el que va

por defecto, ya su propio nombre lo dice. Pero lo que él nos dice es que esta clase va a
ser visible únicamente dentro del mismo paquete. Entonces, dado que los tests están
fuera del paquete, contador no es accesible, pero si yo voy a sistema interno y digamos
yo quiero aquí traer un contador.

[02:34] "Ctrl + espacio" y mira lo que tengo acá, tengo al contador. Puedo ver a un
contador. ¿Por qué? Porque el modificador de acceso default, ¿qué me dice? Tú puedes
entrar, puedes verme, solamente si estás en el mismo paquete donde yo estoy. Y a
diferencia de él, ¿qué es lo que hace public? Public es el más permisivo. Public lo que me
dice es: "no importa donde estés, tú puedes entrar."

[02:59] Salvo, guardo y vemos que ya tengo ControlBonificación y todo funcionando

tranquilamente. Recapitulando hasta aquí, public es más permisivo, el default es el que
nos permite tener acceso a la clase o al atributo dentro del mismo paquete. ¿Cuál sería
el tercero? El tercero sería el protected, y protected lo estamos usando aquí.

[03:26] ¿Y por qué es que usamos protected aquí? A ver, vamos viendo algo, si public es
el más permisivo, default es solamente visible a nivel de paquete. ¿Qué es lo que hace
protected? Protected lo que hace es darme visibilidad a nivel de paquete y también a
nivel de herencia. ¿A qué me refiero con a nivel de herencia?

[03:53] Que este atributo saldo es accesible dentro del mismo paquete y fuera del
paquete a todas las clases que sean hijas de cuenta. Por ejemplo, si yo lo cambio a
private, automáticamente tengo un error en cuenta de ahorros. ¿Por qué? Porque él no
va a encontrar esta variable saldo y ya estamos también viendo el efecto de private.
Private es el más restrictivo de todos.

[04:21] Private me dice: "Tú no puedes acceder a mí fuera de la clase". Entonces el

protected nos da esa ventaja. Podemos acceder desde el mismo paquete y también con
las clases hijas, toda clase que sea hija de cuenta va a conseguir entrar a ver el saldo. Si
no es hijo de cuenta, entonces no va a poder.

[04:47] Perfecto. Entonces vamos a probar si esta teoría es cierta, voy a crear una nueva
clase. Clic derecho, New Class. CuentaEspecial, finish. Y aquí le digo que extienda de
cuenta. ¿Perfecto? Entonces cuentaEspecial me pide que agregue los métodos que no
he implementado, perfecto. Y aquí yo puedo poner un super.saldo. Y saldo está fuera
del paquete donde esta cuenta.

[05:27] Entonces aquí ya estamos comprobando pues que, en efecto, yo puedo acceder
a la variable saldo, puedo asignarle un valor incluso estando en otro paquete. ¿Pero por
qué puedo hacer esto? Porque extiendo de cuenta, entonces esta es una clase hija de
cuenta. Nuevamente repito el ejercicio, si yo lo vuelvo privado. ¿Con privado qué le
quiero decir?

[05:59] Fuera de esta clase, fuera del alcance de esta clase, tú no eres accesible,
solamente esta clase puede entrar a este a este atributo. Y eso impacta en todas las
clases que estén dentro o fuera del paquete donde esta clase está contenida. Entonces,
estos son los modificadores de acceso. Private sería el más restrictivo. Y vamos a
resumirlo aquí.

[06:27] Public: accesible desde cualquier parte del proyecto, cualquier parte. Default:
accesible dentro del paquete. Protected sería un default más clases hijas. Y aquí private
solo desde la clase misma. Estos son los modificadores de acceso que tenemos en Java.
Entonces, dependiendo de esto nosotros podemos implementar pues lo que se llama la
encapsulación de un objeto, como es el caso de aquí de cuenta. [07:09] Cuenta está
encapsulado. ¿Por qué está encapsulado? Porque sus atributos son únicamente
accesibles a través de los métodos que ya hemos visto que son los getters y setters, que
son los de aquí. Perfecto. Entonces no podemos modificar directamente el atributo,
pero sí podemos hacerlo a través de los métodos getter y setter, que tienen acceso a los
atributos de la cuenta en sí.

[07:34] Nuevamente, como les digo siempre, practiquen bastante. Este tema de los
modificadores de acceso es muy preguntado en exámenes de certificación de Java. Y al
inicio puede ser un poco complicado de entender, sobre todo default y protected.
Solamente recuerden esto: protected es la suma de default más herencia. Default y
herencia es un protected.

[07:56] ¿Y qué es un default? Visible solo a nivel del mismo paquete, en la misma
carpeta. Entonces, practiquen, pueden jugar, así como lo hice yo, borrando el
modificador de acceso cambiando el modificador de acceso. Puede ser aquí a nivel del
método main, si le pongo private de cualquier forma igual ya no sería un método main
público, entonces no puedo ejecutarlo, ya no es ejecutable.

CLASE 320 JAVA LANG

Normalmente cuando escribimos código, nuestro código no tiene que ser solamente
legible para nosotros, sino tiene que ser legible y entendible para todos.

[01:20] Y hay muchas veces en los cuales necesitamos documentar el código. ¿Y a qué
me refiero con documentar? Explicar qué es lo que hace y no en lenguaje de código de
computadora, sino ya en lenguaje humano. Explicar, por ejemplo, la clase cuenta tiene
los siguientes métodos porque va a ser la representación de una cuenta para el Banco
ByteBank.

[01:43] Esa puede ser una documentación de mi clase cuenta. O aquí, en esta clase
SistemaInterno. ¿Esta clase SistemaInterno por qué fue creada? ¿Fue creada para este
fin? ¿Fue creada, digamos, para validar algunas cosas, etcétera? Como aquí es el iniciar
sesión. Y vamos a ver un ejemplo más práctico, para eso voy a abrir el proyecto de
excepciones que trabajamos en el curso anterior. [02:10] Doble clic, el proyecto se abre,
todo bien, vamos aquí, a SRC, default, porque aquí aún no aprendíamos cómo organizar
por paquetes, y vemos que aquí él tiene MiException. Lo que yo voy a hacer aquí es
entrar a MiException, y vemos aquí justo toda esta sección de código. Perfecto.
[02:34] Vemos que aquí está azul, aquí está verde. Curioso. Y los comentarios que
nosotros hacemos, por ejemplo aquí, siempre son en verde, pero acá vemos que hay un
tipo de comentario en azul.

[02:51] Este tipo de comentario en azul es el que llamamos la documentación. Estos

comentarios son los que al final van a van a terminar siendo digamos todos recopilados
para armar la documentación de mi aplicativo, de mi programa.

CLASE 321 JAVA LANG

Entonces, para generar la documentación, lo primero que tenemos que hacer, por
ejemplo si yo quiero hacer un comentario de bloque, ya hemos aprendido que es con
slash, asterisco, enter y ya tenemos un bloque de comentario.

[01:12] Otro tipo de hacer comentarios es con los dos slash adelante, y otro tipo en este
caso para hacer la documentación, que es muy diferente, sería el slash, asterisco y
asterisco, y vemos automáticamente cómo si apretamos enter, él ya me está generando
un bloque de código y no solamente me ha generado un bloque de código azul, sino que
además ha puesto un @autor diegorojas, que en este caso es el nombre del usuario de
mi computador.

[01:45] Él toma el nombre del usuario del computador que está logado en este
momento, y va a poner el nombre. ¿Por qué? Porque yo soy el autor de este código de
aquí. ¿Y qué más puedo hacer yo con esta documentación? por ejemplo Puedo poner un
version. Perfecto digamos esta es la versión 1.0 de la clase cuenta. Si pongo otro @
puedo poner si está deprecado o no.

[02:14] Deprecado significa que ya no está en uso, no está retirado aún del proyecto
para evitar incompatibilidades, pero en el futuro va a ser retirado. Entonces está
deprecado, se recomienda que no se use. Y tengo una serie aquí de opciones para mi
documentación. Entonces, puedo poner author, version y aquí puedo poner una
descripción de lo que hace mi clase, por ejemplo: "Cuenta va a crear nuevas instancias
de CuentaCorriente".
[02:55] Y bueno, no recuerdo ahora el otro nombre de la cuenta, pero eso es lo de
menos. Esta va a ser mi documentación de lo que va a ser mi clase Cuenta. Perfecto. ¿Y
solo puedo poner documentación a nivel de la clase? No, también a nivel del
constructor, porque aquí, si yo nuevamente también hago slash, asterisco, asterisco,
puedo documentar también el constructor.

[03:19] ¿Entonces qué le voy a decir aquí? "Instancia una nueva cuenta sin parámetros".
Perfecto, porque es un constructor vacío. ¿Y aquí qué le puedo decir? Nuevamente,
documentación vemos que él ya me está completando aquí con el @param y él
especifica qué parámetros va a aceptar mi constructor.

[03:47] Entonces aquí yo le puedo decir que "Instancia una cuenta usando agencia y
número". Perfecto. Entonces, yo aquí ya estoy informando para la siguiente persona
que va a venir a trabajar con el código qué es lo que están haciendo estos constructores
exactamente. Yo podría dar mucha más información en cada uno de estos parámetros,
pero ahora solamente estamos viendo la forma de documentar la clase.

[04:19] Por ejemplo, aquí a nivel de método también, en el método saca, y le voy a
poner esto y automáticamente, mira, me dice que parámetro él usa y throws, incluso él
me informa qué excepción él puede lanzar, porque está aquí en la firma del método.
Entonces aquí yo le puedo escribir: "Este método retira dinero de la cuenta y si ocurre
un error devuelve una excepción". Perfecto.

[04:56] Entonces yo ya di aquí una descripción de lo que este método está haciendo. Ya
informé que parámetro él acepta y ya informé también qué error él puede lanzar.
Entonces estamos viendo que yo puedo documentar todo mi código con mucho detalle
y eso es muy bueno. ¿Por qué? Porque la documentación está dentro del código. Por lo
tanto, si yo voy a modificar el comportamiento del método saca, idealmente yo también
debería modificar la documentación de este método.

[05:32] ¿Y será que esta documentación solamente es visible si yo abro el proyecto en el

código? No. ¿Por qué? Porque esta documentación tiene un nombre, no se llama
documentación, se llama JavaDoc. JavaDoc es el nombre que Java le dio al tipo de
documentación que él tiene, documentación dentro del código. ¿Cómo puedo ver el
JavaDoc?

[05:56] El JavaDoc va a ser, digamos, traducido a un archivo. Voy aquí a la vista de

search y voy a buscar aquí JavaDoc y vemos aquí que views JavaDoc. Perfecto, necesito
esta lista. Y aquí en la vista de JavaDoc él no me está mostrando nada y quiero saber por
qué. Ya guardé aquí y listo, ahora ya sale. ¿Qué es lo que sale? com.bytebank
SaldoInsuficienteException.

[06:28] ¿Y si voy aquí a cuenta? Mira, yo selecciono la documentación. ¿Y él qué me está

diciendo? La cuenta va a crear nuevas instancias de CuentaCorriente, es la versión 1.0 y
el autor es Diego Rojas. Si voy aquí al constructor ¿qué me dice el JavaDoc? Instancia
una nueva cuenta sin parámetros.

[06:51] Aquí instancia una nueva cuenta usando agencia y número y me da los
parámetros, entonces vemos cómo él ya me organiza digamos esta documentación con
el nombre completo, nuevamente, nombre completo del método
com.bytebank.modelo.Cuenta.saca, que es el método, double valor.

[07:13] La firma completa del método, los parámetros que acepta y la excepción que
retorna. Y en el caso de la excepción, yo no he puesto ninguna documentación, por lo
tanto no hay información, pero si se dieron cuenta aquí en este parámetro ya me da un
link, un link directo a la excepción que retorna. Entonces esa es la principal ventaja del
JavaDoc.

[07:38] ¿Y será que solamente puedo hacer esto con el JavaDoc? Quiero decir,
¿solamente puedo verlo en Eclipse? No. ¿Por qué? Porque la idea del JavaDoc es hacer
la documentación pública. La idea de tener un JavaDoc es que cualquier persona pueda
leer la documentación sin leer el código. Ese es nuestro objetivo.

[08:04] ¿Y cómo genero yo esa documentación? Para esto, necesitamos tener el JDK de
Java para generar esta documentación, si tenemos solamente el JRE, no vamos a poder,
necesitamos sí o sí el Java Development Kit. Si no saben cómo descargarlo o necesitan
un poco más de información, pueden ver el módulo 1 del curso y ahí tienen todo el
detalle de cómo instalar el JDK.

[08:28] Lo que yo voy a hacer aquí es solamente un clic derecho porque Eclipse ya me va
a ayudar a generar esa documentación y lo que voy a decirle aquí es properties. No, yo
creo que era en project, aquí es. Project, y aquí hay una opción muy interesante:
generate javadoc.

[08:49] Le voy a dar clic, le voy a decir que sí, quiero generar JavaDoc de este proyecto,
herencia y polimorfismo. Y le voy a dar next, y claro, que use jerarquía, perfecto. Estas
opciones no se preocupen, es por defecto, todo bien. Le voy a dar que sí y vemos cómo
él va a ir generando este JavaDoc. Puede dar algunos errores de repente, como esto de
aquí, por el tipo de parámetro. Vamos a ver qué dice.

[09:25] No hay una descripción por el parámetro, no se preocupen. Eso es porque no

hemos dado un detalle de lo que debería hacer este parámetro, pero no es nada que
nos impida hacer el JavaDoc. Y bueno, vimos que él ya generó la documentación,
entramos aquí, y nos ha generado archivos HTML. ¿Por qué?

[09:47] Porque con estos archivos HTML, nosotros vamos a conseguir abrir esta
documentación en el explorador. Por ejemplo, aquí, y vemos cómo sería la vista en un
explorador, bytebank.modelo test. Voy a entrar a modelo y en modelo me dice todas las
clases que yo tengo.

[10:05] Voy a hacer esto un poco más grande. Listo. Aquí tengo la identificación de
todas las clases que yo tengo, y como la única clase en la que yo digamos he
especificado una documentaciones cuenta, aquí está la descripción. ¿Qué voy a hacer?
Voy a entrar a cuenta. ¿Y en cuenta qué tengo? Tengo Class Cuenta. ¿De dónde él
extiende? De java.lang.Object. Object es la clase padre de todas las clases. Esto lo vamos
a ver en la siguiente clase.
[10:33] Y nos dice qué clases están relacionadas con cuentas, es decir, qué clases hijas
tiene esta clase. Miren qué inteligente es esta herramienta JavaDoc, que
automáticamente crea todas las relaciones entre las clases hijas y padres y nos da
información de la jerarquía que ellas tienen aquí en la documentación. ¿Qué más nos
da? Bueno versión, autor.

[10:57] El constructor, en una sección aparte, qué hace cada constructor. Y los métodos,
y como yo solamente documenté el método saca, tengo la documentación aquí del
método saca. Si yo le hago clic, voy automáticamente a la documentación de ese
método y tengo pues la información necesaria. Cuando nosotros buscamos por alguna
documentación en la web, siempre vamos a encontrar el JavaDoc.

[11:24] Siempre va a haber un JavaDoc, digamos sobre la clase exception, la clase string,
todas las clases propias del lenguaje Java tienen un JavaDoc y es así cómo nosotros
vamos pues a tener información de qué es lo que hace el código sin leer el código
directamente, porque si ustedes se dan cuenta, aquí no hay nada de código, digamos de
implementación.

[11:51] Tenemos los nombres de los métodos, entonces otro detalle es que no es una
documentación por usuario final, es una documentación técnica, de programador a
programador. Un usuario final no va a entender nada de lo que dice aquí, pero esta
documentación es 100% técnica y sirve para que los programadores podamos compartir
código entre nosotros.

[12:13] Y digamos que si yo creo un proyecto aquí que un programador en la China

desea usar, bueno, él va a tener el JavaDoc con el cual va a conseguir tener, pues una
idea de qué es lo que hace mi proyecto, sin necesidad de descargar mi proyecto y leer
cada clase una por una, y bueno de demora mucho tiempo, ¿no?

CLASE 322 JAVA LANG

necesitamos tener la habilidad de compartir nuestro código, así sea a nivel de

comunidad, a nivel de equipos, a nivel de empresas, tenemos que tener la habilidad de
compartir el código de tal forma que los programadores no estemos obligados a escribir
de cero toda la funcionalidad y reinventar la rueda cada vez que sea necesario.
[01:11] ¿Y esto cómo es posible? Por ejemplo, Supongamos que yo aquí tengo ya mi
proyecto de bytebank, ya está funcionando, y este proyecto va a ser usado por Brasil,
por el bytebank de Brasil. ¿Será que Brasil necesita volver a escribir la clase Cuenta,
volver a escribir esta documentación, volver a declarar los parámetros, de la misma
forma, volver a hacer los tests?

[01:44] ¿Necesitamos realmente eso? Es por eso que necesitamos una forma de poder
compartir este código y Java nos la da. ¿Cómo es este proceso posible? Tenemos los
famosos archivos .jar. Los archivos .jar son muy parecidos a los .zip, que son los archivos
comprimidos. Pero esos archivos .zip van a contener el código ya compilado de lo que
nosotros queremos compartir.

[02:18] Es decir, no van a tener acceso al código fuente como tal, sino al código
compilado, a la funcionalidad en sí que tiene nuestro código. ¿Y como género yo el .jar?
Para que vean un poco más a detalle cómo es esto del jar que les estoy explicando y
pueda ser entendido de una mejor forma, vamos a crear uno.

[02:38] Entonces, aquí en el proyecto yo le voy a dar un clic derecho y le voy a dar
export. Aquí en export yo tengo diferentes opciones para exportar mi proyecto. Aquí en
general me va a decir, bueno Ant builders, archivo el sistema, etcétera. Install, Java, JAR
file. Ya encontré aquí lo que yo buscaba. Yo deseo exportar este proyecto como un
archivo .jar.

[03:10] Y le voy a dar next. Y aquí él me va a preguntar qué recursos yo quiero exportar.
Voy a abrir esto y yo quiero exportar bytebank, todo, pero la documentación no la voy a
exportar, ¿entonces qué hago? No la selecciono. No veo importante exportar la
documentación por ahora, pero si fuera el caso, puedo exportar la documentación
también. Claro, solo si la degenerado.

[03:35] ¿Qué más voy a exportar? Bueno, estos archivos, la verdad es que no me sirven
mucho porque son propios del Eclipse, son propios del IDE, pero lo voy a dejar ahí
solamente para no complicarme más la vida. Solamente quiero mostrarles la forma de
exportar un JAR y que vean cómo es la estructura del JAR en sí.

[03:54] Y aquí le voy a dar export.folders. ¿Dónde lo va a exportar? Le voy a dar a

browse y aquí me dice: "dale un nombre a este archivo .Jar". Y esto se va a llamar
bytebank-exportado. Perfecto, porque es el código de mi bytebank que yo estoy
exportando. Va a estar dentro de este mismo archivo y le voy a dar safe. Y ahora ya le
puedo dar finish. ¿Y qué es lo que va a hacer esto? Me va a generar. Perfecto.

[04:33] Okay, algunos warnings, pero nada importante y me va a generar este archivito
de aquí, bytebank-exportado.jar. Que si yo vengo aquí, al sistema de archivos, voy a
tener aquí un bytebank-exportado.jar, yo quiero abrirlo. Y él lo que va a intentar es
descomprimirlo, porque aquí por lo menos aquí en Mac, él entiende ese archivo como
un archivo .zip.

[04:59] Entonces él va a intentar descomprimirlo como algún archivo .zip y no va a

conseguir porque obviamente no es un archivo ZIP, es un archivo .jar. ¿Y por qué .jar?
Porque es accesible desde dentro de un contexto de Java, no desde el sistema operativo
directamente. Y entonces ya exporté del archivo .jar.

CLASE 323 JAVA LANG

normalmente estos archivos .jar los llamamos siempre de librerías, un conjunto de

clases exportadas en un JAR son una librería, siempre.

[01:06] Le damos finish, exportamos. No voy a crear un mod info. Le voy a decir que no
por el momento y listo, acá tengo mi librería. Voy a minimizar esto aquí para el
proyecto, aquí tengo el SRC, y lo que voy a hacer ahora es que crear un paquete. ¿Y qué
nombre va a tener ese paquete? Vamos a repasar.

[01:31] Voy a poner com.bytebank.test. Para practicar un poco. Le voy a dar finish, y
aquí en test y le voy a dar un new class y un testLibrería. Perfecto. Le voy a dar finish.
Voy a crear el ya conocido método main, "Ctrl + espacio", perfecto. Y hasta aquí voy a
llegar en este proyecto. ¿Por qué? Porque yo ya no quiero escribir este código otra vez.
¿Entonces qué voy a hacer? Este JAR que está aquí lo voy a copiar dentro de este
proyecto, de librería, perfecto.

[02:16] Yo voy a cerrar este proyecto incluso, le voy a dar un close, y solo tengo abierto
el proyecto bytebank-librería y ya tengo el JAR aquí. Normalmente no dejamos los
archivos .jar directamente así sueltos en el proyecto. ¿Por qué? Porque por convención
nuevamente, no es una regla que tenga que ser seguida drásticamente, pero por
convención se acostumbra a crear una carpeta con el nombre lib, por librerías, libraries.

[02:58] Entonces, la idea es que los JAR vayan dentro de esta carpeta lib, pero
nuevamente, este no es un hombre reservado, este no es un nombre, pues obligatorio,
puede ser librerías, algún otro nombre que ustedes quieran, pero por convención es lib.
Entonces, vamos a crearlo lib y vamos a copiar este JAR aquí dentro de lib. Perfecto.

[03:22] Entonces, ¿cómo queda la estructura del proyecto? Tengo bytebank-librería,

SRS, mi paquete y mi test, y ahora voy a escribir mi test. Y ahora quiero crear una
cuenta. Cuenta cuenta = new Cuenta(); perfecto. Y vemos que me está dando un error.
Importación, yo sé que ustedes también lo sacaron pero rapidísimo.

[03:51] Y cuando quiero importarlo, no me deja. Crear clase cuenta, crear interfaz
cuenta. Por alguna razón no está saliendo importar cuenta. Y esto me hace pensar,
¿pero no se supone que yo ya tengo la clase cuenta aquí en mi bytebank exportado?
¿Por qué él me está diciendo que quiere crear nuevamente la cuenta? Si al final yo ya
tengo ese código.

[04:21] Aquí falta solamente una pequeña configuración a nivel ya de Eclipse. ¿Y cuál
es? Tenemos la librería, pero aún no la agregamos digamos al conjunto de librerías de
mi proyecto que se llama build path. El build path es el conjunto de librerías que eclipse
va a usar para compilar mi proyecto build path, entonces, ¿cómo hago eso?

[04:46] Voy aquí, voy a build path y le voy a decir: "Agrégalo al build path". ¿Por qué?
Porque en el build path, build path significa digamos la ruta de construcción. El path es
la ruta y en esa ruta están todas las librerías que Eclipse va a utilizar para compilar mi
proyecto. Entonces le digo: "Sí, agrégalo al build path".

[05:09] Y ahora vemos que aquí hay un, no es una carpeta ni nada, pero es un indicador
que me dice que este proyecto está referenciando estas librerías, ¿qué quiere decir?
Esta librería ya está oficialmente incluida en mi proyecto, por lo tanto si yo doy "Ctrl +
espacio", sorpresa. Mira lo que tengo aquí.

[05:30] Tengo Cuenta, CuentaAhorros, CuentaCorriente, tengo acceso a todo el arsenal

de mi biblioteca de bytebank. Le voy a dar cuenta, él importó aquí. Vemos que cuenta
era abstracta, vamos a recordar, entonces no puedo importarla directamente, pero
quiero crear una CuentaCorriente con agencia 12,12. Perfecto.

[05:53] Y el código compila, funciona correctamente. Incluso tengo acceso a los

métodos de cuenta.deposita. Puedo usar todas las funcionalidades que yo ya he escrito
en este proyecto de aquí sin necesidad de volver a duplicar todo el código. Y miren,
tenemos aquí los imports. Ya mi librería automáticamente ya está dentro del build path,
por lo tanto Eclipse ya está en la capacidad de encontrar la ruta a esa librería y darme
todo lo que necesito.

[06:33] Entonces esta es la forma de consumir código creado por otros programadores.

CLASE 324 JAVA LANG

Ahora que ya sabemos cómo compartir nuestro código con otros desarrolladores, ya
sabemos cómo consumir código escrito por otros desarrolladores, solamente para
darles un contexto. Esta no es la forma más ideal de consumir, digamos archivos .jar. Es
una forma muy básica, normalmente ya existen herramientas como Maven y Gradle,
que nos ayudan a gerenciar nuestros JARs.

[00:35] Tenemos digamos un archivo como una lista de requisitos en el cual los
requisitos son JARs las librerías que necesitamos y automáticamente esa herramienta va
a descargar todas las dependencias de Internet. Eso lo vamos a ver de repente más
adelante en otros cursos. No es el foco de este curso pero sí me parece muy válido que
lo sepan.

[00:57] Existen formas mucho más óptimas de gerenciar nuestras dependencias.

Dependencia llamamos a toda librería externa a nuestro proyecto. Toda librería que
usemos que no sea escrita por nosotros es una dependencia y existen herramientas
para administrar dependencias.

[01:18] Vamos a cambiar de tema ahora. Y ya que estamos hablando de JARs, tenemos
también formas de crear JARs ejecutables. ¿Y a qué me refiero con JARs ejecutables?
Por ejemplo este archivo .jar de aquí por sí solo él no hace nada, es solamente es un
conjunto de archivos, un conjunto de clases que si las llamo puedo hacer uso de ellos,
pero si no hago nada, entonces él no va a hacer nada.

[01:48] Y aquí yo también quería explicarles cómo hacer un JAR ejecutable. ¿Ejecutable
que significa? Que si yo lo llamo, automáticamente, ejecute una acción. Por ejemplo, un
instalador. Cuando tú descargas un programa o compras algún programa, ¿qué es lo
primero que haces? Haces doble clic y él te va a abrir un instalador. [02:08] Este archivo,
tranquilamente puede ser un JAR también. Ese ya te va a hacer un instalador, es lo que
sería el equivalente del .exe de Windows, pero en el lenguaje Java sería un .jar
ejecutable. Él te puede abrir un instalador o puede ejecutar pues equis acción al
momento de ser invocado. Para esto entonces, para crear un JAR ejecutable la verdad
es que es muy simple.

[02:33] Yo voy a dar clic nuevamente, he abierto, voy a cerrar aquí un ratito, he abierto
aquí nuevamente mi proyecto de herencia polimorfismo, le voy a dar nuevamente
export. JAR file, ya justo Eclipse está recordando la decisión que yo he tomado antes,
JAR file, next. Aquí, bueno, las mismas opciones que ya teníamos antes. No, no voy a
exportar doc, tengo que estar muy seguro de eso. Y aquí le voy a dar next. Y aquí llega la
parte interesante.

[03:10] Aquí si quiero exportar, perfecto, descripción file no, le voy a dar next. Main
class. Eso es lo que yo estaba buscando, ¿qué es la main class? Vamos con la analogía
del método main. ¿Qué es el método main? El método main es el método central que va
a ejecutar una acción en nuestro código, por ejemplo, para escribir nuestras pruebas de
código, usábamos un método main.

[03:44] Ese método main tenía la funcionalidad para ejecutar los métodos que
estábamos creando e invocar las clases, entonces, a nivel de proyecto, él nos está
diciendo: okay, ¿cuál va a ser la clase que va a inicializar tu proyecto? La clase principal,
la clase main. No hemos pensado todavía en una clase que inicialice todo el proyecto
como tal.

[04:05] Pero para fines ilustrativos voy a escoger una de mis clases test para ejecutar
alguna acción. En este caso, voy a elegir TestGerente porque TestGerente ¿qué es lo que
hace ese método? Él guarda un gerente e imprime en la consola los valores que él
guardó. Y entonces, voy a elegir esa clase como main. Perfecto, escojo ahí y ahora sí le
doy finish.

[04:34] Me dice que tuvo algunos warnings, perfecto, le doy okay, y vemos aquí que él
ya tiene bytebank exportado, pero yo aquí he cometido un pequeño no error, pero para
el ejemplo que les quería dar no me va a servir mucho, porque yo necesito cambiarle el
nombre para que vean la diferencia. Entonces, a modo de repaso y rápidamente lo que
voy a hacer aquí nuevamente export, JAR file, next, y aquí le voy a dar el nombre.
Nuevamente me voy a asegurar de no exportar la documentación.

[05:08] Y aquí debo decir bytebank-ejecutable. Perfecto. Le doy next, next, la main class
y nuevamente TestGerente, okay, finish. Okay aquí, y aquí ya tengo el ejecutable. Este
exportado ya lo puedo eliminar también para no tener conflictos o alguna cosa,
conflictos no, pero problemas, porque ya no lo voy a usar en el futuro. Recuerden que
aquí en bytebank-librería yo ya tengo este bytebank-exportado con el mismo código.

[05:46] Y voy a entrar al proyecto cd Java-herencia-polimorfismo. Le voy a dar un ls y

vemos que aquí tengo mi ejecutable.jar. ¿Y a qué me refiero con ejecutable? Si yo
escribo java -jar bytebank-ejecutable.jar, vemos que él ya me ejecutó aquí un código
EJECUTANDO DESDE GERENTE, 2000.0, false.
[06:15] Quizás esto no quiere decir mucho, pero es el código que justamente yo estoy
imprimiendo aquí. Por lo tanto, ¿qué quiere decir? Yo ejecuté esta librería y
automáticamente él encontró mi clase gerente y me permitió, pues ejecutar esta lógica.
Ahora en este caso fue solamente imprimir en la consola ciertos valores, pero
tranquilamente existen librerías en Java que nos permiten crear lo que se llama la GUI,
que son las interfaces de usuario, las ventanas.

[06:51] Podemos crear una clase que cree una ventana, digamos un formulario, alguna
cosa así y ya crear programas un poco más complejos, por ejemplo eso es posible con la
librería Java Swing, ayuda mucho para esos propósitos, pero bueno, esa es la idea de los
archivos .jar.

[07:13] ¿Y cómo es que son ejecutables? ¿Cuál es la diferencia? Porque yo veo aquí que
este JAR es exactamente igualito que este JAR de acá. Voy a copiar solamente este JAR
aquí a este lib, y lo que voy a hacer es agregarlo al build path. Pero no es porque lo voy a
usar, es porque quiero que vean algo muy interesante.

[07:35] Tengo mi exportado y tengo mi ejecutable. Lo que voy a hacer ahora es ver cuál
es la diferencia de uno, por qué uno es ejecutable y el otro no. Abro aquí y el secreto
está en esta carpeta de aquí. META-INF. Aquí están los metadatos, en el archivo
MANIFEST de ese JAR.

[07:57] En el primero, en el exportado, él nos dice solamente la versión del Manifest. En

el segundo nos da la versión del Manifest y nos da información de la Main-Class. Esa es
la única diferencia que tiene un JAR ejecutable de un JAR no ejecutable, ¿no? Bueno,
con respecto a esta clase, eso sería todo.

[08:26] Lo que hemos visto es cómo crear bibliotecas, mejor en orden, hemos
documentado nuestro código, sabemos cómo crear bibliotecas y sabemos cómo
consumir bibliotecas escritas por otros programadores, y también sabemos ahora
también crear bibliotecas ejecutables.