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
Giu/27/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
Antonio Mercurio

Antonio Mercurio

URL del sito web: http://www.w3web.it
27 SP_GIUGNO 2017

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
Etichettato sotto
27 SP_GIUGNO 2017

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
Etichettato sotto
27 SP_GIUGNO 2017

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
Etichettato sotto
27 SP_GIUGNO 2017

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
Etichettato sotto
27 SP_GIUGNO 2017

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
Etichettato sotto

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