Please enable JavaScript.

Coggle requires JavaScript to display documents.

Programador Fullstack - Coggle Diagram

- - - - ¿QUE SON?
        
        Informacion que vamos a tener en nuestro codigo y trabajaremos sobre ellos
        
        Pueden estar en el codigo directamente, NO DEPENDEN del input de usuario o datos de terceros y se los llama valores literales
        
        Son datos
        
        los vamos a leer
        
        realizaremos validaciones sobre los datos
        
        vamos a modificarlos
        
        vamos a almacenarlos
        
        le generaremos una respuesta/ output que le brindaremos al usuario a partir del input o datos que recibimos
        
        informacion que nos va a servir de base para construir y realizar las tareas que queramos
        
        Pueden venir de una fuente externa, por ejemplo una base de datos
        
        Pueden venir de la interaccion con el usuario por ej un formulario
    - - OBJETOS
      - PRIMITIVOS
        
        STRINGS
        
        Secuencia de caracteres es decir cadena de texto
        
        BOOLEANO
        
        Admite dos posibles valores: TRUE or FALSE
        
        NUMBER
        
        Decimales
        
        Infinity: valor infinito
        
        Enteros
        
        NaN: valor no numerico convierte por ej string a numero
        
        UNDEFINED
        
        Variable declarada a la que no asignamos un valor
        
        ambos representan la ausencia de valor
        
        NULL
        
        Variable declarada a la que asignamos un valor que no existe
        
        SYMBOL(ES6)
        
        se utiliza para representar un valor unico que no puede modificarse
        
        BIGINT(ES2020)
        
        se utiliza para numeros grandes que exceden la capacidad de number
      - MANIPULACION DE TIPOS DE DATOS
        
        VALORES LITERALES
        
        Directo en el codigo. No depende del input de usuario o de datos de terceros
        
        CONVERSION DE STRING A NUMBER
        
        parseInt
        
        Number()
        
        +
        
        isNan
        
        Verificamos que el valor que le pasamos al isNan no es un numero. Si no es un numero devuelve verdadero y si lo es devuelve falso
        
        CONVERSION DE NUMBER A STRING
        
        toString
        
        CONVERSION A MAYUSCULA O MINUSCULA
        
        MAYUSCULAS
        
        toUpperCase()
        
        MINUSCULAS
        
        toLowerCase()
        
        CONCATENACION
        
        Unir dos o mas strings
        
        variable + ' '+variable
        
        COVERSION A BOOLEANO
        
        boolean
        
        !!
        
        Niega dos veces
        
        El 0 siempre es false
        
        CONVERSION IMPLICITA
        
        En algunos casos, Js convierte el tipo de dato al momento de evaluar una expresion
        
        Si tenemos un signo + y valores de tipo number y string. Js convertira a string
        
        porque concatena el number y string, convirtiendo el number a string
        
        En otro caso convertira a number
        
        realiza la operacion convirtiendo el string a number
  - - - LENGUAJE DE PROGRAMACION
        
        Lenguaje formal que nos permite dar instrucciones a la computadora para que se haga algo
        
        ALTO NIVEL
        
        Similar al lenguaje natural. Deben ser interpretados por otra aplicacion a un lenguaje de bajo nivel
        
        MULTIPARADIGMATICO
        
        Existen distintos paradigmas o "estilos" a seguir al momento de programar
        
        TIPADO DINAMICO
        
        Determina automaticamente el tipo de dato asignado a una variable; NO es necesario declararlo expresamente. Tambien se puede cambiar el tipo de dato asignado al colocar una variable
        
        PROTOTIPICO
        
        Para crear estructuras de datos se basa en la creacion de prototipos
  - - - Node Js
    - - Ionic
      - React Native
    - - Js Plain
      - Js Frameworks
    - - Electron
  - - - el bloqueo de contenido en head
      - linkeamos el archivo HTML con el de Js de la manera script src="archivo"
      - SI es recomendable
      - Incorporamos nuestro codigo en un archivo Js
    - - tag: script
      - si colocamos el script en el head si es una alerta por ej no va a cargar, pero si colocamos en el body aparece la alerta y la pag carga
      - Incorporamos el codigo JS en archivo HTML directamente
      - lo recomendable es colocar el codigo JS al final, salvo que por una cuestion especifica necesitemos que se ejecute al principio
      - NO es recomendable mezclar archivos
  - - - Porcion de codigo que produce un valor y puede ser escrita en cualquier lugar donde se espera un valor
    - - Porcion a un bloque de codigo que ejecuta una accion pero no retorna ningun valor
    - - Para mostrar respuestas o capturar informacion del usuario
        
        PROMPT
        
        Abre un input al usuario para que pueda completar un campo y permite almacenar en una variable los datos que el usuario ingreso
        
        CONFIRM
        
        Pestaña de confirmacion que nos da la opcion de poner OK o Cancelar
        
        ALERT
        
        Abre una alerta en el navegador
  - - - Sirven para realizar operaciones matemáticas
        
        Depende de la cantidad de valores que necesitamos para que el operador pueda realizar su tarea
        
        UNARIOS
        
        Necesitamos solo un valor para que el operador pueda realizar la operacion
        
        -
        
        typeof
        
        +
        
        BINARIOS
        
        Necesitamos al menos dos valores para que el operador pueda realizar su tarea
        
        -
        
        /
        
        *
        
        %
        
        +
    - - Sirve para combinar dos valores booleanos y devolver un resultado verdadero, falso o nulo
        
        Depende de la cantidad de valores que necesitamos para que el operador pueda realizar su tarea
        
        BINARIOS
        
        Necesitamos al menos dos valores para que el operador pueda realizar su tarea
        
        !
        
        NOT
        
        1 more item...
        
        = = =
        
        TRIPLE IGUAL
        
        1 more item...
        
        ||
        
        O
        
        1 more item...
        
        ==
        
        DOBLE IGUAL
        
        1 more item...
        
        &&
        
        Y
        
        1 more item...
        
        < y >
        
        MAYOR Y MENOR
        
        TERNARIOS
        
        Forma que tenemos de reemplazar el IF-ELSE por una expresión, produce un valor y la funcion es identica al If- else
        
        ?
        
        Realiza una comparación o una validación y en base a eso devolver un resultado si la validación es true o otro resultado si la validacion es false
  - - - PALABRA RESERVADA
        
        Es la que permite a Js saber que en esa línea de código declaramos una variable
        
        let
        
        Nos permite reasignar el valor de la variable
        
        Puedo declarar y mas adelante añadir un valor
        
        const
        
        No puedo reasignar otro valor
        
        Usar siempre const salvo si necesito reasignar
        
        Debo declarar y asignar su respectivo valor automáticamente
        
        Var
      - NOMBRE
        
        Cuando la queramos invocar la llamamos por ese nombre
      - VALOR
        
        Valor que vamos a guardar en esa variable
  - - - If-else
        
        Si la condición determinada es true ejecuta una acción
        
        Si la condición es false se ejecuta otra condición
        
        Else if
      - For
        
        Permite hacer una iteración, es decir ejecuta una tarea varias veces hasta tanto se cumplan una determinada condición
        
        Tiene un contador que es una variable y va contando las iteraciones, cuando llega al limite de iteraciones va a parar
        
        Si tenemos de antemano la cantidad de interacciones, usamos For
      - While
        
        Si la condición es verdadera ejecuta la acción, realiza la actualización / incremento y vuelve a analizar la condición para iniciar el flujo de vuelta. Si es falsa se corta el flujo y se continua con el siguiente código
        
        El contador no esta dentro del paréntesis del while, debemos declarar por fuera
        
        Actualización (i++) dentro del while al final
        
        Si depende de una situación, si no se cuanto va a durar, ni cuando cortar, usaremos while
      - Do while
        
        Se comienza por la acción, después la actualización y luego la condición para ver si es verdadera para ejecutar de vuelta o falsa para cortar
        
        Lo que esta dentro del do se ejecuta por lo menos una vez
        
        Actualización (i++) dentro del do al final
        
        Si depende de una situación, si no se cuanto va a durar, ni cuando cortar, usaremos do while
      - Switch
        
        Recibe un valor como argumento y sobre ese valor ira evaluando distintos casos(case) y va a entrar en el caso que coincida
        
        Si ninguno de los casos se cumple, ejecuta un default
        
        Break corta la ejecución del código para mostrar solo lo que necesitamos
      - Normalizar la data, es decir el paso de minúsculas y mayúsculas
  - - - Nos permite crear un bloque de código para ejecutar una determinada actividad que se va a repetir muchas veces a lo largo de nuestro código
      - SINTAXIS DECLARACION
        
        DECLARACION
        function nombre(parametros){
        return cuerpo
        }
        INVOCACION
        nombre(argumento);
        
        nombre
        
        opcional y deben ser representativos
        
        parámetros
        
        Lista de parámetros para la función, encerrados entre paréntesis y separados por comas. Funcionan como variables
        
        function
        
        Palabra reservada
        
        llaves
        
        Las instrucciones que definen la función, encerradas por llaves
        
        return
        
        para que la función retorne/ devuelva un valor
        
        Hay que invocar la función para que realice su tarea
      - SINTAXIS EXPRESION
        
        const nombre = function(parametro){
        return cuerpo;
        };
      - SINTAXIS ARROW FUNCTION
        
        const nombre = (parametro) =>{
        return cuerpo;
        };
        
        No usa la palabra reservada function porque reemplaza la flecha
        
        Es anónima porque se le asigna una variable
      - SCOPE
        
        Es el alcance que tiene nuestras variables
        
        Scop global
        
        Todo lo que esta dentro del archivo js
        
        Scop function
        
        Lo que esta dentro de la llave de la función
        
        Scop block
        
        Lo que esta dentro de la llave de un if-else por ej y es mucho mas local que global
        
        Las variables estan afectadas por el Scop
      - HOISTING
        
        En determinados casos LEVANTA determinados valores, variables o funciones y las coloca como si estuviese al tope del código
        
        Tiene un orden, declarar variables, declarar funciones e invocar
      - TRUTHY & FALSY
        
        Convierte a valor booleano
        
        TRUTHY
        
        Convierte a verdadero
        
        FALSY
        
        Concierte a falso
        
        0, null, undefined, NaN, "", ", ``, false
  - - - SINTAXIS
        
        const miArray = [];
        
        const otroArray = new Array[];
      - ¿QUE ES?
        
        Una colección ordenada de datos
  - - - La posición del objeto no es permanente, es decir que puede cambiar
      - ¿Cómo encuentro la posición del valor del objeto?
        
        Usamos la dualidad {key: value}
    - - Implica que todos nuestros elementos van a ser objetos, estos objetos van a partir de una clase padre que va a ser la que va a declarar la forma que van a tener esos objetos y sus propiedades
    - - concepto comúnmente utilizado en diversas bibliotecas y frameworks para "extender" o combinar objetos.
      - combina las propiedades de uno o más objetos en un único objeto, lo que resulta útil para la programación orientada a objetos y la manipulación de objetos en general.
- - - - <h1></h1>: headers (titulos/ subtitulos)
      - <p></p>: parrafos
      - <img src=(url de la foto o ruta dentro de pc)/>: no tiene contenido y ceramos en la misma etiqueta, por lo que definimos que img sera con su atributo source
      - <div></div>: contenedor
      - <p> contenido </p>: etiqueta de apertura + contenido + etiqueta de cierre
      - <ol></<ol>: listas ordenadas
      - <li></li>: determinan los elementos a listar dentro de ol o ul
      - <ul></ul>: listas desordenadas
      - <span></span>: contenedor
      - <strong></strong>: negrita)
      - <i></i>: cursiva
      - <a></a>: link
      - <br></br>: salto de linea
      - <!--: comentario
      - ../ ir atras en las carpetas
      - ./ ingresar en las carpetas
      - nombredearchivo de la carpeta en la que estamos
      - form
        
        label
        
        atributo for ="nombre id"
        
        input
        
        atributo type y name
        
        placeholder
        
        select
        
        option
        
        atributo name
        
        value
        
        atributo method: get es publico y post privado
  - - - espacio que se crea dentro del elemento
    - - espacio extra fuera del elemento
    - - indica que fuente queremos usar
    - - altera los elementos en bloque convirtiéndolos en linea
      - flex-direction: que se acomode
      - Diseño responsivo
        
        Dropdown
        
        menú comprimido para dispositivos pequeños
        
        HTML: <div class="dropdown"> contiene el boton y el drop
        <button class="hover-elemento">dropdown</button> boton o cualquier elemento para hacer hover
        <div class=dropdown-content> contenedor dropdown
        <a href ="link">Link 1</a> links que nos llevan a otro lugar
        <a href ="link">Link 2</a>
        <a href ="link">Link 3</a>
        </div>
        </div>
        
        CSS:
        Al contenedor del drop y el boton: posicionamiento relativo
        Al div del drop: posicionamiento absoluto y display none
        Al elemento que hacemos hover: estilo libre
        .dropdown{
        position: relative
        }
        .dropdown-content{
        position: absolute
        display: none
        }
        .dropdown:hover{
        dropdown-content{
        display:block
        }
        }
        
        Media query: Mejora el diseño para pantalla pequeña
        
        @ media(max-width){
        Clases/ etiquetas
        }
        
        width: min-content se ajusta el tamaño al contenido
        
        576px pantalla pequeña, 768px pantalla mediana, 992px pantalla grande, 1200px pantalla xl
        
        Responsive
        
        Flex-wrap: Nowrap
        
        Flex-wrap: Wrap
        
        Es una web responsiva cunado la misma se ve bien y funcional en todos los dispositivos
        
        Podemos maquetar primero web mas grandes y con media queries las de pantallas mas pequeñas o viceversa
    - - etiqueta de navegador
    - - seccion principal de nuestro web con imagenes, texto, etc
      - brinda una introduccion de que se trata la web
    - - agrupa un tema en comun
    - - Unidad de contenido
    - - contenido menos importante que el de la pag misma
    - - final de la pagina con datos de la web
    - - permite poner un fragmento de html dentro de la etiqueta
      - src
        
        link a la parte html que deseamos que se vea
      - allowfullscreen
        
        permite pantalla completa
      - importance
        
        prioridad de descarga frente a otros elementos name
    - - focus: cuando clickeamos un elemento queda enfocado
        
        estilo:focus
        
        etiqueta:focus
      - visited: cambia el color del link cuando lo visitamos
        
        etiqueta:visited
      - hover: cuando colocamos el mouse sobre un elemento
        
        etiqueta:hover{ }
        
        cursor:pointer; cambia la flecha a mano
      - Posiciones
        
        position: relative se acomoda respecto a su padre
        
        left: se separa del lado izquierdo
        
        top: se separa de la parte superior su contenedor
        
        position: absolute se separa respecto a su ascendente mas proximo que tiene un position
        
        position: fixed deja fijo el elemento
        
        sombras
        
        box-shadow da sombra a la caja
        
        Box- shadow: 10 10 10 gray se coloca una sombra gris con difuminacion
        
        Box shadow: 10 10 gray sombra sin difuminacion
        
        box-shadow 10 10 sombra negra sin difuminacion
        
        Box-shadow: 10 10 10 10 gray sombra gris con difuminacion y alcance(tamaño)
        
        text shadow sombra texto
        
        static: se posiciona powrw defewcto los welementos
    - - Transform
        
        Traslate
        
        Mueve al elemento de su posicion original
        
        transform: translate(x,y)
        
        Rotate
        
        Rota el elemento
        
        transform: rotate(n°deg)
        
        Scale
        
        cambia el tamaño
        
        transform: scale
        
        Skew
        
        modifica los grados verticales u horizontales
        
        transform: skew
        
        Matrix
        
        combina todos los tipos de transformación
        
        transform: matrix(scaleX(), skewY(), skewX(), scaleY(), traslateX(), translateY())
      - solo transition es la abreviacion de varios elementos
        
        transition-timing-function: velocidad de transicion
        
        transition: tipo/ duracion/ transform duracion
        
        ease(por defecto): empieza lento, va mas rapido y al final vuelve a estar mas lento
        
        Linear: la misma velocidad
        
        ease-in: empieza lento
        
        ease-out: termina lento
        
        ease-in-out: lento al inicio y final
        
        cubic-bezier(n,n,n,n): valores propios
        
        div{
        transition: width(propiedad) 2s(duracion) linear(velocidad) 1s (delay);
        }
        
        transition-duration: tiempo que dura la transicion en total
        
        transition-property: la propiedad que se va a modificar durante la transicion
        
        transition-delay: tiempo que tarda en empezar a hacer la transicion
      - Define la transicion entre dos estados de un elemento y se usa a traves de alguna pseudoclase
      - Overlay
        
        <div class="container">
        . <img src="img_avatar.png" alt="Avatar" class = "image>
        . <div class = "overlay">
        . <p class = "text"> hola mundo</p>
        . </div>
        </div>
        
        Container
        
        va a tener los estilos que queramos(ej. border-radius)
        
        un posicionamiento relativo, la imagen ocupara el 100% del div (podemos poner overflow: hidden, para que no rebalse o desborde el div)
        
        Overlay
        
        cuando hagamos hover al container pondremos al 100% el width o height que pusimos inicialmente en 0
        
        inicialmente tendra un 100% de width o height y cero del otro (depende si queremos que ingrese horizontal o vertical)
        
        debemos colocar el top y left en 0 para asegurarnos que coincida con el div original y la transición que deseemos
    - - CSS
        table, tr, th, td{
        }
      - Estilos
        
        Border-collapse: collapse hace que el borde de la tabla sea mas fina, o seea una linea en el borde y no por cada elemento
        
        text-align: horizontalmente
        
        vertical-align: verticalmente
        
        para que sea responsiva: colocar un div contenedor con la propiedad overflow-x, valor auto. Asi logramos un scroll que nos permite ver toda la tabla
        
        se usa new letter
      - HTML<table>
        <tr>
        . <th><th>(columnas)
        </tr> (filas)
        <tr>
        . <td></td>(celda)
        </tr>
        </table>
      - <table>: etiqueta que engloba toda la tabla
      - tbody, thead, tfooter: si queremos usar etiquetas semanticas para determinar la finalidad de cada seccion de la tabla
      - el header/ titulo de cada columna se dará con un <th>, cada fila con un <tr> y con <td> cada celda
    - - Facilita los diseños reponsive
      - damos estilos usando clases, pero también tiene componentes pre-hechos
      - framework es una estructura que nos asiste y proviene de un modulo de software que nos sirve para el desarrollo
      - Pros
        
        Mobile first
        
        Buena experiencia de usuario (componentes/ colores intuitivos)
        
        Reutilización de código
      - Framework creado para estandarizar los estilos ej: twitter
      - Contras
        
        Hace que todas las webs sean casi iguales
        
        No tendremos un buen HTML
      - Sintaxis
        
        dentro del div podemos poner un div con clase row
        
        dentro del div clase row, ponemos columnas (col) (por defecto se pondra el mismo tamaño para cada una) - div clase col
        
        <div> con clase container