luc-gh / js_advanced

Estudo avançado dos conceitos da linguagem JavaScript

js_advanced

Estudo avançado dos conceitos da linguagem JavaScript, em associação com HTML e CSS.

Códigos, conceitos abordados e visualização

DOM

• Introdução
  HTML - CSS - JS -> Visualize no CodePen
  meta: author link: style script form input class value
  padding width height vw-vh flex-box DOM acessar elementos document

• Objeto Document
  HTML - CSS - JS -> Visualize no CodePen
  table tr-td border-collapse line-height ltr-rtl span section
  .value button p position width text-align cursor margin-padding
  flex-box text-justify transition animation (:hover:active) estilo adicionado com js
  translateY min-width font document getElementById createElement appendChild
  removeChild createAttribute setAttributeNode getElementsByTagName createTextNode
  parentNode DOM direcionar estilo (.style)

• Eventos
  HTML - CSS - JS -> Visualize no CodePen
  div id class label input p
  flex-wrap display: grid grid-template-areas class - id (várias) .,#::{}
  grid-area fit-content font-weight text-shadow box-shadow
  opacity place-items justify-self text-orientation text-decoration font-display: fallback conexão com js
  MouseEvent InputEvent FocusEvent Events addEventListener
  Click MouseDown MouseUp Double Click MouseEnter MouseOver MouseOut
  Input Focus Blur chamada/função classList toggle

Chamada de API

• Exemplo simples
  HTML - JS
  h3 fetch .then .catch .json .error method/headers

Storage

• Utilidades (local/session)
  HTML - JS (local) - JS (session)
  double script imports script defer
  console.log Storage localStorage sessionStorage getItem setItem
  removeItem .clear() JSON.stringify() JSON.parse() Aplicações do Storage