Benvenuti nel nostro corso sul linguaggio Php7. Nei video seguenti vi offriamo una parte del nostro corso per farvi valutare se acquistarlo o meno su una piattaforma esterna d
Corso php7
Feb/01/2017 Video corso Html5
 Apprendi le basi dell'html5 e le sue novità. Imparerai in questo minicorso i nuovi tags semantici, le novità nei forms, ed infine i canvas, drag and drop e le api google. 
Video corso Html5
Nov/14/2016 Video corso Jquery: Impara le basi ed estendi le tue skills in Javascript
Conosci le basi di javascript e vuoi scrivere meno codice ed essere produttivo?. Allora non ti resta che imparare le basi della libreria Jquery. Si tratta di una libreria java
Video corso Jquery: Impara le basi ed estendi le tue skills in Javascript
Ott/21/2016 Video Corso sul CSS 3
Il corso tratta dei fogli di stili a cascata cioè il CSS. Si tratta di un linguaggio che ci consente di stilizzare le nostre pagine web e quindi di estendere le funzionalità d
Video Corso sul CSS 3
Ott/19/2016 Tutorials Drupal 8
In questo video analizzeremo passo passo tutte le fasi per la creazione e pubblicazione on-line di un sito web costruito con drupal 8.
Tutorials Drupal 8
Lug/01/2016 I nostri progetti su git
Guarda i nostri progetti su github:

I nostri progetti su git

I nostri progetti su git
Mag/23/2017 Video Corso Laravel
Impara a sviluppare applicazioni con il framework Laravel. Ti insegneremo a utilizzare il framework per creare rapidamente applicazioni web modulari e facilmente manutenibili.
Video Corso Laravel
Ago/01/2016 Corso php7
Home page del portale w3web.it
Venerdì, 19 Agosto 2016 10:12

Backup di un sito con wordpress

In questo video vedremo come effettuare il backup di un sito costruito con il cms wordpress. Il plugin è in grado di effettuare il backup di cartelle, file e database. Il backup consente di ripristinare il sito da eventuali malfunzionamenti o atacchi hacker.

[spvideo height="150"]https://vimeo.com/179328057[/spvideo]

Pubblicato in Cms
Mercoledì, 17 Agosto 2016 12:00

La struttura di Laravel

Ciclo di vita di Laravel

Tutte le richieste di una applicazione Laravel vengono inoltrate al file public/index.php. Sono dirette a questo file dal webserver (Apache oppure Nginx). Il file index.php è semplicemente un punto di inizio da cui caricare tutto Laravel .Questo file carica l'autoloader definito da Composer e poi restituisce una istanza dell'applicazione Laravel dallo script bootstrap/app.php. La prima azione eseguita da Laravel è creare una istanza dell'applicazione service container.

HTTP/Console Kernels

Successivamente, la richiesta in ingresso viene inviata al kernel http o alla console kernel, dipende dal tipo di richiesta in arrivo. Questi due kernels fungono come posizione centrale da cui partono le richieste. Il kernel HTTP si trova in app/HTTP/Kernel.php. Esso estende la classe Illuminate\Foundation\Http\Kernel che definisce un array di bootstrappers che si avvia prima che la richiesta sia partita.

Questi bootstrappers controllano i log di errore, le configurazioni dell'ambiente, ed eseguono qualunque altro task necessario prima che una richiesta possa essere inviata all'applicazione Laravel. Il kernel HTTP definisce anche una lista di middleware (filtri) che ogni richiesta deve superare prima che possa essere gestita dall'applicazione. Questi filtri gestiscono la lettura e scrittura della sessione HTTP, e determinano se l'applicazione è in uno stato di manutenzione, verificano la cifratura CSRF token ed altro ancora. Il kernel HTTP riceve una richiesta Request e restituisce una risposta Response. Possiamo pensare al Kernel come ad una scatola nera che racchiude tutta la nostra applicazione. Ad ogni richiesta HTTP segue un Response HTTP.

Service Provider

Una delle azioni di bootstraping più importanti del Kernel è il caricamento dei service provider della tua applicazione. Tutti questi service provider (fornitori di servizi) sono configurati in config/app.php nella sezione array providers. Come prima cosa viene invocato il metodo register su ogni provider, poi una volta che i providers sono stati registrati viene richiamato il metodo boot. I service providers sono responsabili del bootstrapping di vari componenti del framework, come databases, convalide, e i componenti di routing.

Dispatch Request

Una volta che è avvenuto il bootstrapping dell'applicazione e tutti i service providers sono stati registrati, la Request sarà gestita dal routee e sarà inviata ad una route o ad un controller. 

 

La struttura di una applicazione

 

  • La cartella Root

La cartella principale è app e contiene il codice core della applicazione.La cartella bootstrap contiene pochi files che bootstrappano il framework e configurano l'autoloading, così come la cartella cache contiene pochi file che servono al bootstrapping dell'ottimizzazione della performance. La cartella config contiene tutti i files di configurazione dell'applicazione. La cartella database contiene le nostre migrazioni e i seeds. La cartella public contiene tutti gli assets(immagini, javascript, css). La cartella resources contiene le views, (LESS, SASS...) e i files di localizzazione. La cartella storage contiene i file Blade compilati, i file delle sessioni, i file caches, e tutti i files generati da Laravel. La cartella tests contiene i nostri test , mentre la cartella vendor contiene tutte le dipendenze gestite da Composer.

  • La cartella app

Questa cartella si trova nel namespace App che è caricato in automatico da Composer e contiene varie cartelle aggiuntive come Console, Http e Providers. La cartella Console contiene tutti i comandi artisan, mentre la cartella Http contiene i nostri controllers, middleware e requests. La cartella Events contiene gli eventi che avvisano l'applicazione che un'azione è richiesta. La cartella Exceptions gestisce le eccezioni che vengono sollevate per ogni errore. La cartella Jobs contiene  tutti i compiti che dovranno essere eseguiti e posti in uno stato di queue. La cartella Listeners contiene le classi che gestiscono gli eventi, cioè rispondono ad una azione da compiersi al verificarsi di un evento. La cartella Policies contiene le classi per le politiche di autorizzazione. In pratica tutti i permessi necessari perché un utente possa eseguire un'azione.

 

I service provider

I service provider sono il luogo centrale di tutto il boostrapping delle applicazioni Laravel. Tutte le vostre applicazioni Laravel vengono bootstrappate attraverso i service provider. Cosa vuol dire Bootstrappate?. In generale significa registrare le cose, come i listener degli eventi, i filtri, ed anche le routes. Se aprite il file config/app.php esso contiene un array provider che racchiude tutti i service provider caricati in automatico da Laravel. Molti di essi sono definiti deferred, cioè vengono caricati solo su richiesta.

  • Scrivere un service provider

Tutti i service provider estendono la classe Illuminate\Support\ServiceProvider. Si tratta di una classe astratta che richiede un solo metodo definito register. All'interno di esso non bisogna registrare nessun listener di un evento, nessuna route. Con il seguente comando artisan possiamo creare un service provider:

php artisan make:provider RiakServiceProvider
  • Il metodo register

Ecco il file del service provider appena creato:

<?php 

namespace App\Providers; 

use Riak\Connection;

use Illuminate\Support\ServiceProvider;
 

class RiakServiceProvider extends ServiceProvider

{

    /**

     * Register bindings in the container.

     *

     * @return void

     */

    public function register()

    {

        $this->app->singleton(Connection::class, function ($app) {

            return new Connection(config('riak'));

        });

    }

}

 Questo provider definisce un metodo register e ne fa uso per implementare una connessione riak nel service container.

 

  • Il metodo boot

Quindi che succede se dobbiamo registrare una view composer nel nostro service provider? Può essere fatto con un metodo boot. Questo metodo viene richiamato dopo che tutti gli altri service provider sono stati registrati.

 

<?php 

namespace App\Providers; 

use Illuminate\Contracts\Events\Dispatcher as DispatcherContract;

use Illuminate\Foundation\Support\Providers\EventServiceProvider as ServiceProvider; 

class EventServiceProvider extends ServiceProvider
{

    // Other Service Provider Properties... 

    /**

     * Register any other events for your application.

     *

     * @param  \Illuminate\Contracts\Events\Dispatcher  $events

     * @return void

     */

    public function boot(DispatcherContract $events)

    {

        parent::boot($events);

 

        view()->composer('view', function () {

            //

        });

    }

}
  •  Registrare i provider

Tutti i provider sono registrati nel file config/app.php. Questo file contiene un array definito providers che elenca tutti i provider registrati. Per registrare un provider aggiungetelo semplicemente all'array providers così:

'providers' => [

    // Other Service Providers

 

    App\Providers\AppServiceProvider::class,

],

 

Service container

Il service container è un ottimo strumento per gestire le dipendenze delle classi ed eseguire le injection delle dipendenze. Le injection delle dipendenze significano che le dipendenze sono iniettate nelle classi grazie al costruttore, oppure in alcuni casi con il metodo setter. Ecco un esempio:

<?php 

namespace App\Jobs; 

use App\User;

use Illuminate\Contracts\Mail\Mailer;

use Illuminate\Contracts\Bus\SelfHandling; 

class PurchasePodcast implements SelfHandling

{

    /**

     * The mailer implementation.

     */

    protected $mailer; 

    /**

     * Create a new instance.

     *

     * @param  Mailer  $mailer

     * @return void

     */

    public function __construct(Mailer $mailer)

    {
        $this->mailer = $mailer;

    }
 

    /**

     * Purchase a podcast.

     *

     * @return void

     */

    public function handle()

    {

        //

    }

}

 In questo esempio il job definito PurchasePodcast necessita di inviare e-mail quando un podcast è comprato. Quindi dovremo iniettare un servizio che è capace di inviare e-mail. Dal momento che il servizio è iniettato possiamo scambiarlo con un'altra implementazione.

  • Binding

All'interno di un service provider noi spesso abbiamo accesso al container con questo metodo:

$this->app

 Noi possiamo registrare un binding usando il metodo bind, passando la classe oppure l'interfaccia con cui lo vogliamo registrare usando poi una closure che restituisce un'istanza della classe.

$this->app->bind('HelpSpot\API', function ($app) {

    return new HelpSpot\API($app['HttpClient']);

});
  •  Container events

Il service container accende un evento ogni volta che risolve un oggetto. Puoi ascoltare questo evento (listen) usando il metodo resolving:

 

this->app->resolving(function ($object, $app) {

    // Called when container resolves object of any type...

}); 

$this->app->resolving(FooBar::class, function (FooBar $fooBar, $app) {

    // Called when container resolves objects of type "FooBar"...

});
Pubblicato in Laravel
Martedì, 16 Agosto 2016 16:47

Query Selector

Possiamo catturare degli elementi e poi applicare degli stili css. Ecco un esempio di pagina

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
</head>
<body>

<p>Testo senza formattazione</p>

<button type="button" onclick="cambiaStile();">Cambia stile</button>

<script>

function cambiaStile(){

   var x=document.querySelector('p').style.textAlign='center';

}

</script>

</body>
</html>

Abbiamo creato un solo paragrafo e un bottone che all'evento click associa la nostra funzione cambiaStile. Questa funzione cattura il paragrafo in questione tramite il metodo queryselector che tra parentesi accetta come parametro il nome del selettore css, che sarebbe poi l'elemento su cui applichiamo le proprietà css.Poi assegniamo il metodo style che accetta la proprietà css ed il nuovo valore. Con il metodo style possiamo applicare le proprietà css che conosciamo. In questo caso allineiamo il testo a centro quando clicchiamo sul bottone. Ecco un altro esempio:

 <script>

function cambiaClasse(){

   var x=document.querySelector('p').style.color = 'red';

}

</script>

In pratica applichiamo la regola css che cambia il colore del testo. Oppure:

<script>

function cambiaClasse(){

   var x=document.querySelector('p').style.textDecoration='underline';

}
</script>

Qui invece applichiamo la regola text-decoration del css che ci permette di applicare una decorazione al testo che può essere overline(sopra-lineato), underline(sottolineato),line-trough(sbarrato). Oppure cambiamo la grandezza del testo:

<script>

function cambiaClasse(){

   var x=document.querySelector('p').style.fontSize="25px";
}
</script>
Pubblicato in Javascript
Martedì, 16 Agosto 2016 16:41

Get element by tag name

Illustriamo in questo articolo come catturare un elemento html per nome del tag. Ecco una pagina di esempio


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<p>Primo paragrafo</p>

<p>Secondo paragrafo</p>

<p>Terzo paragrafo</p>

<p>Quarto paragrafo</p>

<button type="button" onclick="cambiatesto();">Cambia testo</button>

<script>

function cambiatesto(){

    var x=document.getElementsByTagName('p');

    x[0].innerHTML='primo'.bold();

    x[1].innerHTML='secondo'.bold();
    x[2].innerHTML='terzo'.bold();
    x[3].innerHTML='quarto'.bold();
}

</script>
</body>
</html>

Abbiamo dichiarato quattro paragrafi. Ognuno di essi ha un nodo testo, cioè il proprio testo di paragrafo. Abbiamo creato una funzione cambiaTesto che catturavtutti gli elementi html tramite il tipo di tag e nel nostro caso <p>. Per
catturarli abbiamo dichiarato una variabile x che usa il metodo getElementsByTagName che ha una parametro di tipo stringa che accetta fra apici il nome del tag. Possiamo dire che questa variabile x diventa un array che racchiude tutti i paragrafi catturati che nel nostro caso sono 4. Ogni array come abbiamo già visto contiene degli elementi racchiusi fra parentesi quadre e con una propria posizione che parte da zero ed arriva alla posizione n-1. Nel nostro caso da zero a tre. Come notate abbiamo cambiato di ognuno di essi il testo del paragrafo con la funzione innerHTML. Abbiamo poi aggiunto la funzione bold() che trasforma il testo in grassetto. Infine abbiamo creato un pulsante che attiva questa funzione al click grazie all'evento onclick. Se cliccate sul pulsante vi compariranno i paragrafi con i testi in grassetto.

Pubblicato in Javascript
Venerdì, 12 Agosto 2016 11:05

Il metodo getElement

Vediamo in questo articolo il metodo Get che consente di intercettare i nodi html tramite id, classe css o altro. Immaginiamo questa pagina html semplice in cui abbiamo un nodo paragrafo <p> con un id che lo contraddistingue.

<html>

<head>

<title>Dom</title>

</head>

<body>

<p id='demo'>Nodo paragrafo con id</p><br>

<button type="button">Cliccami</button>

</body>

</html>

Ora vogliamo catturare questo paragrafo tramite il suo id e cambiarne il testo (nodo testo) quando clicchiamo sul pulsante. A questo punto creiamo una funzione che chiamiamo cambiaTesto così:

<script>


 function cambiaTesto(){



        var x=document.getElementById('demo');

        x.innerHTML='Io sto bene e tu?';

    }

</script>

Abbiamo creato una funzione di nome cambiaTesto e poi in una variabile x abbiamo usato questo metodo che analizziamo. Richiamiamo il document ed il suo metodo getElementById che intercetta un elemento html che abbia un certo id che inseriamo in parentesi fra apici. Dobbiamo sempre usare document quando lavoriamo sul Dom e con il punto applichiamo uno dei suoi metodi. Ora la variabile x diventa un oggetto javascript su cui applichiamo il metodo innerHTML che serve a cambiare il nodo testo dell'elemento html catturato. In questo caso è <p> catturato tramite id ed il suo nodo testo lo abbiamo cambiato con la funzione innerHTML. Ora non ci resta che richiamare questa funzione quando clicchiamo sul pulsante. Il click sul pulsante si definisce in javascript evento e in questo caso dobbiamo modificare il bottone così:

<button type="button" onclick="cambiaTesto();">Cliccami</button>

Come vedete abbiamo aggiunto onclick e gli abbiamo passato la funzione. Ora provate a cliccare sul pulsante  e vedrete l'effetto. Come sapete molti elementi html come anche <p> hanno degli attributi. Nel caso di <p> possiamo aggiungere un attributo title che ci consente di far comparire del testo quando ci spostiamo con il mouse sul testo del paragrafo. Riprendiamo il nostro esempio e cambiamo il paragrafo così

<p id='demo' title='attributo title'>Nodo paragrafo con id</p><br>

Ora ricaricate la pagina del browser e vedrete il testo che compare quando vi spostate con il mouse sul testo del paragrafo. Ora vogliamo cambiare questo testo ed allora ecco il codice javascript:

<script>

    function cambiaTesto(){

        var x=document.getElementById('demo').getAttributeNode('title').value;

        document.write(x);
    }

</script>

Il bottone resta inalterato, mentre nella funzione abbiamo catturato sempre tramite id il paragrafo ma abbiamo aggiunto un metodo getAttributeNode che consente di ottenere l'attributo di un nodo e il tipo di attributo lo specifichiamo fra parentesi. Nel nostro caso abbiamo catturato il nodo <p> ed il suo attributo nodo title. Ora se

voglio anche sapere che testo abbia questo attributo title lo ottengo aggiungendo la proprietà value. Poi chiedo di stamparlo con il metodo write. Ora se cliccate sul pulsante dovreste vedere il testo dell'attributo title.

Abbiamo visto già il metodo get per catturare un elemento html tramite il suo id. Facciamo un altro esempio che ci consente di apprendere il modo per cambiare un attributo nodo. Ecco un esempio di pagina web:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

   
</head>
<body>



<p id="demo" title="il mio paragrafo">Ciao come stai?</p>

<br>

<button type="button" onclick="cambiaTesto();">Cliccami</button>

<script>

    function cambiaTesto(){

        var x=document.getElementById('demo').setAttribute('title','vedi come cambio?');

    }

</script>

</html>

Come si può notare il nodo <p> ha un attributo title che mostra del testo quando ci spostiamo con il mouse sul testo del paragrafo. Provate a caricare la pagina e spostatevi con il mouse sul testo del paragrafo. Dovrebbe comparire del testo 'il mio paragrafo'. Ora come notate la nostra funzione javascript cambiaTesto cattura nella

variabile x l'elemento <p> tramite il suo id ed imposta il testo dell'attributo title 'vedi come cambio?'. Tutto questo avviene tramite il metodo setAttribute che tra parentesi ammette due parametri, il primo è il nome dell'attributo che nel nostro caso è title, mentre il secondo parametro è il testo che deve comparire. Nel nostro

pulsante button inseriamo l'evento onclick che cattura la function quando clicchiamo su di esso. Ora cliccate sul bottone e spostatevi sul testo del paragrafo e dovreste vedere cambiato il testo dell'attributo title. Mettiamo che io voglia controllare che ci sia un certo attributo prima di cambiarlo. Ecco il codice:

<script>

    function cambiaTesto(){


        var x=document.getElementById('demo');

    if(x.hasAttribute('title')){


        x.setAttribute('title','vedi come cambio?');

    }

    }

</script>

In sostanza creo una variabile x che cattura l'elemento <p> tramite il suo id. Poi con un if controllo che questo <p> abbia un certo attributo title e solo allora uso la funcione setAttribute per cambiarne il testo.

Pubblicato in Javascript
Venerdì, 12 Agosto 2016 11:01

Il DOM

Il DOM (Document object model) viene creato dal browser di navigazione quando una pagina viene caricata. Esistono vari tipi di dom come il Dom html, quello css etc. Il dom html ha una struttura ad albero, dove possiamo trovare come elemento principale il Document, poi segue l'elemento radice di tutti gli altri elementi html, e questo
elemento è <html>, da cui derivano i figli come <head> che a sua volta ha dei figli come <meta> e <title>. Poi c'è il <body> che racchiude altri figli che in sostanza sono tutti gli elementi html racchiusi al suo interno. Quindi <p>, <a>, <img> etc.. sono tutti suoi figli. Poi ogni elemento si chiama nodo ed ognuno ha un nodo testo. Per esempio ecco una struttura tipica di una pagina html:

<html>

Document......

<head>

<title>Ciao</title>

</head>


<body>

<p>Ciao come stai?</p>

</body>

</html>

In questa struttura vediamo il Doument, cui segue l'elemento radice di tutti che è <html>, <head> suo nodo figlio, <title> nodo figlio di quest'ultimo e Ciao il nodo testo di <title>. Poi <body> con il suo nodo figlio <p>, il cui nodo testo Ciao come stai?. Il linguaggio javascript consente di agire su questi nodi con alcuni metodi che vedremo nei prossimi articoli.

Pubblicato in Javascript
Venerdì, 12 Agosto 2016 10:54

Gli array in Javascript

Gli array in javascript sono oggetti che contengono degli elementi detti chiavi e dei valori associati. Sono come delle variabili ma possono contenere più elementi. Un esempio di array può essere un elenco di nomi. Dichiariamo un array contenente un elenco di nomi e poi lo stampiamo

<script>

    var elenco=['tony','fabio','marco'];

    document.write(elenco);

</script>

L'array si chiama elenco e gli abbiamo assegnato degli elementi che nel nostro caso sono nomi e quindi stringhe. Gli elementi si separano con una virgola e si scrivono tra parentesi quadre. Per stamparlo abbiamo usato il metodo write. Ogni elemento dell'array occupa una posizione, che parte da 0 fino alla posizione n. Nel nostro caso tony occupa la posizione 0 e marco la 2. Ecco come stampare la posizione 0

<script>

    var elenco=['tony','fabio','marco'];

    document.write(elenco[0]);

</script>

Vi darà come risultato tony che è l'elemento che occupa la posizione 0. Un array però non è vincoltato e può contenere elementi aggiuntivi che possono essere creati in un momento successivo. Ecco come fare con una funzione interna degli array

<script>

    var elenco=['tony','fabio','marco'];

    elenco.unshift('giulio');

    elenco.push('gianni');

    document.write(elenco);

</script>

Abbiamo usato il metodo unshift() che accetta come parametro l'elemento da aggiungere come stringa. Questo metodo fa aggiungere l'elemento all'inizio dell'array, mentre il metodo push() lo fa aggiungere alla fine. Ora caricate la pagina e vedrete gli elementi aggiunti. Se invece volessimo rimuovere gli elementi ecco le funzioni

<script>

    var elenco=['tony','fabio','marco'];

    elenco.unshift('giulio');

    elenco.push('gianni');
    
    elenco.shift();
    elenco.pop();

    document.write(elenco);

</script>

Prima li abbiamo aggiunti gli elementi poi li abbiamo rimossi. Il metodo shift() non accetta parametri e serve a rimuovere il primo elemento dell'array mentre il metodo pop() rimuove l'ultimo. Per sapere il totale di elementi in un array ecco il codice

<script>

    var elenco=['tony','fabio','marco'];

    var totale=elenco.length;

    document.write(totale);

</script>

Abbiamo applicato il metodo length su elenco per ricavarne il numero di elementi e poi lo abbiamo stampato. Per sapere la posizione occupata da un elemento ecco il codice:

<script>

    var elenco=['tony','fabio','marco'];

   var indice=elenco.indexOf('tony');

   document.write(indice);

</script>

Abbiamo dichiarato una variabile indice ed applicato sull'array il metodo indexOf che accetta come parametro l'elemento la cui posizione vogliamo ricercare. Gli array possono contenere anche numeri così:

<script>

var numeri=[1,2,3,4];

</script>

Come vedete abbiamo numeri che non devono essere inseriti fra apici non essendo stringhe. Su di essi potete applicare le stesse funzioni viste finora. Un array può contenere anche degli oggetti:

<script>

    var elenco=[


        {nome:'tony',cognome:'mercurio',anni:41},{nome:'fabio',cognome:'zotti',anni:41}


    ];

   var nome=elenco[0]['nome'];

    var nome2=elenco[1]['nome'];

    document.write(nome+" "+nome2);

</script>

Abbiamo dichiarato un array che contiene due oggetti (poi li vedremo nel prosiego di altri tutorial). Il primo oggetto occupa posizione 0 ed ha tre proprietà(nome,cognome,anni)ed ognuna separata da due punti e proprio valore. Per stampare il valore della proprietà nome del primo oggetto abbiamo dichiarato la variabile nome che richiama l'array di nome elenco, poi la posizione del primo oggetto e la sua proprietà. Così abbiamo fatto per l'altro oggetto e poi abbiamo stampato i risultati. Ecco come scorrere tutti gli elementi di un array e stamparli in sequenza:

<script>

    var elenco=['tony','fabio','marco','gianni','roberto'];


      var totale=(elenco.length);

        var i=0;

    for(i=0;i<totale;i++){



        document.write(elenco[i]+"<br>");
 }

</script>

Abbiamo dichiarato il nostro array di nomi, poi una variabile totale che contiene il calcolo del numero degli elementi dell'array. Poi abbiamo creato un for che parte da zero ed arriva fino al totale degli elementi, e poi aggiunge l'indice corrente dell'array e lo stampa.

Pubblicato in Javascript
Venerdì, 12 Agosto 2016 10:46

Le date in Javascript

Anche se non ancora abbiamo parlato di oggetti in senso proprio, dobbiamo ricordare che tutto in javascript è un oggetto come le stringhe che abbiamo già visto, i numeri, gli array che vedremo e le date. Ecco un esempio di codice:

<script>

    var data=new Date();
    var orario=data.getHours();
    var minuti=data.getMinutes();
    var secondi=data.getSeconds();

    document.write('sono le ore'+" "+orario+" "+minuti+" "+'minuti e'+"  "+secondi+" "+'secondi');

</script>

Abbiamo dichiarato un nuovo oggetto di tipo data. La variabile si chiama data ed è un oggetto date(data) e lo  notate dal fatto che abbiamo usato la parola chiave new che serve ad istanziare un oggetto e in questo caso è l'oggetto Date. Non dimenticate le due parentesi tonde. Essendo un oggetto, su di esso possiamo implementare dei metodi (in programmazione ad oggetti i metodi sono le funzioni per così dire). Notate che abbiamo poi dichiarato delle altre variabili. Per esempio orario è ricavata dalla applicazione sull'oggetto data di un metodo denominato getHours(). Vi accorgete che si tratta di un metodo in quanto abbiamo aggiunto un punto per separare la variabile dall'oggetto. Poi ogni metodo come le funzioni ha due parentesi tonde che possono anche contenere dei parametri. Questo metodo fa ricavare da una data solo l'ora, mentre la variabile minuti permette di stampare i minuti grazie al metodo getMinutes, e per finire la variabile secondi fa ricavare i secondi con il metodo getSeconds. Poi facciamo stampare i risultati con il metodo write che conosciamo. Ecco un altro esempio

<script>

    var data=new Date();

   var giorno=data.getDay();

    var mese=data.getMonth()+1;

    var anno=data.getFullYear();

    document.write('oggi è il giorno'+" "+giorno+" "+'del mese'+" "+mese+" "+'anno'+" "+anno);

</script>

Questa volta con la variabile giorno ricaviamo il giorno della settimana come numero intero con il metodo getDay. Mentre con il metodo getMonth nella variabile mese ricaviamo il mese come intero. Notate che abbiamo aggiunto 1 al metodo getMonth perchè in javascript i mesi si contano da zero fino a 11 che è dicembre. Con il metodo getFullYear nella variabile anno abbiamo ricavato l'anno a quattro cifre. Il tutto lo andiamo a stampare con il metodo write. Un altro esempio

<script>

    var data=new Date();
    document.write(data);

</script>

Abbiamo dichiarato l'oggetto data e poi lo abbiamo stampato. Ecco il risultato Sat Aug 06 2016 08:59:15 GMT+0200 (ora solare Europa occidentale). Cioè sabato 6 agosto del 2016 e l'orario con il timezone e il fuso orario. Posso ottenere però una forma più sintetica così:

<script>

    var data=new Date();

    var datalocale=data.toDateString();

    document.write(datalocale);

</script>

Abbiamo creato una variabile datalocale che adopera il metodo toDateString, per ottenere la data in forma stringa sintetica. Ecco il risultato Sat Aug 06 2016. Saturday 06 2016, sabato 6 2016. Gli americani usano indicare prima il mese, poi il giorno e poi l'anno. Se vogliamo ricavare la data nel nostro formato europeo ecco il codice

<script>

    var data=new Date();

    var datalocale=data.toLocaleDateString();

    document.write(datalocale);

</script>

Abbiamo applicato il metodo toLocaleDateString che ricava appunto come stringa la data nel formato locale. Il risultato sarà 06/08/2016 mentre scrivo. Ecco un altro codice che ci permette di ricavare l'ora:

<script>

    var data=new Date();

    var orario=data.getTime();

    var orariolocale=data.toLocaleTimeString();
    
    document.write(orario);
    
    document.write("<br>");

   document.write(orariolocale);

</script>

La variabile orario permette di ricavare il tempo trascorso in millesimi di secondo da una precisa data che è il 01/01/1970 (una data predefinita di javascript). Mentre con la variabile orariolocale ricaviamo  l'ora nel formato nostro locale grazie al metodo toLocaleTimeString. Ecco come calcolare la nostra età:

<script>

    var data=new Date(" 04 10 1975");

     var dataoggi=new Date();

     var anni=dataoggi.getFullYear()-data.getFullYear();

   document.write(anni);

</script>

Creiamo una variabile data specificando una data di nascita nel formato americano, poi specifichiamo una data di oggi con la variabile dataoggi. Alla fine creiamo una variabile anni che calcola la differenza fra la variabile dataoggi sulla quale applichiamo il meto getFullYear per ricavare l'anno, e lo stesso per la variabile data.

Pubblicato in Javascript
Lunedì, 01 Agosto 2016 09:11

Video Corso Laravel

Impara a sviluppare applicazioni con il framework Laravel. Ti insegneremo a utilizzare il framework per creare rapidamente applicazioni web modulari e facilmente manutenibili.L'uso del framework ti consentirà di concentrarti sulla logica della tua applicazione, lasciando al framework le attività ripetitive e noiose

 

INSTALLARE LARAVEL 5.2 IN AMBIENTE CLOUD SUL SERVIZIO CLOUD9

[spvideo height="150"]https://vimeo.com/176765453[/spvideo]

INSTALLARE IN AMBIENTE MAC

[spvideo height="150"]https://vimeo.com/176833004[/spvideo]

LA TEORIA MVC

[spvideo height="150"]https://vimeo.com/176865677[/spvideo]

LE DIPENDENZE PHPSTORM

[spvideo height="150"]https://vimeo.com/176869517[/spvideo]

ROUTE CON PARAMETRI

[spvideo height="150"]https://vimeo.com/177138912[/spvideo]

ROUTE CON PARAMETRI VINCOLATI

[spvideo height="150"]https://vimeo.com/177144446[/spvideo]

RESPONSE E REDIRECT

[spvideo height="150"]https://vimeo.com/177274513[/spvideo]

BLADE PARTE PRIMA

[spvideo height="150"]https://vimeo.com/177274514[/spvideo]

IL TEMPLATING CON BLADE ED ISTRUZIONI FOR-FOREACH-IF

[spvideo height="150"]https://vimeo.com/177274515[/spvideo]

I FORM

[spvideo height="150"]https://vimeo.com/177298532[/spvideo]

CATTURA DEI DATI DEL FORM

[spvideo height="150"]https://vimeo.com/179001418[/spvideo]

FORM UPLOAD

[spvideo height="150"]https://vimeo.com/177274517[/spvideo]

I COOKIE

[spvideo height="150"]https://vimeo.com/179001435[/spvideo]

ROUTING AVANZATO

[spvideo height="150"]https://vimeo.com/177274521[/spvideo]

I CONTROLLER PRIMA PARTE

[spvideo height="150"]https://vimeo.com/179001439[/spvideo]

I CONTROLLER SECONDA PARTE

[spvideo height="150"]https://vimeo.com/177274523[/spvideo]

GENERAZIONE URL

[spvideo height="150"]https://vimeo.com/179001438[/spvideo]

RIEPILOGO SULLA TEORIA LARAVEL

[spvideo height="150"]https://vimeo.com/179001436[/spvideo]

RIEPILOGO DEI FORM CLASS

[spvideo height="150"]https://vimeo.com/179001437[/spvideo]

I FORM HTML

[spvideo height="150"]https://vimeo.com/179001440[/spvideo]

LO SCHEMA BUILDER PARTE PRIMA

[spvideo height="150"]https://vimeo.com/179001443[/spvideo]

LO SCHEMA BUILDER PARTE SECONDA

[spvideo height="150"]https://vimeo.com/179001441[/spvideo]

LO SCHEMA BUILDER PARTE TERZA

[spvideo height="150"]https://vimeo.com/179001445[/spvideo]

I MODEL E I CONTROLLER

[spvideo height="150"]https://vimeo.com/179001449[/spvideo]

INSERIMENTO DATI NELLA LIBRERIA PRIMA PARTE

[spvideo height="150"]https://vimeo.com/179001444[/spvideo]

INSERIMENTO SCRITTORI NELLA LIBRERIA PARTE SECONDA

[spvideo height="150"]https://vimeo.com/179001450[/spvideo]

I METODI DELLE COLLECTION

[spvideo height="150"]https://vimeo.com/179001447[/spvideo]

LA REGOLA WHERE

[spvideo height="150"]https://vimeo.com/179001442[/spvideo]

LE QUERYSCOPE E QUERYRAW

[spvideo height="150"]https://vimeo.com/179001448[/spvideo]

I METODI TRUNCATE-DESTROY-SHIFT-POP

[spvideo height="150"]https://vimeo.com/179001446[/spvideo]

APP LIBRERIA PRIMA PARTE

[spvideo height="150"]https://vimeo.com/179001462[/spvideo]

APP LIBRERIA SECONDA PARTE

[spvideo height="150"]https://vimeo.com/179001463[/spvideo]

APP LIBRERIA TERZA PARTE

[spvideo height="150"]https://vimeo.com/179011893[/spvideo]

APP LIBREIA QUARTA PARTE

[spvideo height="150"]https://vimeo.com/179011762[/spvideo]

INSTALLARE GIT SU MAC

[spvideo height="150"]https://vimeo.com/179011763[/spvideo]

INSTALLAZIONE HOMESTEAD SU MAC

[spvideo height="150"]https://vimeo.com/179017441[/spvideo]

COME USARE I CSS

[spvideo height="150"]https://vimeo.com/179192389[/spvideo]

LE CONVALIDE SECONDO METODO

[spvideo height="150"]https://vimeo.com/179200008[/spvideo]

APP LIBRERIA COME MOSTRARE LE LISTE DEI DATI

[spvideo height="150"]https://vimeo.com/179207644[/spvideo]

 APP LIBRERIA CATTURARE UNO SCRITTORE E I SUOI LIBRI

[spvideo height="150"]https://vimeo.com/179217473[/spvideo]

APP LIBRERIA CANCELLARE UNO SCRITTORE E CATTURE I LETTORI E I LIBRI

[spvideo height="150"]https://vimeo.com/179225717[/spvideo]

Pubblicato in Laravel
Lunedì, 01 Agosto 2016 08:58

Le Funzioni in Javascript

Le funzioni consentono di eseguire delle istruzioni e possono essere richiamate all'occorrenza. Immaginate di dover eseguire la stampa di nominativi o una formula. Potreste creare una formula e scriverla cento volte nella vostra pagina html tramite javascript. Ma se ad un certo punto vi accorgete di un errore nella fornula sarete costretti a modificarla cento volte. Mentre con una funzione potete creare la formula e richiamarla cento volte ma in caso di correzione vi basta correggere solo la formula iniziale e le altre verranno corrette in automatico. Ecco un esempio di formula che stampa il nome.

<script>

var nome='tony';

function nome(){

document.write(nome);

}

nome();

</script>

Abbiamo dichiarato una variabile e poi una funzione. Ogni funzione ha la parola chiave function seguita dal nome e due parentesi che possono contenere dei parametri. Poi le istruzioni sono racchiuse fra due parentesi graffe. La nostra funzione si chiama nome e stampa il nome richiamando la variabile creata fuori dalla funzione. Quando una variabile viene creata fuori dalla funzione può essere utilizzata al suo interno. Ora per richiamare la funzione ed eseguire la stampa del nome basta scrivere il nome della funzione con le due parentesi. Ecco un altro esempio:

<script>

var raggio=5;
    var pi_greco=3.14;

    var area_cerchio=(raggio*raggio)*pi_greco;
    
    function area_Cerchio(){
    
    
    document.write(area_cerchio);
    
    
    
    }
    
    area_Cerchio();

</script>

Qui invece abbiamo dichiarato tre variabili esterne con una formula che calcola un'area e l'abbiamo richiamata nella nostra funzione.

<script>

 function stampaNomi(nome,cognome){


        return nome+" "+cognome;
    }
</script>

document.write(stampaNomi('tony','mercurio'));

Abbiamo dichiarato una funzione che però ha due parametri tra parentesi. Attenzione nome e cognome sono parametri e non variabili. La funzione quando ha parametri, questi li possiamo restituire usando il return. La funzione ha un return che restituisce come risultato il valore contenuto in nome e cognome. Ma come facciamo a fornire i valori a nome e cognome?. Dobbiamo richiamare la funzione e tra parentesi e tra apici dobbiamo inserire il valore di nome e cognome. I parametri vengono separati da virgole. Come vedete abbiamo richiamato una funzione e abbiamo valorizzato i parametri. I valori dei parametri si chiamano argomenti. Adesso come risultato dovreste avere la stampa di tony mercurio. Siccome la funzione ha un return in questo caso l'abbiamo richiamata con document.write(nome('tony','mercurio'). Nel nostro caso i parametri sono stringhe e cioè nomi ma potrebbero essere anche numeri così

<script>
  function somma(a,b){
     return a+b;
}
  document.write(somma(5,8));
</script>

In questo caso sono numeri e non vanno inseriti tra apici. Segue un altro esempio.

<script>

function nominativo(){

nome='fabio'

document.write(nome);
}

nominativo();

</script>

Abbiamo dichiarato una funzione e una variabile interna e poi l'abbiamo utilizzata. La variable quando è scritta in questo modo si dice che il suo scope è globale, cioè si può richiamare anche esterna alla funzione. Abbiamo richiamato la funzione che ci stampa il nome. Provate poi a dare questa istruzione

document.write(nome);

vi dovrebbe stampare il nome. Provate invece a riscrivere la funzione così:

<script>

function nome(){

var nome='tony';

document.write(nome);

}

document.write(nome);

document.write("<br>");

nome();


</script>

In questo caso la variabile nome è interna alla funzione ed esaurisce il suo scopo (scope) all'interno di essa. Infatti la prima istruzione document.write(nome); non dovrebbe funzionare.

<script>

var a=function(a,b){

return a+b;

};

document.write(a(5,8));

</script>

Abbiamo dichiarato una funzione anonima che quindi non ha nome e che restituisce una somma di due parametri. Ma oltre a questo è racchiusa in una variabile che diventa il suo contenitore. Da notare che dovete inserire un ; alla fine della funzione. Ora noi la richiamiamo tramite la variabile a(5,8). Si definisono closure.

Pubblicato in Javascript

NOTA! Questo sito utilizza i cookie e tecnologie simili.

Se non si modificano le impostazioni del browser, l'utente accetta. Per saperne di piu'

Approvo