1. Retour à l'accueil Général
  2. Accueil activité
  3. Un site dynamique , partie I
    1. Descriptif : le DOM
    2. HTML5, Boostrap
    3. Javascript et Jquery
    4. Tableau à dimensions multiples
  4. Un site dynamique partie II

Un site dynamique

Javascript et Jquery

  • 2c) Si on récupère les marques dans une base de données, cela ne fonctionne plus, comment passer plusieurs marques dans une seule variable ?
    On utilise un tableau (voir par exemple ici https://www.toutjavascript.com/savoir/savoir09.php3).
    Dans le document html, remplacer la liste par une liste vide:
  • On va la compléter dynamiquement, noter au passage qu'on a placé un identifiant unique pour repérer la liste en jquery (et css).
    2c1 et 2 Dans monscript.js , définir une variable de type tableau (pas encore en json) nommée lesmarques et contenant les 4 marques listées ci-dessus .
    Créer en suite une variable liste vide (liste='';)
    ??
    	var lesmarques=new Array("ducati","honda","kawazaki","suzuki");
    	liste ='';
    
    
    	
  • Parcourir ensuite le tableau élément par éléments , pour chaque élément rencontré, ajouter une entrée à la variable liste en utilisant la syntaxe :
    liste +=
    Ensuite,dans la partie jquery du script - sous $( document ).ready(function() {
    Affecter le contenu de la liste à votre liste ainsi : $("#maliste").html(liste).
    ??
    	var letitre = 'Un site de présentation de motos';
    
    	var lesmarques=new Array("ducati","honda","kawazaki","suzuki");
    	var tailletableau = lesmarques.length;
    	var liste= '';
    	
    	
    	for(i=0;i< tailletableau ;i++) {
    		liste+='
  • '+lesmarques[i]+'
  • '; } //On attend que le document soit entièrement chargé avant d'agir $( document ).ready(function() { $('#title').html(letitre); $('#maliste').html(liste); });
    • Ligne 3, c'est ainsi qu'on définit un tableau en javascript
    • ligne 4 on récupère la taille du tableau, ici 4, soit des élements indexés de 0 à 3 lesmarques[2] correspond à kawazaki
    • Ligne 8, on parcourt le tableau, de i=0 à 3
    • Ligne 9 on fabrique la liste (qui en fait un un texte HTML que l'on affichera ensuite
    Afficher le visuel attendu