Progressbar dinamiche regolate da una funzione: come misurare le proprie competenze

FUNCTION PHP WOW!

All’ indirizzo http://umbriawayformazione.great-site.net/resume.html troviamo una bozza del mio nuovo CV, non male le barre sulla sinistra per misurare le competenze, peccato che siano tutte statiche e fatte digitando codice per ogni rappresentazione grafica! Va bene allora da aspiranti programmatori dobbiamo cercare di dinamicizzare e prova oggi e prova domani arriviamo a una evoluzione di questi tentantivi di autovalutazione con http://umbriawayformazione.altervista.org/uwcode/ajaxjson/ ma anche qui la fatica è tanta nel senso che il file json chè c’è dietro diventa lungo un KM! Ma allora come posso semplificare il lavoro? Come faccio a fare le cose celermente senza passare gli eoni a compilare base dati o documenti HTML? Niente paura le funzioni in PHP esistevano (FORSE) ancora prima che nascessi. Con le funzioni posso automatizzare i processi e renderli snelli e leggeri. Qui ad esempio abbiamo una funzione che accetta due parametri in ingresso personalizzabili a cui abbiamo dato dei valori di default e solo in fase di stampa a video possiamo decidere se lasciare intatti quei valori o cambiarli! Magia allo stato puro! Se andiamo alla pagina http://umbriawayformazione.altervista.org/uwcode/progressbar.php vediamo che in termini di prestazioni gli altri due lavori preliminari sono allo stato brado in confronto. Naturalmente abbiamo usato bootstrap perché le progressbar si possono colorare cambiando classe per cui avremo un bg-success per il verde, un bg-danger per le materie a rischio (rosso), un bg-warning per l’avvertimento in giallo e se vogliamo un blu per l’eccellenza con bg-primary. In questo modo potremmo decidere ad esempio:

bg-primary - eccellenza raggiunta nella materia
bg-success - sufficienza consolidata
bg-warning - attenzione sei molto vicino al sei ma non ci siamo ancora
bg-danger - per l'insufficienza totale e quindi occorrono interventi per risalire 

La gestione della percentuale risulta intuitiva osservando lo script:

<?php
function creaHtml($style='bg-primary', $percentuale='30') {
return '
<div class="progress">
<div class="progress-bar '.$style.'" role="progressbar" style="width:'. $percentuale.'%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
';
}
?>
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <title>Hello progressbar!</title>
  </head>
  <body style="margin:100px">
    <h2>Progressbar dinamiche per criteri di autovalutazione</h2>
<br>
barra statica 
<div class="progress">
  <div class="progress-bar bg-primary" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<br><br><br><br>
    <h2>Progressbar gestite da un funzione dove si inseriscono due parametri (il colore e l'ampiezza)</h2>
<br>
<?php
echo 'html<br>';
echo creaHtml('bg-warning','80'); 
echo '<br><br>';
echo 'js<br>';
echo creaHtml('bg-success', '50'); 
echo '<br><br>';
echo 'angular<br>';
echo creaHtml('bg-danger', '30'); 
echo '<br><br>';
?>

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

  </body>
</html>

Tengo un valore 30 di default che se non specificato nei parametri viene applicato, utilizzo in fase di costruzione della funzione delle variabili che mi funzionano da segnaposto per andare a coprire i valori dinamici che voglio occupare all’ interno del codice statico, e ho anche definito un colore di default che è bg-primary. Utilizzando quindi la potentissima opzione RETURN all’ interno di una funzione:

<?php
function creaHtml($style='bg-primary', $percentuale='30') {
return '
<div class="progress">
<div class="progress-bar '.$style.'" role="progressbar" style="width:'. $percentuale.'%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
';
}
?>

mi consente di ottenere un risultato a dir poco strabiliante e alla fine la soluzione adottata per mettere in piedi criteri di autovalutazione all’ indirizzo http://umbriawayformazione.altervista.org/uwcode/progressbar.php batte le concorrenti http://umbriawayformazione.great-site.net/resume.html e http://umbriawayformazione.altervista.org/uwcode/ajaxjson/ 3 a 0 senza l’ausilio del VAR!

JSON come base dati

Javascript per aspiranti programmatori: B – variabili e tipi di dati

All’ indirizzo: https://umbriawaycultura.wordpress.com/2018/12/10/javascript-per-aspiranti-programmatori-a-overview/ avevano introdotto JS come overview, adesso diamo un occhiataccia alle variabili e al tipo dei dati. Le variabili sono contenitori per la memorizzazione dei valori dei dati. Il valore di una variabile può cambiare nel programma. Usa la parola chiave var per dichiarare una variabile:

var x = 10;

Nell’esempio sopra, il valore 10 è assegnato alla variabile x. JavaScript è case sensitive. Ad esempio, le variabili lastName e lastname, sono due variabili diverse. In JavaScript, il segno di uguale (=) è chiamato l’operatore “assegnazione”, piuttosto che un operatore “uguale a”.

Ad esempio, x = y assegnerà il valore di y a x.

Una variabile può essere dichiarata senza un valore. Il valore potrebbe richiedere qualche calcolo, qualcosa che verrà fornito in seguito, come l’input dell’utente. Una variabile dichiarata senza un valore avrà il valore non definito.

Assegniamo un valore a una variabile e lo inviamo al browser.

var x = 100;
document.write(x);

L’uso delle variabili è utile in molti modi. Potresti avere migliaia di righe di codice che potrebbero includere la variabile x. Quando cambi il valore di x una volta, verrà automaticamente modificato in tutte le posizioni in cui lo hai usato. Ogni “istruzione” scritta è chiamata affermazione. Le istruzioni JavaScript sono separate da punti e virgola.

I nomi delle variabili JavaScript sono sensibili al maiuscolo / minuscolo. Nell’esempio seguente abbiamo cambiato x in maiuscolo:

var x = 100;
document.write (X);

Questo codice non produrrà alcun output, poiché xe X sono due variabili diverse.

Regole di denominazione

– Il primo carattere deve essere una lettera, un carattere di sottolineatura (_) o un segno di dollaro ($). I caratteri successivi possono essere lettere, cifre, caratteri di sottolineatura o simboli del dollaro.
– I numeri non sono ammessi come primo carattere.
– I nomi delle variabili non possono includere un operatore matematico o logico nel nome. Per esempio, 2 * qualcosa o questo + quello;
– I nomi JavaScript non devono contenere spazi.
-I trattini non sono consentiti in JavaScript. È riservato alle sottrazioni.

Ci sono alcune altre regole da seguire quando si nominano le tue variabili JavaScript:

– Non devi usare simboli speciali, come il mio # num, num%, ecc.
– Assicurati di non utilizzare nessuna delle seguenti parole riservate di JavaScript.

Il termine tipo di dati si riferisce ai tipi di valori con i quali un programma può funzionare. Le variabili JavaScript possono contenere molti tipi di dati, come numeri, stringhe, matrici e altro.

A differenza di molti altri linguaggi di programmazione, JavaScript non definisce diversi tipi di numeri, come interi, brevi, lunghi, virgola mobile, ecc.

I numeri JavaScript possono essere scritti con o senza decimali.

var num = 42; // Un numero senza decimali

Questa variabile può essere facilmente modificata in altri tipi assegnandole qualsiasi altro valore di tipo di dati, come num = ‘una stringa casuale’.

I numeri JavaScript possono anche avere decimali.

<code>

var price = 55.55;
document.write(price);

</code>

I numeri JavaScript vengono sempre memorizzati come numeri in virgola mobile a precisione doppia.
Le stringhe JavaScript vengono utilizzate per archiviare e manipolare il testo. Una stringa può essere qualsiasi testo che appare tra virgolette. Puoi utilizzare virgolette singole o doppie.

var name = ‘John’;
var text = “My name is John Smith”;

È possibile utilizzare le virgolette all’interno di una stringa, purché non corrispondano alle virgolette che circondano la stringa.

var text = “My name is ‘John’ “;

Puoi ottenere virgolette tra virgolette usando il carattere di escape come questo: \ “o \ ‘all’interno di virgolette singole. Poiché le stringhe devono essere scritte tra virgolette, le virgolette all’interno della stringa devono essere gestite. Il carattere backslash (\) escape trasforma i caratteri speciali in caratteri stringa.

var sayHello = ‘Hello world! \’I am a JavaScript programmer.\’ ‘;
document.write(sayHello);

Il carattere di escape (\) può anche essere usato per inserire altri caratteri speciali in una stringa. Questi caratteri speciali possono essere aggiunti a una stringa di testo utilizzando il segno barra rovesciata.

Se inizi una stringa con una sola citazione, dovresti anche terminarla con una singola citazione. La stessa regola si applica alle virgolette. Altrimenti, JavaScript verrà confuso.

In JavaScript Boolean, puoi avere uno di due valori, vero o falso. Sono utili quando hai bisogno di un tipo di dati che può avere solo uno dei due valori, come Sì / No, On / Off, Vero / Falso.

var isActive = true;
var isHoliday = false;

Il valore booleano di 0 (zero), nullo, non definito, stringa vuota è falso. Tutto con un valore “reale” è vero.

La lampadina? Ho solo escluso migliaia di tentativi prima di trovare quello che funzionava!

1foto

Nel 1850 a Pittstown – New York dopo 11 giorni di tentativi e 40 dollari spesi, il trentanovenne Isaac Merrit Singer rivoluzionando il sistema di cucitura delle macchine industriali Lerow & Blodgett brevetta una cucitrice che presenta una navetta trasversale, un braccio sospeso, un ago diritto che compie un movimento verticale su-giù, un piano su cui appoggiare il tessuto ed un piedino per trattenerlo ed evitare che venga trascinato in alto dal moto dell’ago. Nel 1851 nasce la “I.M. Singer & Company” per poi diventare nel 1853 la “Singer Manufacturing Company” ed in questo biennio la Singer diventa la macchina da cucire più venduta negli USA.

Crea un sito o un blog gratuito su WordPress.com.

Su ↑