Getter, Setter
Utilisation des getter et Setter
Méthodes simplifiées
Exemple :
Dans le dossier 5-poo :
Ajoutez le fichier 2-getSet.html
1
2
<html lang="fr">
3
<head>
4
<title>JS POO Objet</title>
5
<meta charset="utf-8" />
6
<meta name="viewport" content="width=device-width, initial-scale=1" />
7
<link
8
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"
9
rel="stylesheet"
10
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"
11
crossorigin="anonymous"
12
/>13
<style> main > div {background-color: #c5c5c5;}</style>
14
</head>
15
<body>
16
<header class="p-2 bg-secondary text-light bg-gradient">
17
<section>
18
<h1>JS - POO - Objet</h1>
19
</section>
20
</header>
21
22
<main>
23
<div class="p-3 row">
24
<h2>Cercles</h2>
25
</div>
26
27
<div class="row p-3">
28
<div class="col-form-label col-1">Origine</div>
29
<div class="col-4 row">
30
<div class="col input-group mb-3">
31
<span class="input-group-text">X</span>
32
<input type="text" id="x" class="form-control">
33
</div>
34
<div class="col input-group mb-3">
35
<span class="input-group-text">Y</span>
36
<input type="text" id="y" class="form-control">
37
</div>
38
</div>
39
</div>
40
<div class="row p-3">
41
<div class="col-form-label col-1">Rayon</div>
42
<div class="col-4 row">
43
<div class="col input-group mb-3">
44
<span class="input-group-text">Rayon</span>
45
<input type="text" id="rayon" class="form-control">
46
</div>
47
</div>
48
<div class="col-2">
49
<button type="submit" onclick="ajouterCercle();" class="btn btn-primary">Ajouter Cercle</button>
50
</div>
51
</div>
52
53
<div class='row p-3'>
54
<div class="col-form-label col-1">Liste</div>
55
<div class='col-6'>
56
<textarea id="liste" cols="60" rows="8" readonly></textarea>
57
</div>
58
</div>
59
60
61
</main>
62
63
<footer>
64
<nav class="navbar navbar-expand-lg navbar-light bg-secondary bg-gradient">
65
<ul class="navbar-nav mr-auto mb-2 mb-lg-0">
66
<li class="nav-item">
67
<a class="nav-link" href="https://www.univ-littoral.fr/">ULCO</a>
68
</li>
69
<li class="nav-item">
70
<a class="nav-link" href="https://fcu.univ-littoral.fr/">FCU</a>
71
</li>
72
<li class="nav-item">
73
<a class="nav-link" href="https://deust-bcmm.univ-littoral.fr/">W2D</a>
74
</li>
75
</ul>
76
</nav>
77
</footer>
78
79
<script src="js/1-objet.js"></script>
80
81
</body>
82
</html>
Dans le dossier js ajoutez le fichier 2-getSet.js
1
const x = document.querySelector('#x');
2
const y = document.querySelector('#y');
3
const rayon = document.querySelector('#rayon');
4
const liste = document.querySelector('#liste');
5
6
const objetCercle = {
7
_x: 0,
8
_y: 0,
9
_rayon: 0,
10
get x() {
11
return this._x + 'cm';
12
},
13
set x(x) {
14
this._x = x;
15
},
16
get y() {
17
return this._y + 'cm';
18
},
19
set y(y) {
20
this._y = y;
21
},
22
get rayon() {
23
return this._rayon + 'cm';
24
},
25
set rayon(rayon) {
26
this._rayon = rayon;
27
},
28
perimetre() {
29
return 2 * Math.PI * this._rayon;
30
}
31
}
32
33
const ajouterCercle = () => {
34
objetCercle.x = +x.value;
35
objetCercle.y = +y.value;
36
objetCercle.rayon = +rayon.value;
37
liste.value = `Cercle de centre (${objetCercle.x}, ${objetCercle.y}) de périmètre ${objetCercle.perimetre().toFixed(2)}cm`;
38
console.log(objetCercle);
39
}
_x: 0 : _x valeur interne de x
get x() : permet de retourner la valeur de _x filtrée.
set x(x) : permet de stocker la valeur de _x en ayant la possibilité de la filtrer.
Ouvrez dans votre navigateur le fichier 2-getSet.html.
Ouvrez la console. Vous pouvez voir l'objet objetCercle.