Javascript è un linguaggio di scripting lato client interpretato (il codice viene eseguito da un interprete senza essere tradotto in linguaggio macchina) ed orientato agli oggetti (nella programmazione ad oggetti vengono definiti degli oggetti, che hanno proprietà e metodi, capaci di interagire fra di loro. Il linguaggio permette di accedere agli stili ed al contenuto di una pagina modificandoli. Javascript deriva da Java e quindi ha una sintassi simile a quella del linguaggio C. Javascript è un linuaggio case-sensitive dunque distingue le lettere maiuscole da quelle minuscole. Il codice può essere inserito all’interno del tag <head> oppure <body> utilizzando l’apposito tag contenitore <script> (embedded) <head> <title>Prova script</title> <script language="javascript" type="text/javascript"> <!-- Nascondi lo script ai vecchi browser alert("hello world!"); //fine occultamento script --> </script> </head> in un file esterno caricato utilizzando il tag <script> all’interno di <head> nel seguente modo: <script src="nome_file.js" type="text/javascript"> </script> oppure si può sfruttare il codice di scripting direttamente nei tradizionali tag di un documento HTML per gestire gli eventi. <Tag_HTML gestore_evento="Codice Javascript"> <h2 onmouseover="this.style.color=’red’ ; this.style.fontSize=’30pt’;"> Intestazione <h2> Separati da un ‘;’ si possono inserire più comandi javascript. I gestori degli eventi più comuni sono: - onload – il browser carica gli elementi - onunload – l’utente esce dalla pagina - onblur – l’utente si sposta da un elemento all’altro (cambiamento di focus) - onfocus – l’utente porta il focus sull’oggetto - onchange – l’utente cambia il valore dell’oggetto - onerror – il caricamento di un documento o pagina provoca un errore - onreset – l’utente preme il pulsante reset - onsubmit – l’utente preme il pulsante submit - onselect – l’utente seleziona del testo dall’oggetto - onkeydown – l’utente preme un tasto - onkeyup – l’utente rilascia un tasto - ondblclick – l’utente fa doppio click col pulsante sx del mouse - onclick – l’utente clicca sull’oggetto - onmousedown – l’utente preme il pulsante sinistro del mouse - onmouseup – l’utente rilascia il pulsante sinistro del mouse - onmouseover – l’utente sposta il puntatore del mouse all’interno dell’oggetto - onmousemove – l’utente sposta il puntatore del mouse quando questo si trova già all’interno dell’oggetto - onmouseout – l’utente sposta il puntatore del mouse fuori dai confini dell’oggetto. Gli elementi di una pagina HTML possono essere recuperati ricorrendo al loro attributo ‘id’. Es. Il <p id="ParagarfoUno"> … </p> può essere recuperato in una sezione javascript mediante il metodo getElementById() nel seguente modo: var p1=document.getElementById("ParagrafoUno"). Tramite la variabile p1 sarà possibile: - aggiungere del testo al paragrafo p1.InnerHTML="Aggiungo questo testo"; - prelevare il valore di un attributo p1.getAttribute("align"); - impostare il valore di un attributo p1.setAttribute("align","center"); Gli elementi possono essere recuperati anche tramite il tipo di tag Es. //i riferimenti a tutte le immagini presenti nel documento vengono inseriti nel vettore immagini var immagini=document.getElementsByTag("img"); //assegno a numImg il numero di immagini della pagina (dimensione del vettore) var numImg=immagini.lenght; //utilizzo un ciclo per modificare il colore di sfondo di tutte le immagini for (i=0;i<numImg;i++) immagini[i].style.background="#000000"; FINESTRE DI DIALOGO Javascript permette di gestire tre tipi di finestre: - alert - confirm - prompt alert e confirm permettono di visualizzare un testo in una finestra, prompt consente l’immissione di testo. alert ("prova di alert"); risposta=confirm ("prova di confirm"); testo_digitato=prompt("prova di prompt"); CONVERSIONE DI TIPO In alcuni casi può essere utile effettuare il cast (conversione di tipo) di una variabile. Per convertire un numero in una stringa var stringa=String(12); per convertire una stringa in un numero var stringaNum="123"; var numInt=parseInt(stringaNum); var numFloat=parseFloat(stringaNnum); var numFloat=Number(stringaNnum); CREARE ELEMENTI //creo un riferimento ad un paragrafo var nuovoElemento=document.createElement("p"); //il nuovo paragrafo viene ‘attaccato’ al body document.body.appendChild(nuovoElemento); //scrivo un testo nel paragrafo utilizzando il metodo createTextNode() nuovoElemento.appendChild(document.createTextNode("CIAO MONDO"));
Torna su DPD- 2013