Mind map

JavaScript

Christian Osorio Spanish

Map content

JavaScript

Concepto
- Es un lenguaje ligero e interpretado, orientado a objetos con funciones de primera clase, más conocido como el lenguaje de script para páginas web.
  - Variables
    - Son contenedores donde se pueden almacenar valores.
      - Se declara con:
        La palabra clave "var"
        Tipos
        String, Number, Boolean, Array, Object
Funciones adicionales
- Interfaces de Programación de Aplicaciones del Navegador (APIs)
  - APIs de Terceros
    - Marcos de trabajo y librerías de terceros
Es
- Un lenguaje de programación interpretado
  - Orientado a:
    - objetos, basado en prototipos, imperativo
- El lenguaje de la web
Posee:
- Propiedades y métodos
Añadirlo a una página web
- Necesita el elemento <script>
  - Condicionales
    - If...else, switch
      - Funciones
        Son una manera de encapsular una funcionalidad que quieres reutilizar
        Se puede llamar la función con un solo nombre y no se escribirá el código entero cada vez que se utilice.
        Ejemplo:
        function square(number) { return number * number; }
        JQUERY
        Es
        JQuery es simplemente una librería específica de código opensource JavaScript
        Nos brinda
        Facilidad de uso y gran potencia.
        Reduce el número de instrucciones que usaríamos con JavaScript, y nos acorta esta sintaxis.
        Interactuar
        La forma de interactuar con el DOM de nuestro HTML es a través de la función $( ), un alias de jQuery ( ).
        Concepto
        Escribe menos, haz más.
        Características
        Facilidad para manipular el contenido de un documento.
        Independencia del navegador para gestionar los eventos
        Enorme posibilidad que encontramos para añadir atractivos efectos y transiciones
        Facilidad en la utilización de la técnica AJAX.
        Selectores
        "p", "#elemento1", ".clase1", "a.clase1", "[atributo], "*", this
        Eventos
        Eventos de Raton
        Teclado
        keypress, keydown, keyup
        click, dblclick, mouseenter, mouseleave
        KNOCKOUT
        ¿Qué es?
        Es una biblioteca de JavaScript que te ayuda a crear interfaces de usuario de pantalla y editor
        Modelo
        De datos subyacente limpio
        Beneficios
        KO puede ayudarlo a implementar las actualizaciones de manera más simple y sencilla.
        Conjunto completo de especificaciones
        Funciona en cualquier navegador convencional
        Compacto
        Biblioteca de JavaScript puro
        Se puede agregar encima de su aplicación web existente sin requerir cambios
        Templating
        Uso del patrón
        Model-View-ViewModel
        Historia
        Knockout fue desarrollado y se mantiene como un proyecto de código abierto por Steve Sanderson
        Características
        Seguimiento de dependencia elegante.
        Enlaces declarativos
        Trivially extensible
        Proporciona
        KO proporciona una forma complementaria y de alto nivel para vincular un modelo de datos a una IU
        AJAX
        Es
        No es una tecnología por sí misma, es un término que describe un nuevo modo de utilizar conjuntamente varias tecnologías existentes.
        Tecnologías que forma
        HTML o XHTML, CSS, JavaScript, DOM, XML, XSLT, y el objeto XMLHttpRequest.
        ¿Qué se necesita para manejar AJAX?
        Requiere un conocimiento avanzado de todas las tecnologías que forma.
        Beneficios
        Permite mejorar completamente la interacción del usuario con la aplicación
        Las aplicaciones construidas con AJAX eliminan la recarga constante de páginas
        JSON
        ¿Qué es?
        Es un formato ligero de intercambio de datos.
        Es una sintaxis para serializar objetos, arreglos, números, cadenas, booleanos y nulos.
        Basado en:
        Sintaxis de JavaScript
        ¿Qué realiza?
        Contiene métodos para analizar JavaScript y convertir valores a JSON
        Formas
        Object
        Array
        Value
        Array
        Number
        Compatibilidad
        El objeto JSON no es soportado por navegadores antiguos.
        ¿Cómo se soluciona?
        insertando una línea de código al inicio del script, permitiendo usar el objeto JSON en navegadores que no soportan su implementación de forma nativa
        ¿Cómo se llama esta técnica?
        POLYFILL
        ¿Qué es?
        Un polyfill, es una pieza de código (o complemento) que proporciona la tecnología que se espera que el navegador proporcione de forma nativa
        DOM
        Concepto
        Es una interfaz de programación para los documentos HTML y XML.
        Es:
        Un modelo de objeto de documento
        Beneficios
        Facilita una representación estructurada del documento.
        Define de qué manera los programas pueden acceder, al fin de modificar, tanto su estructura, estilo y contenido.
        Conecta las páginas web a scripts o lenguajes de programación.
        Explicación de DOM
        Una página web es un documento.
        Éste documento puede exhibirse de dos formas:
        1. En la ventana de un navegador 2. Como código fuente HTML
        ¿Qué hace DOMO entonces?
        Proporciona otras formas de presentar, guardar y manipular este mismo documento.
        Realiza una representación orientada al objeto de la página web y puede ser modificado con un lenguaje de script
        Fue pensado para:
        Para ser independiente de cualquier lenguaje de programación
        Permite un acceso a la estructura de una página HTML mediante el mapeo de los elementos de esta página en un árbol de nodos.
        Cada elemento se convierte en un nodo y cada porción de texto en un nodo de texto.
        Ejemplo:
        Se vería así:
        DOM Y JavaScript
        El contenido de la página es almacenado en DOM y el acceso y la manipulación se hace vía JavaScript
        Se representa así:
        API(web o página XML) = DOM + JS(lenguaje de script)
        Tipos de datos:
        document, element, nodeList, attribute, NamedNodeMap
        ¿Cómo se accede?
        <body onload="window.alert('Bienvenido a mi página!');">
        No se tiene que hacer nada especial para empezar a utilizar el DOM.
        Pero todos los navegadores web usan el modelo de objeto de documento para hacer accesibles las páginas web al script.
        Métodos
        JSON.parse()
        JSON.stringify()
        Estructuras
        Una colección de pares de nombre / valor
        Una lista ordenada de valores.
        La nueva capa intermedia de AJAX mejora la respuesta de la aplicación
        Significado
        JavaScript Asíncrono + XML
        Modelo AJAX
        JavaScript
        DOM
        XHTML
        CSS
        XMLHttpRequest
        XML
        JSON
        Une las todas las tecnologías
        Formulario
        submit, change, focus, blur
        Documento
        load, resize, scroll, unload
  - Eventos
    - Son estructuras de código que captan lo que sucede en el navegador, y permiten que en respuesta a las acciones que suceden, se ejecute un código.
      - Ejemplo:
        document.querySelector('html').onclick = function(){alert('Ouch!')}