Introduzione ad UmbrellaJS

Mattepuffo's logo
Introduzione ad UmbrellaJS

Introduzione ad UmbrellaJS

Programmazione, Javascript - AJAX

Come sicuramente detto in altri articoli, ho usato jQuery per parecchio tempo.

Ma penso che cominciare un progetto oggi usandolo sia un pò obsoleto.

A parte le varie librerie / framework come React, Angular, ecc, possiamo trovare alternative più leggere e più mantenute.

Oltre al fatto che di per se Javascript ormai può fare tutto.

Detto ciò oggi vi presento UmbrellaJS, una valida alternativa più leggera a jQuery.

Qui sotto un pò di codice di esempio:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Test</title>
    <script src="https://cdn.jsdelivr.net/npm/umbrellajs"></script>
    <script>
      addEventListener("DOMContentLoaded", (event) => {
        // AGGUINGE LA CLASSE A TUTTI I P
        u('p').addClass('txt_red');
        // AGGIUNGE LA CLASSE/CLASSI SOLO AL PRIMO PR
        u('p').first().classList.add('txt_bold');
        // SETTA E VISUALIZZA IL TESTO
        u('.mydiv').text('ciao');
        console.log(u('.mydiv').text());
        // SETTA E VISUALIZZA HTML
        u('.myhtml').html('<h2>ciao</h2');
        console.log(u('.mydiv').html());
        // CLICK SU BOTTONE
        u(".mybutton").on('click', e => {
          alert("Hello world");
        });
        // SUBMIT FORM
        u('form.login').handle('submit', async e => {
          const data = new FormData(e.target);
          console.log(data);
        });
      });
    </script>
    <style>
      .txt_red {
        color: red;
      }

      .txt_bold {
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <p>CIAO</p>
    <p>CIAO</p>
    <div class="mydiv"></div>
    <div class="myhtml"></div>
    <button type="button" class="mybutton">CLICK</button>
    <form method="POST" action="/" name="login">
      <input type="text" name="username" placeholder="username" required>
    </form>
  </body>
</html>

Enjoy!

Condividi

Commentami!