Esempi

Integrazione con HTML

Script in pagina HTML:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        function AlCaricamento_OnLoad()
        {
            alert('PRIMO Caricamento della pagina');
        }
    </script>
    <style>
       h1 {color:red;}
    </style>
</head>
<body onload="AlCaricamento_OnLoad()">
    <div id="divContenuto">
 
    </div>
</body>
</html>

Esempio richiamo ad una libreria in file esterno "MiaLibreria.js":

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script type="text/javascript" src="MiaLibreria.js"></script>
</head>
<body>
</body>
</html>

Parse del DOM

Esempi presi da StackOverflow!
Esempio usando JQuery:

$('body *').each(function(){                                                                                                                            
      var $this = $(this);                                                                                                                                
      //do stuff                                                                                                                                         
});

Esempio usando JavaScript tradizionale:

var items = document.getElementsByTagName("*");
    for (var i = 0; i < items.length; i++) {
        //do stuff
    }

ATTENZIONE per ciascun nodo\tag\elemento del DOM possiamo ottenerne le seguenti interessanti informazioni (attributi):

nodeName: Nome del TAG.
tagName: Nome del TAG ... come sopra.
innerHTML: contenuto in formato HTML del nodo, questo include anche il testo HTML degli elementi contenuti.
childNodes: array degli elementi HTML eventualmente innestati, questo include anche il testo stesso di un TAG che generalmente è l'ultima informazione contenuta.

Stampa del contenuto dei TAG del Body

In particolare visualizza il TAG name degli oggetti, esempio d'uso del blocco try catch

function Pulsante_onclick()
{
	try {
		var items = document.getElementsByTagName("*");
		alert('Numero elementi nel DOM: ' + items.length);
 
		var isBody = false;
		var isEndLoop = false;
		var i = 0;
 
		while (i < items.length 
			&& !isEndLoop)
		{                   
			// Posizionato qui per evitare di stampare il contenuto del Body completo 
			// ma dei soli TAG contenuti
			if (isBody) {
				alert('"' + items[i].tagName + '" content: "' + items[i].textContent + '"');
				if (items[i].tagName.toUpperCase() == 'INPUT') {
					isEndLoop = true;
				}
			}
			else {
				//alert('No body: "' + items[i].tagName + '" content "' + items[i].textContent + '"');
			}
 
			if (items[i].tagName.toUpperCase() == 'BODY') {
				isBody = true;
			}
 
			i++;
		}
		alert('Fine');
	} catch (e) {
		alert(e.message);
	}
}

Controllo della pagina

Redirect

La simulazione della redirect HTML è window.location.replace(...) .
La.. replace è is better than using migliore della window.location.href, perché la replace() non mantiene la pagina originaria nello storico della sessione, il che significa che l'utente non perde tempo in giri inutili.

// similar behavior as an HTTP redirect
window.location.replace("http://stackoverflow.com");
 
// similar behavior as clicking on a link
window.location.href = "http://stackoverflow.com";

Varie

Passare lo stato tra pagine

Ad esempio per passare un Token di autenticazione tra pagine o qualsiasi cosa che sia uno stato da persistere.

localStorage

Usando l'oggetto: localStorage:

//Pagina di partenza:
var variabileCondivisaOvunque = prompt("testo condiviso");
localStorage.setItem("nomeDatoAllaRisorsa",variabileCondivisaOvunque );
 
//Sulla pagina successiva
window.onload = alert(localStorage.getItem("nomeDatoAllaRisorsa"));

sessionStorage

Usando l'oggetto: sessionStorage:

var token = 'pizza scamosciata';
sessionStorage.setItem('accessToken', token);
// To retrieve:     sessionStorage.getItem('accessToken');
// To remove:       sessionStorage.removeItem('accessToken');
 
setTimeout(function() {}, 5000);
window.location.replace("Home.html");

Attesa dell'esecuzione

(esempi da StackOverflow)

Soluzione 1

Anziché usare un loop si può chiamare ricorsivamente un metodo che esegue una funzione ogni secondo usando setTimeout:

setTimeout(function () {
   // il tempo passa senza nessuna attività
}, 2000);

Altro approccio:

function sleep(miliseconds) {
   var currentTime = new Date().getTime();
 
   while (currentTime + miliseconds >= new Date().getTime()) {
   }
}

Soluzione 2

double delayInSeconds = 2.0;
dispatch_time_t popTime = dispatch_time(DISPATCH_TIME_NOW, (int64_t)(delayInSeconds * NSEC_PER_SEC));
dispatch_after(popTime, dispatch_get_main_queue(), ^(void){
  NSLog(@"Do some work");
});

setTimeout()

La funzione settimeout() ritarda l'esecuzione di uno script di n millisecondi. Nel seguente esempio eseguirà una funzione anonima con un alert all'interno dopo 3 secondi.

setTimeout(function(){ alert("Hello"); }, 3000);

La seguente è un esempio realistico in cui si fa sparire un pulsante dopo n secondi dopo l'intero caricamento di una pagina:

	document.addEventListener('DOMContentLoaded', function() {
		try {	
			setTimeout(function(){ 
				if (typeof document.getElementById('O365_MainLink_Settings') != 'undefined'
					&& document.getElementById('O365_MainLink_Settings').style.display != 'none') 
				{				
					document.getElementById('O365_MainLink_Settings').style.display = 'none';
				}
				else
					alert('Non trovato O365_MainLink_Settings');			
			}, 1000);
		} catch (e) {			
			alert(e.message); 
		}
	}, false);

Verifiche su oggetti

Sui DIV

Verifica se un DIV esiste, basta la verifica booleana

if (!document.getElementById("elementId")) {
    window.location.href = "redirectpage.html";
}

Mappa e Link

JavaScript | Teoria ToolTips

HTML | JQuery

Parole chiave:

Navigation

Help

Tools

WIDGETS

Widgets

Recent changes

Wanted articles

Who is online?

Article tools

Java Script:Esempi ToolTips

From Aino Wiki

Contents