27 SP_GIUGNO 2017

 Il nostro corso base su angular js, sarà sempre aggiornato con nuove guide, nel frattempo godetevi quelle già disponibili. 

Pubblicato in Javascript
27 SP_GIUGNO 2017

In questo articolo analizzeremo la posizione delle stringhe in Javascript

Pubblicato in Javascript
27 SP_GIUGNO 2017

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 javascript che estende le capacità del linguaggio javascript e vi consente di fare le stesse cose ma in maniera più veloce. Inoltre una vasta gamma di plugins utili ad ogni funzionalità che vogliamo aggiungere alle nostre webapp o app mobile. Quelli che seguono sono una parte del nostro video corso disponibile su vari portali che presto vi comunicheremo. Iniziate con un assaggio dei nostri video. Buona visione. 

I tools necessari

[spvideo height='150']https://vimeo.com/188103202[/spvideo]

Importazione del codice

[spvideo height='150']https://vimeo.com/188103647[/spvideo]

Evitare il conflitto

[spvideo height='150']https://vimeo.com/188103199[/spvideo]

I metodi Hide() e Show()

[spvideo height='150']https://vimeo.com/188104732[/spvideo]

Il metodo Toggle()

[spvideo height='150']https://vimeo.com/188103200[/spvideo]

Catturare più elementi Html

[spvideo height='150']https://vimeo.com/188103201[/spvideo]

 

Per vedere il resto del corso vai al seguente link: Videocorso Jquery

 

Pubblicato in Javascript
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
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

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