Il classico esempio Hello World. Poco interessante dal punto di vista della spettacolarità, ma ci permette di introdurre alcuni concetti fondamentali per utilizzare la libreria JQuery in modo agevole.
Per questo esempio, ci limitiamo ad inserire il frammento di codice JavaScript/JQuery direttamente immerso nel codice HTML. Nel file allegato, è gia separato con lo script a se.
<!DOCTYPE html>
<html lang="it">
<head>
<title>Esempio JavaScript</title>
<link href="css/style.css" rel="styleshhet" type="text/css">
<script src="js/jquery.min.js"></script>
<meta charset="utf-8">
</head>
<body>
<h1>Esempio 00</h1>
<h2>Un semplice esempio con il classico Hello World</h2>
<script>
//Prima di tutto, creiamo una funzione ready, ci permetterà
//di essere sicuri che il codice sia eseguito SOLO a pagina html completamente carica
//abituiamoci come se fosse un po' il main di un programma c++
$(document).ready(
//mi definisco una funzione con un selettore e il corispondente innerHTML
function()
{
$("#messaggio").html("Hello World con JQuery");
}
);
</script>
<div id="messaggio"></div>
</body>
</html>Qui il concetto fondamentale è l’uso delle funzioni che possono essere specificate dentro ogni parentesi, ovvero ogni evento. Qui ce n’è una sola nell’evento ready ma cosa posso fare quando l’evento si è caricato? Tutto quello che c’è nella funzione, quindi una istruzione come ora o centinaia se il codice lo richiede! Per il momento vi invito ad osservare che la funzione non ha nome, ne header, è immersa nell’evento stesso ed è una prssi dello scripting.
Il secondo concetto importante è quello di selettore. Possiamo selezionare tutti gli elementi della nostra pagina web come facevamo col JavaScript e il metodo document.getElementById(“”) , ma qui con sintassi semplificata e potenziata. Nell’esempio mi limito a selezionare un Id ma possiamo selezionare di tutto ed anche in formato multiplo!
Esempi:
$(“p”) -> seleziona tutti i contenitori col tag p ovvero <p>
$(“.pippo”) -> seleziona tutti i tag che hanno classe pippo ovvero <div class=”pippo”></div> <p class=”pippo”></p>
$(“:text”) oppure $(“input[type=”text”]”) -> seleziona tutti i tag <input type=”text”>
Poi si possono fare combinazioni degli stessi selezionando combinazioni di tag standard e classi/id ed altri filtri. Si rimanda alla guida ufficiale per i dettagli. Per i nostri esercizi, ci bastano questi per il momento
Ultima modifica 30 Gennaio 2022