Javascript – Funzioni
Funzioni
Il seguente script presenta la sintassi di una funzione Javascript:
var content="Testo proveniente dallo script";
function update(){
var elContent=document.getElementById("content");
elContent.textContent=content;
}
update();
A differenza dei linguaggi tipizzati come il C, non è necessario stabilire il tipo restituito nel caso ce ne sia uno o void nel caso non ci sia . Lo script va ad aggiornare il contenuto di di un div. Ora lo stiamo facendo con una stringa ma più avanti imparerai a prendere i dati dinamicamente da un database grazie alle chiamate AJAX, Il principio rimane lo stesso.
Di seguito la pagina web che richiamo lo script precedente
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Function</title>
</head>
<body>
<div id="content"></div>
<script src="js/function.js"></script>
</body>
</html>
Funzioni con argomenti
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Function</title>
</head>
<body>
<div id="YOB">2000</div>
<div id="age"></div>
<script src="js/function-with-arguments.js"></script>
</body>
</html>
Nel seguente script preleveremo l’anno di nascita dal div con id YOB e passandolo come argomento della funzione calculateAge restituiremo l’età in base all’anno corrente e successivamente la assegneremo al contenuto del div con id age
var YOBValue=document.getElementById('YOB').textContent;
function calculateAge(YOB){
var currentDate=new Date();
var currentYear=currentDate.getFullYear();
var age=currentYear-YOBValue;
return age;
}
document.getElementById('age').textContent=calculateAge();
Oggetti : literal notion
Come nell’analogia proposta nell’esempio sulle funzioni possiamo immaginare di creare un oggetto di tipo User con i dati provenienti da un database, nel nostro esempio useremo stringhe e numeri
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Function</title>
</head>
<body>
<div id="user-data"></div>
<script src="js/object-literal.js"></script>
</body>
</html>
Col il seguente script accederemo agli attributi e al metodo dell’oggetto user con la dot notation aggiornando il contenuto del div con id user-data
var user = {
firstName : 'Mario',
lastName : 'Rossi',
YOB : 2000,
age : function(){
var currentYear= new Date().getFullYear();
return currentYear - this.YOB;
}
}
var elUserData=document.getElementById("user-data");
elUserData.textContent="Nome: " + user.firstName + " Cognome: " + user.lastName + " Età: " + user.age();
Oggetti: Constructor notation
La seguente tecnica ci permette di poter costruire più oggetti avendo a differenza della sintassi precedente un costruttore
function User(firstName,lastName,YOB){
this.firstName = firstName;
this.lastName = lastName;
this.YOB = YOB;
this.age = function(){
var currentYear= new Date().getFullYear();
return currentYear - this.YOB;
};
}
var user=new User("Mario","Rossi",2000);
var elUserData=document.getElementById("user-data");
elUserData.textContent="Nome: " + user.firstName + " Cognome: " + user.lastName + " Età: " + user.age();
Nota che utilizziamo il nome User con la iniziale maiuscola per definire il costruttore della classe e user con la iniziale minuscola per definire un istanza della classe quindi un oggetto, per testare lo script usa la seguente pagina HTML.
La sintassi potrebbe ricordare quella del linguaggio Java, ma si deve ricordare che i due linguaggi non sono legati in nessun modo sebbene abbiano diversi elementi in comune.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Function</title>
</head>
<body>
<div id="user-data"></div>
<script src="js/object-constructor.js"></script>
</body>
</html>