INICIO > WEBCODE

WebCode: artículos y reseñas de Javascript, CSS, APIs, herramientas y funciones útiles para programación de interacción web


Explico y reseño los conceptos y propiedades (mediante ejercicios) necesarios para aprovechar los lenguajes Javascript y CSS para interacción web.

George Póyla, matemático. Resolver problemas de diseño. www.duduromeroa.com

Por Eduardo J. Romero Andrade
| Guayaquil



Aclaraciones
Contenido para quienes ya comprenden y practican HTML, CSS y JS. Adjunto bibliografía al final de esta página para un estudio más amplio.



QUÉ ES CSS

El lenguaje para hojas de estilo en cascada (Cascading Style Sheets) es un código que ayuda a definir con qué colores, formas, posición dinámica y tipografías se mostrarán los elementos contenidos en una página web.

Otras propiedades también son animación de elementos, creación de módulos, organización mediante grillas, celdas, y columnas. Si se desea un estudio más profundo adjunto más abajo bibliografía amplia.

CSS INTERACTIVO

  • Intro al CSS interactivo
  • Intro al CSS 3D

HTML INTERACTIVO

  • Uso de <template>

Lenguaje XML

  • Uso de XML

Lenguaje JSON

  • Uso de JSON



QUÉ ES JAVASCRIPT

Javascript (JS) es uno de los lenguajes de programación usado para sitios web y va más allá de solo detectar y ejecutar interacciones o de recibir y transformar datos.

En las siguientes secciones explico JS basado en mis prácticas y bibliografía especializada.

Ten la libertad de hacerme observaciones/correcciones a mi correo.

MÉTODOS DE LA INTERFAZ DE VENTANA DE NAVEGADOR (WINDOW BROWSER)

  • Interfaz de ventana de navegador (Window interface)

API JS DOM (se enumeran únicamente para dividirlas en secciones)

  • API DOM 1
  • API, BOM, navigator, DOM
  • API DOM 1.4
  • Propiedades de ID, className, style...
  • API DOM 1.5
  • Acceder a nodos y elementos mediante JS DOM
  • API DOM 1.6
  • Alterar nodos y elementos mediante JS DOM
  • API DOM 1.7
  • Event listeners (escuchadores de eventos)
  • API DOM 2
  • querySelector(), querySelectorAll(), document.body, document.body.children, childNodes, innerText, getElementsByTagName(), getElementsByClassName
  • API DOM 3
  • querySelector(), querySelectorAll(), onclick(), this, getElementById().classList.add(), classList.remove(), classList.toggle(), setAttribute(), event handlers, event listeners
  • API DOM 4
  • appendChild(), event listeners, addEventListener(), onload(), DOMContentLoaded()
  • API DOM 5
  • DOM object mouseEvent
  • API DOM 5
  • DOM object mouseEvent

ESTUDIO DE APIs JS PARA INTERACCIÓN

  • Eventos (Touch events)
  • Eventos (Mouse events)
  • Eventos de halar y soltar (Drag & drop)
  • API Pointer Events
  • Combinar APIs de eventos táctiles y de puntero
  • Web Animation API
  • JS Scroll events

BIBLIOGRAFÍA

    3ra edición. 2018. Marijn Haverbeke. No starch press.
    [2] MDN Web Docs, Javascript. Mozilla Foundation.
    David Flanagan (2020). Editorial O'Reilly.
    Ved Antani, Stoyan Stefanov (2017). Packt Publishing.
    Editorial Packt.
    Information and Computation. Elsevier.
    ACM SIGCSE BulletinVolume 19Issue 1Feb. 1987