Nous avons déjà pas mal exploré javascript et il est temps de structuré notre code javascript ainsi que le rendre modulaire c’est-à-dire que nous allons créer une classe qui servira comme un plan qui définit un Object et celui-ci nous allons le rendre mobile en permettant l’utilisation de cette class dans d’autre fichier Javascript.
Création de class
Nous allons commencer par créer une class que nous allons nommer Product et qui va donc représenter un plan d’un produit.
Pour cela nous allons définir deux variables qui seront propre à notre Produit qui serra le nom et le prix unité.
class Product{
constructor(name,price){
this.name = name
this.price = price
}
}
Bien sûr pour le moment on ne peut rien faire de spéciale avec notre class mais si nous ajoutons une fonction qui nous permettra de calculer la TVA on peut utiliser une attribue de notre class Product.
function calculateVat(product,vat){
return product.price *(vat/100);
}
Nous allons aussi créer une autre fonction qui nous permettra de calculer le prix TTC
function calculateTotalVat(product,vat){
return product.price + calculateVat(product,vat);
}
Les modules dans JavaScript
Alors désormais que nous avons notre class et ces méthodes nous allons voir comment le rendre modulaire le but est de faire en sorte que nous puissions utiliser cette class et ces fonctions dans un autre fichier JavaScript.
export default class Product{
constructor(name,price){
this.name = name
this.price = price
}
}
Vous allez voire c’est plutôt simple est logique nous allons devoir commencer à dire à notre class que nous voulons l’exporter et cela on le fait en ajoutant export default devant le class Product
Cela nous permettra d’exporter notre class.
Dans un autre fichier JavaScript nous allons dire que nous voulons utiliser cette class exporter en indiquant que nous voulons l’importer comme suite.
import Product from '/Product.js'
const product = new Product('simple pc', 100);
document.getElementById('ShowProduct').innerHTML=`
name: ${product.name} <br/>
unit price: ${product.price} € <br/>
`
Ici nous pouvons désormais utiliser notre class Product en instanciant un objet avec le new et puis pour montrer que cela fonctionne nous allons l’afficher sur une page HTML comme suite.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Tuto De Rien</title>
</head>
<body>
<div class="container">
<div id="ShowProduct"></div>
</div>
<script src="code.js" type="module"></script>
</body>
</html>
Importer les fonctions
Afin d’importer les fonctions de la class Product nous allons d’abord devoir indiquer les méthodes que nous voulons exporter comme suite
export function calculateVat(product,vat){
return product.price *(vat/100);
}
export function calculateTotalVat(product,vat){
return product.price + calculateVat(product,vat);
}
Puis dans notre fichier ou nous voulons importer les méthodes on les ajoute comme suite et nous allons l’utiliser de faire les calcule dans le innerHTML
import Product, {calculateVat,calculateTotalVat} from '/Product.js'
const product = new Product('simple pc', 100);
document.getElementById('ShowProduct').innerHTML=`
name: ${product.name} <br/>
unit price: ${product.price} € <br/>
vat: ${calculateVat(product,21)} € <br/>
Total price : ${calculateTotalVat(product,21)} €
`
Conclusion
Wow nous avons bien avancer avec javascript et la raison pourquoi j’ai décidé d’octroyer plus de temps sur javascript est simplement que je trouve personnellement que l’avenir du développement web se trouve dans javascript qui permet de faire beaucoup de chose et savoir utiliser javascript sans l’utilisation des Framework est très important car nous avons le contrôle total
Bonsoir grand c’est comment et la soirée s’il vous plaît aide moi je voulais vous demander le lien pour télécharger le tableau