Albrecht Duerer: il Cavaliere, la morte e l’operatore LIKE!

web design umbria

Mai sentita l’espressione il diavolo é nei dettagli? Si sente ovunque da Netflix alla TV di stato, dalle serie di telegabibbo a radio Clerici dedicata alle torte. Ma nell’ ambito front end developer che sta a significare? Risponde lo stesso Albrecht Duerer, classe ’71 (non facciamo scherzi dell’ anno millequattrocento eh) artista definito eliocentrico dalla critica perchè aveva l’ardire di far scivolare di soppiatto se stesso nelle opere senza dare troppo nell’ occhio. E’ il massimo esponente della pittura tedesca rinascimentale, immette nelle sue creazioni simbolismi e significati esoterici e lo fa tenendo conto di due grandi sguardi, quello che ogni progettista web ha ereditato anche da lui senza saperlo: la visione olistica della pianura vista dall’ alto e lo sporcarsi le mani toccando dal basso i dettagli. Se si guarda appunto l’opera dell’ incipit si scoprirà che quello che fa la differenza nella visione generale è proprio il diavolo, cioè il dettaglio. Ma tradotto nella vita complicata di un frontend developer di tutti i giorni che mi sta a significare? Che quando si mettono in piedi dei progetti sembra tutto facile, tutto olistico. E’ tutto idealizzato, sembra quasi che con uno schiocco di dita come per magia le cose si materializzino tanto per tornare all’ esoterismo sibolico dell’ artista tedesco. Invece sono i dettagli che invadono il tuo corpo, esattamente come il diavolo. Prendiamo ad esempio un problema stupido come quello di un meccanismo di ricerca da far funzionare come https://www.farwebdesign.com/umbriagallery/ : funziona bene, perchè se digito Spoleto salta fuori l’informazione che cerco e idem sia per le cittadine umbre sia per le frazioni sperdute tra le montagne. Ora prendiamo una frazione in località Nocera Umbra cap 06025 che si chiama Ponte Parrano e ipotizziamo che vittime dell’ anzianità ci ricordiamo che questo posto si chiama solo Parrano. Ora minuscolo o maiuscolo è indifferente, ma lo spazio in mezzo fa la differenza, che cosa sta succedendo? Perchè Parrano non salta fuori dalle mie ricerche e come faccio a materializzarlo nella pagina? Bella domanda, vediamo la query cosa dice:

$stmt = $dbh->query(“SELECT * FROM gallery WHERE descrizione LIKE ‘$search%'”);

web design umbriaDiavolo di un operatore like, quando qualcosa non funziona c’è un solo modo per risolvere il problema, ossia ogni frontend developer che non è nato da un falegname e una donna pia e misericordiosa deve andare a cercare quello che gli serve, consultare documentazioni varie e assortite presenti sul web (un imprenditore spietato potrebbe benissimo recidere il cavo della connessione della sua azienda e scoprirebbe in seguito ad un annuncio di selezione pubblicato su uno dei tanti siti di ricerca personale, che non esistono candidati ideali degni di essere assunti a 5000 euro al mese senza che possano cercare in rete le informazioni per risolvere un problema, ed è per questa ragione che un sito come https://stackoverflow.com/ ha così tanto successo, perchè milioni di piagnistei di aspiranti frontend developer trovano conforto in cerca di soluzioni!). Ora dobbiamo capire come funziona il meccanismo nel suo insieme ma poi bisogna prendere il diavolo per le corna. La pagina funziona che in ingresso raccoglie il risultato dello SPARO effettuato dal bottone SEARCH del FORM, questo proiettile viene accolto a braccia aperte con l’espressione:

if (!isset($_GET[‘search’]) || $_GET[‘search’] == null) {
header(“Location:404.php”);
} else {
$search = $_GET[‘search’]; }

che sta a significare se la variabile superglobalse $_GET è diversa da piena (presenza del punto esclamativo di nuovo un dettaglio da non trascurare!) oppure é nulla, ossia se una delle due condizioni diventa vera (OR logico espresso da || significa appunto che basta che solo una delle due condizioni si trasformi in reale) devi annullare la ricerca e tramite una istruzione javascript (header location) devi rimandare l’utente quasi al mittente, ossia mandalo sulla pagina 404.php, altrimenti (che è quella che interessa a noi) la variabile $search diventa uguale al valore della $_GET[‘search’]; ora essendo questo un bel diavolo da gestire, se torniamo indietro e guardiamo la query scopriamo che l’immonda creatura di variabile è proprio inserita dopo l’operatore LIKE e tuttavia continua a sfuggirci qualcosa…ma cosa? Allora bisogna studiare non c’è altro modo, altrimenti da animali onniscienti potremmo fare il mestiere di messia e profeta in terra non quello di frontend developer:

L’operatore LIKE utilizza due tipi di caratteri jolly per verificare le uguaglianze parziali. I due caratteri sono il simbolo percento ‘%’ e l’underscore ‘_’. Il primo carattere jolly sostituisce un insieme di caratteri, il secondo si limita a sostituirne uno solo. Il carattere jolly % aggiunto all’inizio o alla fine (o entrambi) di una stringa consentirà che 0 o più di qualsiasi carattere prima dell’inizio o dopo la fine del modello corrisponda.

Ok dopo aver cosparso con la conoscenza tecnica di internet il nostro diavolo siamo colti da una improvvisa intuizione e scriviamo questo codice che sta a significare “stupida macchina includi nella mia stringa di ricerca tutto il conoscibile, nel senso che adesso mi tirare fuori anche delle stringhe parziali senza senso del tipo ole per estrapolare SPoleTO, per esempio“:

$stmt = $dbh->query(“SELECT * FROM gallery WHERE descrizione LIKE ‘%$search%'”);

web design umbriail risultato finale è degno di un esorcismo, ovviamente prima di mandare la modifica in produzione ci preoccuperemo di risolvere il locale tramite XAMPP o altri software a corredo delle situazioni che sembrano generarsi da sole quando si lavora su progetti concreti che all’ inizio erano pianificabili con estrema facilità anche nelle tempistiche. Per esempio, adesso come faccio a fare ricerche multiple? Ossia se volessi anche cercare come CAP nello stesso form lo posso fare e se si come? Scarichi ormai dall’ impresa di aver riportato il diavolo di Albrecht Duerer nell’ incisione il Cavaliere, la morte e …. web design Umbria delega questa incombenza in uno dei prossimi post, al momento l’obiettivo che ci eravamo prefissi è stato raggiunto, adesso anche lo smemorato può trovare anche una minuscola frazione umbra dal nome composito! La conclusione è che non si può sapere tutto di tutto, soprattutto in un settore dove al forntend developer è richiesto dal mercato di essere uno e trino e deve conoscere tutto della Nina, la Pinta e la Santa Maria. Quando non si sa o non si ricorda qualcosa per risolvere un problema bisogna consultare la documentazione!

Immobilità latente, pericolo costante: perchè l’allenamento quotidiano nella propria disciplina ci sprona a perfezionare la tecnica!

web-design-umbria

Che sia sport, lavoro, passione o attività atipica c’è sempre da imparare quando si esplora e ci si allena a cercare nuove situazioni o soluzioni per chi é dentro al working progress formativo perenne. Quando non ci si allena e ci si ferma si perde l’attitudine al combattimento. Prendiamo i problemi risolti per realizzare la gallery all’ indirizzo https://www.farwebdesign.com/umbriagallery/ allestita per fare un pò di ripasso. Se hai perso l’allenamento con php e mysql un semplice lavoro di poche ore rischia di debordare perchè per strada incontri dei problemi che hai già risolto ma che non ti ricordi bene come risolvere ancora, nello specifico:

web-design-umbriaCome si recupera un valore GET per comporre una pagina che deve servire da allunaggio per quindici elementi che formeranno 15 pagine tutte diverse? Come mai la costruzione dinamica di un link o di una immagine non viene mai risolta al primo colpo quando cerchi di recuperare dei valori da un DB? La paginazione degli elementi è stata allestita per evitare che quindici record scorrano a video come un lenzuolo? Quando estrapolo i dati dalla query per la visualizzazione è meglio incastrare PHP dentro la parte statica HTML quando voglio comporre il div critico intercalando le graffe in chiusura e riapertura nei punti giusti o é meglio creare un unico blocco di codice PHP e sparare tutto l’HTML risultante con il classico comando ECHO?

Tolte le grane iniziali per comporre il DB che tolgono tempo, occorre valutare bene anche l’uso degli strumenti per mettere in piedi una gallery come quella presente su web design Umbria:

 – ok per w3css così per il vestito impariamo altre sfumature nel lavoro del sarto

– ok a visual studio code che sta guadagnando terreno anche tra i concorrenti (il vero professionista usa PHP storm come strumento per editare il codice)

– ok per i contenuti estrapolati sul network umbriaway consulting serviti per comporre il DB e quindi anche tutto quello che c’è dentro la cornice.

– ok anche a pò di passione ed entusiasmo perchè questa gallery in realtà si può riutilizzare con opportuni cambiamenti come struttura base per altri ottantacinquemila progetti!

Quindi la FAMOSA RICETTA PER FARE LA TORTA  prevede come fasi consequenziali:

  • pianificazione idea progetto
  • progettazione del db (nome dei campi, tipo di dati)
  • creazione della grafica per il db
  • scrittura del db come inserimento di dati
  • scrittura del file di connessione e inclusione dello stesso sulla pagina principale
  • recupero dei TAG W3CSS per imbastire la pagina principale
  • individuare la zona critica dove posizionare gli elementi facendo molta attenzione a non alterare la struttura
  • incastrare la nostra query di lettura dati nel punto giusto facendo molta attenzione a dove e come si interviene
  • provare la pagina e imprecare (bonariamente)
  • vedere perchè ci segnala errore da qualche parte: hai inserito una virgoletta di troppo per esempio?
  • Tornare sulla pagina e idolatrarsi con quanto sono figo
  • pensare a come gestire quindici contenuti diversi che al cliccare della pagina mi fanno allunare su un unico punto
  • realizzare un meccanismo di sparo del campo univoco chiave primaria ID che tramite il metodo GET transiterà via link verso la pagina di destinazione
  • recuperare la variabile ID per inserire il valore selezionato nella query di lettura dati dove questa volta comparirà la clausola WHERE id=’$id’ di fondamentale importanza per centrare il nostro obiettivo
  • se andrà tutto bene (ancora?!) allora risolvere il problema paginazione passando prima per un caffè aromatizzato allo zenzero per trovare energie e finire il progetto
  • sistemare link e immagini con php in chiave dinamica

controllo finale e frustrazione anche per non essere riusciti a implementare il meccanismo di selezione arbitrario, ossia l’utente quante immagini deve vedere a video, cosa non facile da fare all’ interno della stessa pagina senza creare diverse pagine con il valore di $limit sempre diverso. Forse è un bene che non sia finito tutto perfetto, perchè in questo modo il cervello continua a rimanere attivo in cerca di risposte!

web-design-umbriaUn applicativo che tanto tempo prima finivate in 4 ore qui ha richiesto dopo tanto tempo di inattività con php e mysql otto ore di scontri con entità digitali ultratterestri non ben precisate. Quindi mai perdere l’allenamento! In ogni caso come chiede il capo di Camelot Artù al suo mago Merlino in Exalibur film degli anni ottanta di Borman, alla domanda Artù quale è la prima qualità di un potenziale sviluppatore frontend (lì si parlava di cavalieri) si risponde con: la sua capacità di recuperare in fretta informazioni che ha già visto e quindi anche spulciare la documentazione e la marea di dati presenti in rete per risolvere un problema, tra cui anche il mitico ospedale simbolico per sviluppatori https://stackoverflow.com/

Final SASS con Funzioni, Placeholder e Import: ma la fine di un viaggio é solo l’inizio!

web design umbriaPer completare un overview didattico con SASS ci mancano le funzioni, i placeholder e gli import. Abbiamo visto come configurare l’ambiente di sviluppo (la parte più complicata https://umbriawayfidelizza.wordpress.com/2020/05/10/quando-il-signore-dei-fogli-di-stile-il-settimo-giorno-creo-sass/ poi abbiamo scandagliato le variabili https://umbriawayfocus.wordpress.com/2020/05/10/sass-e-le-variabili-come-passare-da-una-fiat-500-a-una-macchina-forgiata-a-maranello/ ci siamo spinti ad analizzare le nidificazioni https://umbriawaynoir.wordpress.com/2020/05/10/nesting-come-nidificazione-ovvero-quando-la-scatola-dentro-la-scatola-ospita-un-altra-scatola-e-il-tutto-si-riduce-in-poche-righe-di-codice/ abbiamo visto i mixins, blocchi di codice riutilizzabili https://umbriawayvendita.wordpress.com/2020/05/10/mixins-sass-e-sai-cosa-bevi/ e infine abbiamo visionato l’estensione delle classi con https://umbriawayvalorizza.wordpress.com/2020/05/11/estendere-le-classi-extend-con-sass/. I blocchi della pagina statica non sono cambiati rispetto alle trascrizioni della pagina precedente per cui limitiamoci a visionare il seguente esempio per le FUNZIONI, indirizzo https://www.farwebdesign.com/projectsass/function/ . Qui la particolarità è che se io sto disegnando una User Interface e voglio focalizzarmi su una serie di elementi che in prospettiva devono rimanere dimensionalmente intonati, posso dare la cera lacca ai capelli con le funzioni. Spiegano meglio la metafora ipotizziamo di avere una header che ospita una intestazione con un font grande sessanta pixel. Se all’ interno di una sezione o di una news sottostante ho un testo che vorrei dimensionare come fisso indipendentemente dalle variazioni che apporterò sulla header, posso impostarlo magari settando una semplice funzione che divide il valore dell’ inestazione per due a prescindere:

$color-primary: orange;
$color-secondary: gray;
$color-tertiary: royalblue;

$font-lg: 40px;
$font-md: 30px;
$font-sm: 20px;

.nav {
background-color:
mix(blue, green, 10%);

ul li {
list-style: none;
}

a {
text-decoration: none;
font-size: $font-sm;
color: $color-secondary;

&:hover {
color: $color-tertiary;
}
}
}

.heading {
color: $color-primary;
font-size: $font-lg;
background-color: $color-secondary;
text-align: center;
}

@function fontSize($size: 25px) {
@return $size * 2;
}

h1 {
@extend .heading;

&:hover {
background-color: green;
}
}

.footer h3 {
@extend h1;
}

.banner p {
font-size: fontSize($font-sm);
}

.footer p {
font-size: fontSize(30px);
}

dove da notare c’è:

@function fontSize($size: 25px) {
@return $size * 2;
}

che in questo caso moltiplica per due un valore AUTOMATIZZANDO UN PROCESSO, perchè a questo servono le funzioni, assolvono compiti specifici tra i più svariati come una pubblicità mandata in loop a intervalli regolari su una emittente privata, per esempio. Le funzioni ritornano una serie di istruzioni lì nel punto esatto in cui sono invocate. In particolare la funzione viene richiamata (semplicemente invocando il nome della funzione) in diverse situazioni dove in ingresso sono specificati degli argomenti:

.banner p {
font-size: fontSize($font-sm);
}

.footer p {
font-size: fontSize(30px);
}

per uno più esteso di function con tutte le opzioni disponibili si rimanda alla documentazione di SASS perchè appunto il materiale è vasto e richiede di volta in volta di essere estrapolato nei suoi meccanismi base: https://sass-lang.com/documentation/at-rules/function. Passiamo ai selettori placeholder. Spesso durante la conversione da scss a css potrebbe generarsi codice non strettamente necessario. Per ovviare a questo tipo di situazione entrano in gioco i SELETTORI PLACEHOLDER, esempio https://www.farwebdesign.com/projectsass/placeholder/ . La meccanica di questa direttiva è molto ben spiegata in questo articolo https://www.mrwebmaster.it/css/direttiva-extend-placeholder_12629.html, dove viene introdotto il carattere % per aggirare gli ostacoli sulla estensione della classe, nell’ esempio specifico visto sopra il file scss è infatti:

$color-primary: orange;
$color-secondary: gray;
$color-tertiary: royalblue;

$font-lg: 40px;
$font-md: 30px;
$font-sm: 20px;

.nav {
background-color:
mix(blue, green, 10%);

ul li {
list-style: none;
}

a {
text-decoration: none;
font-size: $font-sm;
color: $color-secondary;

&:hover {
color: $color-tertiary;
}
}
}

%heading {
color: $color-primary;
font-size: $font-lg;
background-color: $color-secondary;
text-align: center;
}

h1 {
@extend %heading;

&:hover {
background-color: green;
}
}

.footer h3 {
@extend h1;
}

da notare il @extend %heading; che appunto risolve il problema della ridondanza. Infine parliamo di IMPORT E PARTIAL , esempio https://www.farwebdesign.com/projectsass/import/ ; Proprio come i CSS, Sass supporta anche la direttiva @import. La direttiva @import consente di includere il contenuto di un file in un altro. La direttiva CSS @import ha un grosso svantaggio a causa di problemi di prestazioni; crea una richiesta HTTP aggiuntiva ogni volta che la chiami. Tuttavia, la direttiva Sass @import include il file nel CSS; quindi non è necessaria alcuna chiamata HTTP extra in fase di esecuzione! Una spiegazione chiara di tali principi possiamo ritrovarla qui https://www.w3schools.com/sass/sass_import.asp dove consigliamo anche di seguire i tutorial e l’iniziazionebase su SASS: https://www.w3schools.com/sass/sass_intro.asp . Mettendo in gioco Pareto e wikipedia, il principio di Pareto è un risultato di natura statistico-empirica che si riscontra in molti sistemi complessi dotati di una struttura di causa-effetto. Il principio afferma che circa il 20% delle cause provoca l’80% degli effetti. Questi valori vanno da intendersi come qualitativi e approssimativi. Esso prende il nome da Vilfredo Pareto (1848-1923), uno dei maggiori economisti e sociologi italiani e trova applicazione in una sorprendente moltitudine di ambiti e discipline. Qui il venti per cento di acquisizione sull’ ottanta per cento di esplorazione didattica ce lo siamo portati a casa, in particolare l’aspetto più complicato dell’ intera faccenda SASS è legato alla configurazione dell’ ambiente di sviluppo, vedere prima puntata https://umbriawayfidelizza.wordpress.com/2020/05/10/quando-il-signore-dei-fogli-di-stile-il-settimo-giorno-creo-sass/ . Superato l’ostacolo CLI dopo è solo sperimentazione di variabili, nesting, mixin, funzioni, import, placeholder e PARTIAL per segmentare il codice, vedere https://www.w3schools.com/sass/sass_import.asp ; sostanzialmente il PARTIAL in SASS compila tutti i file .scss. Tuttavia, quando si desidera importare un file, non è necessario che il file venga trasferito direttamente. Sass ha un meccanismo per questo: se si avvia il nome file con un trattino basso, Sass non lo compila, I file chiamati in questo modo sono chiamati parziali in Sass. Pertanto, un file Sass parziale viene denominato con un trattino basso iniziale.

CONSLUSIONI: abbiamo preso confidenza con uno strumento potente, necessario come arma da integrare nel proprio arsenale di conoscenze web. Sappiamo che l’argomento è molto complesso e ben lontano dall’ esaurirsi da questa trattazione, del resto la documentazione presente in rete per approfondire questi temi non manca. Ci siamo fatti una idea generale del suo funzionamento, abbiamo volato e visto la foresta dall’ alto toccando di volta in volta qualche albero abbassandoci di quota per poi risalire e approdare altrove, abbiamo ritocatto file e provato variazioni di codice, abbiamo costruito una mappa generale e definito il campo di gioco. A questo punto se subentrasse la necessità di integrare (anche) SASS nei nostri progetti sappiamo dove andare a parare. Non ci resta che prepararci per il passo successivo, che è quello di impugnare una lente di ingrandimento, uscire da una visione filosofica olistica e incominciare a vedere i singoli dettagli della corteccia quando dovesse subentrare questa esigenza!

Viverre pericolosamente con OOP in PHP, costruttori e distruttori, quarta puntata

All’ indirizzo https://umbriawayvalorizza.wordpress.com/2020/04/20/vivere-pericolosamente-con-le-classi-php-terza-puntata/ abbiamo visto come implementare METODI all’ interno di una CLASSE. A questo punto non ci resta che approfondire un importante concetto, quello del COSTRUTTORE. Prendiamo in esame questa classe:

class gm
{
public $nome;
public $cognome;
public $elo;
}

$gm=new gm();
$gm->nome=”Fabiano”;
$gm->cognome=”Caruana”;
$gm->elo=2999;

che cosa succede quando scrivo $gm=new gm(); fuori dal blocco per istanziare l’oggetto fisico figlio della classe? E’ come se ordinassi di creare qualcosa che poi alloggerà in memoria, di fatto sto costruendo dal nulla un oggetto. Ma allora se posso far nascere un oggetto posso anche inizializzare la classe con un costruttore che anzichè farmi richiamare la funzione manualmente come accadeva negli esempi presenti in https://umbriawayvalorizza.wordpress.com/2020/04/20/vivere-pericolosamente-con-le-classi-php-terza-puntata/ mi carica direttamente delle istruzioni e mi inizializza l’oggetto secondo le mie modalità?

Vediamo questo esempio aggiungendo del codice sempre in http://phptester.net/:

class gm
{
public $nome;
public $cognome;
public $elo;

function __construct($n, $c, $e)
{
echo “ORA nasce l’oggetto GM”;
$this->nome=$n;
$this->cognome=$c;
$this->eta=$e;
}
}

//qui siamo usciti dalla classe e istanziamo l’oggetto

$gm=new gm(“Michele”, “Godena”, 2500);

var_dump($gm);

qui applico il metodo costruttore function __construct che assegna i valori iniziali con le proprietà dell’ oggetto, dopodichè contrariamente a quello che succedeva negli esempi precedenti qui siamo in grado di EVOCARE le proprietà della classe semplicemente istanziando l’oggetto con la parola chiave NEW che inietta nell’ output le nostre priorità di visualizzazione in maniera del tutto automatica, senza richiamare nessun nome di funzione. A questo punto il programmatore talentuoso potrà fare la domanda “ma se esiste un metodo costruttore esiste anche un metodo distruttore?”. Certamente vediamo un esempio:

class gm
{
public $nome;
public $cognome;
public $eta;

function __construct($n, $c, $e)
{
echo “ORA nasce l’oggetto $n $c <br>”;
$this->nome=$n;
$this->cognome=$c;
$this->elo=$e;
}

function __destruct()
{
echo “*** $this->nome $this->cognome viene distrutto *** <br>”;
}

}

$gm=new gm(“Fabiano”, “Caruana”, 1987);

var_dump($gm);

La funzione costruttore accetta tre parametri in ingresso. Che cosa vedrò a video dopo aver inizializzato un nuovo oggetto che questa volta ha anche il metodo __destruct() incluso nella classe?

ORA nasce l’oggetto Fabiano Caruana
object(gm)#1 (4) { [“nome”]=> string(7) “Fabiano” [“cognome”]=> string(7) “Caruana” [“eta”]=> NULL [“elo”]=> int(1987) }
*** Fabiano Caruana viene distrutto ***

Sostanzialmente prima viene creato e inizializzato l’oggetto, poi eseguo il metodo var_dump() per vedere il tipo di dati presenti nell’ oggetto $gm dopodichè il costruttore finita la sua missione deve lasciare il posto al distruttore che non fa altro che eliminare dalla memoria l’oggetto.

Javascript e le regular expression parte due: interrogare una stringa

Dopo aver esplorato il potenziale delle espressioni regolari all’ indirizzo https://www.umbriaway.eu/2020/04/07/javascript-e-le-regular-expression-illuminazioni-celesti-pronte-all-uso/ , prendiamo in esame una ulteriore applicazione, quella dell’ interrogazione delle stringhe. Nell’ articolo precedente ci siamo soffermati in particolare sul metodo TEST messo a disposizione dall’ oggetto regular expression, ma di fatto abbiamo a disposizione molte frecce utili come il metodo SEARCH per esempio. Del resto l’uso delle espressioni regolari per interrogare una stringa è aggiuntivo rispetto a tutta una serie di funzioni messe a disposizioni da javascript per modellare le stringhe per l’appunto come substring () che estrapola pezzi di stringa anche inserendo dei parametri tra le parentesi, ossia dicendo da dove iniziare e cosa cercare, oppure la proprietà LENGHT che ci fa tirare fuori la lunghezza in caratteri o anche CHARAT per concatenare in coda altre stringhe al posto del consueto PUNTO o anche SLICE (per dividere in pezzi) piuttosto che REPLACE (che sostituisce) o INCLUDES(“li”) che circoscrive tra parentesi degli elementi specifici, o ancora TOUPPERCASE per trasformare tutto in maiuscolo o TOLOWERCASE per trasformare in minuscolo o piuttosto INDEXOF (“o”) che tira fuori l’indice di un certo carattere o tanto altro come STARTSWITH che interroga una stringa a partire da una data posizione. Insomma con la manipolazione classica delle stringhe abbiamo a disposizione una globalità di metodi da scrivere con la sintassi a gobba di cammello (ad esempio toUpperCase) che ricorrere alle regular expression è una risorsa aggiuntiva però molto utile da conoscere. Abbiamo visto che le regular inseriscono tutti i criteri che l’utente deve rispettare per inserire i dati all’ interno del blocco /……./ e alla fine potremmo anche inserire dei parametri del tipo /……./ g oppure /……./i o anche /………/m che significa rispettivamente una ricerca globale nel contesto analizzato, oppure una situazione no case sensitive nel caso della i dove non ci interessa fare differenza tra maiuscole e minuscole o indicazioni per la gestione multinlinea per la m finale. A questo punto prendiamo ad analizzare una stringa dove sono presenti dei nomi, quindi ipotizziamo di dover lavorare sulla seguente frase dove sono presenti tre nomi che vorremmo estrapolare per esempio dal contesto:

Il sodalizio di questi tre nomi Tizio proveniente da non si sa dove, Caio che arriva dall’ isola che non c’è e Sempronio è ormai consolidato da secoli. Oggi l’espressione si utilizza per citare tre nomi comuni qualsiasi, persone ipotetiche che servono come esemplificazioni schematiche o discorsive…

quindi dichiariamo una variabile e definiamo il suo contenuto usando gli apici ` del nuovo ecma script sei che si ottengono con ALT 96 da tastiera:

var testo = `Il sodalizio di questi tre nomi Tizio proveniente da non si sa dove, Caio che arriva dall’ isola che non c’è e Sempronio è ormai consolidato da secoli. Oggi l’espressione si utilizza per citare tre nomi comuni qualsiasi, persone ipotetiche che servono come esemplificazioni schematiche o discorsive`;
document.write(testo);
document.write(“<br><br>”);

Dopodiché dichiariamo una variabile regularexpression che conterrà al suo interno i criteri di ricerca. Per tirare fuori i nomi vediamo che abbiamo un appiglio e cioè quello delle lettere maiuscole visto che i nomi iniziano in questo modo per cui il criterio della stringa dovrà stabilire che serviranno delle lettere maiuscole a sostegno:

var regularexpression = /[A-Z]/;

per capire meglio questa sintassi si faccia riferimento all’ analisi già messa in atto all’ indirizzo https://www.umbriaway.eu/2020/04/07/javascript-e-le-regular-expression-illuminazioni-celesti-pronte-all-uso/ qui semplicemente stiamo dicendo al nostro pattern che l’utente dovrà digitare delle lettere maiuscole all’ interno del campo. Ma non basta perchè i nomi sono seguiti da lettere minuscole e quindi dobbiamo dire al pattern che ALMENO UN CARATTERE minuscolo dovra essere presente a sostegno dopo il primo blocco e questo lo si ottien tramite il +, quindi la nostra formula magica diventa:

var regularexpression = /[A-Z][a-z]+/;

a questo punto aggiungiamo un modificatore alla fine per dire che ci interessa sottoporre questa espressione contestualmente a tutta la globalità del testo presente e questo comando viene semplicemente messo in atto inserendo una g finale:

// inizio script

var regularexpression = /[A-Z][a-z]+/g;

a questo punto possiamo usare il metodo SEARCH per estrapolare la prima occorrenza dove verrà individuata la prima maiuscola quindi:

var exp = /[A-Z] [a-z]+/g;
risultato = testo.search(exp);
document.write(risultato);
document.write(“<br><br>”);

// fine script

che cosa vedrò a video come risultato? Un bel numero zero e il motivo è evidente perché la frase in posizione zero inizia con una maiuscola quindi ripetiamo l’esperimento portando a minuscola la prima lettera. Ripetendo l’esperimento dopo un aggiornamento a video scopro che quello che ottengo adesso è un bel 32 che sta a significare che la prima lettera maiuscola che incontra parte dalla posizione 32 partendo da zero, provare per credere, pardon contare per credere. Infatti la prima lettera maiuscola di Tizio si trova proprio in posizione 32 e questo non è male come punto di partenza per le nostre ricerche. Ma se volessi qualcosa di più potente che mi dice quali sono tutti gli elementi? dovro usare il metodo match al posto di search:

var exp = /[A-Z] [a-z]+/g;
risultato = testo.match(exp);
document.write(risultato);
document.write(“<br><br>”);

che cosa ottengo questa volta a video? Il browser mostrerà: Tizio,Caio,Sempronio,Oggi non male vero? Se volessi tradurre il mio pattern che ha come criterio la ricerca di una maiuscola seguito da minuscole in una ricerca di occorrenze intese come array? Potrei aggiungere

document.write(“Trovate “+res.length+” occorrenze <br>”);
document.write(res);
document.write(“<br><br>”);

il browser a video mostrerebbe:

Trovate 4 occorrenze
Tizio,Caio,Sempronio,Oggi

essendo il tutto diventato un array adesso è semplice estrapolare con operazione mirate elementi target. Per esempio se volessi estrapolare solo Caio che è il primo elemento dell’ armadio partendo da zero mi basterebbe scrivere:

document.write(res[1]);
document.write(“<br><br>”);

per ottenere la scritta CAIO. E se volessi estrapolare un solo elemento alla volta dalla lista array? Lo posso usare utilizzando il metodo EXEC tipico delle espressioni regolari che mantiene memoria di quanto fatto precedentemente:

document.write(exp.exec(testo));
document.write(“<br>”);

Ok adesso proviamo a fare un ultimo esperimento finale, togliamo la g da:

var exp = /[A-Z] [a-z]+/g;

che cosa otterrei a video ad esempio per il metodo EXEC? La domanda ai posteri ma intuitivamente possiamo già capire la portata di quel piccolo modificatore o punto G: EXEC non conserverebbe memoria delle sue operazioni precedenti per esempio da qui l’importanza di saper mettere modificatori performanti quando richiesto.

PHP, OOP, magic method e costruttori

Articoli precedenti su tema OOP:

https://umbriawayinfo.wordpress.com/2019/04/07/programmazione-procedurale-oppure-oop-this-is-the-problem/

https://umbriawaypotenzia.wordpress.com/2019/04/07/php-versione-sette-introdotte-nuove-direttive-per-trasformare-il-linguaggio-in-fortemente-tipicizzato/

https://umbriawaysemplifica.wordpress.com/2019/04/08/ambito-di-visibilita-delle-variabili-in-php-public-protected-private/

web developer umbriaVediamo adesso esempi visti negli articoli precedenti dove è palese che la definizione delle proprietà viene richiesta all’ utente ma che fare quando vogliamo ottenere un oggetto compiuto che abbia al suo interno già le proprietà inizializzate e definite con dei valori senza dover accedere all’interno della classe e settare queste variabili? Si ricorre ai metodi magici di PHP che iniziano con __ (due volte underscore) in questo caso scomodiamo il metodo COSTRUTTORE. Senza il costruttore dobbiamo andare noi a definire i valori delle proprietà di volta in volta, con quelle ambiguità legate alla visibilità delle variabili che possono indurci all’ errore senza l’uso della parola chiave THIS che fa riferimento all’ oggetto corrente quando non abbiamo a che fare con PUBLIC:

/*
<?php
class Libro {
public $titolo;
public $autore;
public $codiceisbn;
public $prezzo;
public $quantita;

}

output indirizzo: https://www.farwebdesign.com/PHPOOP/9/index.php

<?php
require_once “classi/Libro.php”;

$nlibro = new Libro();
var_dump($nlibro);
$nlibro->titolo = ‘Sandokan’;
$nlibro->autore = ‘Salgari’;
$nlibro->codiceisbn = ‘123ASWE’;
$nlibro->qta = 10;
echo “<br>”;
var_dump($nlibro);

*/

mentre con il costruttore caratterizzata dalla sintassi public function __construct($tit,$aut,$cod,$qta=1) ci accingiamo a creare un oggetto completo che ha le sue proprietà inizializzate e definite, senza dover intervenire in corsa:

/*

<?php
class Libro {
public $titolo;
public $autore;
public $codiceisbn;
public $prezzo;
public $quantita;
public function __construct($tit,$aut,$cod,$qta=1) {
$this-> titolo = $tit;
$this-> autore = $aut;
$this-> codiceisbn = $cod;
$this-> quantita = $qta;
}
public function getTitolo() {
return $this->titolo;
}
}

output con index1.php indirizzo https://www.farwebdesign.com/PHPOOP/9/index1.php, da notare il Sandokan finale dovuto alla stampa dell’ istruzione:
echo $nlibro->getTitolo();

<?php
require_once “classi/Libro1.php”;

$nlibro = new Libro(‘Sandokan’,’Salgari’, ‘1234ASB’);
var_dump($nlibro); //il var_dump è una funzione che stampa il tipo di dati
echo “<br>”;
echo $nlibro->getTitolo();

*/

Con new creiamo una istanza della classe, ma questo sistema non ci fa inizalizzare tutte le proprietà del nostro oggetto e i valori delle variabili devono venire precisati dopo, mentre con l’introduzione del costruttore creo un oggetto già personalizzato sulla base dei parametri che gli vado a passare. Dopo la parola NEW, il metodo costruttore forgia il nostro oggetto inserendo dei valori, ne consegue che questo metodo NON PUO’ RESTITUIRE DEI VALORI perchè non fa altro che dare forma compiuta al nostro oggetto con dei valori assegnati alle proprietà. Il costruttore che è la prima funzione che viene richiamata in una classe inizializza tutte le nostre variabili in una sola stringa. A questo punto non ci resta che perfezionare la nostra classe libro anche in ambito sicurezza, ciò verrà affrontato in una delle prossime puntate!

Ma come hai fatto ad allineare tutti gli articoli su una unica riga? Ma il float come proprietà con i CSS la usi?

Diciamocelo la vita non sarebbe la stessa senza i CSS, certo é roba leggerina più per web designer piuttosto che per web developer, ma hanno un grande potenziale per rendere graficamente accattivanti pezzi di codice grezzo che senza un vestito ammiccante darebbero poca soddisfazione nello sviluppo web in Umbria. Vediamo questo all’ indirizzo: http://www.farwebdesign.com/css/aforismi/…verrebbe da chiedere ma come si fa ad allineare tutti gli articoli su unica riga oppure come si fa a delimitare i div con il bordino e il radius angolare? Come faccio agestire le immagini? Come faccio a centrale tutto il materiale più a destra piuttosto che sopportare passivamente un allineamento a sinistra che mi viene proposto in automatico? Prima di rispondere a tutte queste domande con web developer Umbria chiediamoci prima se hai fede scacchisticamente nel calcolo delle varianti. Mettiamo il caso che ti stai giocando una posizione tipo http://www.chessgames.com/perl/chessgame?gid=1152906 e dici ok adesso metto il cavallo nella casa c3 confidando sul fatto che non posso perdere d4 a causa del trucchetto tattico scacco in g6…ebbene tutta questa superficialità da parte di Gligoric non é così premiante nel senso che il nero Schmidt mangiò proprio in d4 confidando su una apertura della colonna h che il bianco non aveva fatto previsto…notevole il modo in cui tatticamente il B sia riuscito a creare fuffa torbida da acqua del tevere fiendo per pattare la partita ma certo l’episodio mostra uno dei pericoli N 1 per gli scacchisti, la pigrizia analitica! Certo che la mossa 8 Cd5 così a occhio farebbe pensare a qualocosa di geniale ma solo umanamente visto che così a intuito un motore si schiererebbe come vittoria da parte del nero! Ok adesso possiamo tornare a tutte le domande di cui sopra con web developer Umbria, con tasto destro si può vedere il sorgente e arrivare a delle risposte automatiche per ogni quesito dal momento che tutte le regole CSS assolvono a compiti ben specifici. La centratura degli elementi si é verificata con un banale utilizzo del comando regola margin-left su una impostazione CSS del body, mentre i border-radius caratterizzano l’area che viene spalmata sul display con l’accorgimento float: left sull’ elemento di interesse che spinge tutti gli elementi appunto svolazzanti a coprire l’intera pagina, cosa che in assenza di questa regola impilerebbe tutto con un lunghissimo scroll verticale. Per quanto riguarda le combinazioni capita a tutti di vederle con molto ritardo anche a distanza di anni volendo!

Stai come uno di Ferrara sugli alberi a 50 gradi le foglie?! Allora tutto ciò é di buon auspicio perché la fortuna esiste negli scacchi e probabilmente non morirai assiderato dal caldo!

Ma della partita giocata tra Euwe e Smyslov ne vogliamo parlare giocata al campionato del mondo del 1948 con web developer Umbria? Certo che la fortuna esiste proprio eh a scacchi! Smyslov stava come uno di Bologna sugli alberi ad Agosto! Ebbene il B come si dice in gergo ha apparecchiato bene la tavola, tutti i prezzi sono pronti per l’accoppiamento parafrasando battiato e anche la prima mossa giocata da Euwe é giusta 1 Ceg6!! che scardina la fortezza nemica, la donna non si può prendere causa matto in f8 quindi Smyslov gioca 1..fg6 unica e adesso il Bianco che fa? Al posto di giocare 2 Dg4 con idee del tipo 2..Df7 3 e5 Ce7 4 e6 De8 5 Ch5! oppure anche 2..Af7 3 e5 Ag5 4 e6 Ae8 5 Cxg6 Axg6 6 Df5!! Dg7 7 Df7!! DxD 8 exf7 Axb1 9 f=cavallo matto se ne parte e spara 2 Cxg6 al che il povero Smyslov forzatamente deve di nuovo prendere con serafica calma con la freddezza di un monaco Zen che sta per vedere il nirvana. Adesso dopo 2..Rg6 il bianco avrebbe ancora un forte attacco giocando cose del tipo 3 Df3! Cf6 4 e5 ma Euwe imbambolato riesce a giocare una linea che lo porta al secondo diagramma perdendo la partita. La questione della psicologia degli errori negli scacchi é materia vasta e affascinante. Smyslov aveva studiato da ipnotista? Non lo sappiamo, assistiamo solo a uno scempio di combinazione mancata. Saltando di nuovo nel mondo parallelo della programmazione che ha così tante analogie con quello degli scacchi con web developer Umbria, torniamo a JS. In Java Script tutto quello che non é un a parola chiave é una variabile, tipo pippo=3; alert(pippo); puto=pippo; dove l’alert mostrerà il contenuto della variabile nella finestra del browser e dove dopo si assegna alla variabile pluto lo stesso contenuto della variabile pippo. Benché non sia strettamente necessario é bene attribuire la dichiarazione della variabile con var pippo; quello che stupisce é che non abbiamo una dichiarazione sul tipo di dati, le variabili in JS possono contenere qualsiasi tipo di dato e anche tipi diversi per esempio é corretto scrivere var pippo; pippo =3;pippo= “stringa testo”; esistono anche forme d compatte per scrivere tipo pippo = pippo * 2; che é anche uguale a pippo*=2; un altra operazione molto comune, ricorda web developer Umbria alias Faraoni Enrico ceo di Umbriaway Consulting, é l’incremento di una unità e il decremento dell’ unità, per questi due casi si usano rispettivamente gli operatori ++ e –: pippo–; pippo++; che equivalgono a pippo=pippo-1; e pippo = pippo +1; bisogna prestare attenzione alle forme compatte di somma e sottrazione nel caso esse vengano usate in espressioni, si consideri il seguente caso dove a=1; e b=1+ e a++; quanto valgono le variabili a e b al termine delle due istruzioni? Facendo una verifica possiamo dire che valgono 2, la seconda istruzione ha fatto prima la somma tra 1 e il valore precedente di a, poi é stata incrementata di 1. Per questa caratteristica le operazioni a ++ e a– si chiamano rispettivamente post incremento e post decremento (perché l’operazione viene effettuata dopo l’uso del valore contenuto nella variabie se questa é usata in espressioni). In maniera analoga esistono le operazioni di pre-incremento (++a) e pre-decremento (–a) eccco allora che scriveremo a=1; b = 1+ ++a; si può verificare che a vale sempre 2 mentre b ora vale 3. Occorre fare attenzione quando si utilizzano gli operatori di pre o post incremento in espressioni booleane complesse, si consideri per esempio questo caso dove a=0; var b=0; var bool1=a++>0 || b++>0); var bool2 =(a++<0 && b++<0); si provi a calcolare, al termine delle istruzioni i valori di a, b, bool1 e bool2. Dopo avere dato una risposta confrontate il risultato con la soluzione ossia a=2; b=1; bool=false; bool2=false; nel primo caso bool1 l’interprete valuta la prim espressione a++>0. Per farlo il valore il valore attuale di a (che é 0) viene valutato e poi confrontato, il confronto dà come risultato FALSE e poi si é incrementato di 1. Visto che c’è un OR logico la prima parte é stata valutata FALSE, l’interprete valuta anche la seconda parteper decidere il valore complessivo dell’ espressione. Lo fa in maniera analoga alla prima parte, per cui il risultato complessivo é FALSE e anche b viene incrementato di 1. A questo punto si valuta bool2. La prima espressione é a++<0; siccome a vale 1, a viene valutato FALSE e poi incrementato di 1. Però questa espressione fa si che l’intera espressione, essendoci AND sarà valutata a FALSE; pertanto la seconda espressione non viene valutata e il risultato per bool2 é FALSE, mentre ora a vale 2 e b resta con il valore 1. Ma che regole di conversione usa JS sul tipo di dati, come valuta una espressione del tipo: alert(“32/3/1.1*3*1.1=” + 32/3/1.1*3*1.1); a che tipo di risultato andiamo incontro? Serve Nostradamus per decodificare questa centuria? Il fatto é che JS ha le sue regole di conversione e l’operatore + nel caso di cui sopra ha una doppia funzione addiziona anche le stringhe oltre che fare calcoli. In pratica trasforma il numero in stringa e poi esegue la concatenazione, ribadisce web developer Umbria. Ma che dire di alert (3+2+”=3+2″); e alert (“3+2=”+3+2); a prima vista il tutto sembra equivalente o quasi ma provando si riscontra che le istruzioni non sono uguali affatto dove nel primo caso ottengo un alert con su scritto 5=3+2 e nel secondo ottengo 3+2 = 32. Per rendere i due script equivalenti é necessario far si che l’ordine delle operazioni, nei due casi sia uguale e per farlo si possono introdurre le parentesi visto che gli operatori + hanno diversi utilizzo di precedenza a seconda del contesto in cui si trovano. sostanzialmente ci sono diverse regole di precedenza su + e * per cui prima vengono risolti i * poi il +, del resto anche a scuola ci dicevano prima esegui le moltiplicazioni e le divisioni poi la somma. In Javascript per trasformare la stringa in un numero si può usare la funzione parseInt() per ottenere un numero intero oppure parseFloat() per ottenre un numero con la virgola. Si faccia attenzione perché il parser su una stringa che non é un numero fa restituire NaN valore particolare che indica “Not a Number” ovvero “non é un numero”.Nel caso che la stringa abbia un numero come prima parte, e poi una qualsiasi stringa, restituisce comunque il valore di tale numero. Per esempio tutte le espressioni tipo parseInt(’12’) o parseInt (’12pippo’) o parseInt (’12 12 12′) restituiscono tutte il valore 12; parseInt ha un secondo parametro opzionale che rappresenta la base da usare nel parsing del numero. Tale base può essere un numero da 2 a 36. Ecco ad esempio come eseguire il parser di una stringa in base 16 con risultato consequenziale che é 12: parseInt (‘c’, 16) e parseInt (‘0x0c’,16). Conviene anche esercitarsi con javascript e le basi diverse da dieci ma sul training ci sarà modo di vedere qualcosa di inerente con web developer Umbria!

Crea un sito o un blog gratuitamente presso WordPress.com.

Su ↑