Javascript – Funzioni, Oggetti

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>

Pubblicato da Carlo Contardi

Carlo Contardi, docente di informatica e sviluppatore Full Stack, condivide la sua passione per la programmazione e l’informatica attraverso il suo blog Space Coding. Offre preziosi consigli e soluzioni pratiche a chi vuole imparare a programmare o migliorare le proprie abilità. 🚀👨‍💻

Translate »