Lier mon tableau avec JavaScript
Fermé
DevRevoltiumInc
Messages postés
4
Date d'inscription
samedi 28 novembre 2020
Statut
Membre
Dernière intervention
26 septembre 2021
-
24 sept. 2021 à 20:20
jordane45 Messages postés 38137 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 - 26 sept. 2021 à 10:12
jordane45 Messages postés 38137 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 - 26 sept. 2021 à 10:12
A voir également:
- Lier mon tableau avec JavaScript
- Tableau croisé dynamique - Guide
- Tableau ascii - Guide
- Tableau word - Guide
- Telecharger javascript - Télécharger - Langages
- Les données fournies dans le fichier à télécharger peuvent être synthétisées par le tableau récapitulatif suivant. dans le fichier, générez ce tableau automatiquement (tableau croisé dynamique ou table de pilote) à partir des 4 premières colonnes. cinq valeurs manquent dans le tableau suivant. retrouvez-les dans votre tableau puis reportez-les, arrondies à l’entier le plus proche, dans la zone de réponse. - Forum Excel
4 réponses
Salut,
pas besoin de lier JavaScript à HTML puisque justement le but de JavaScript est largement de manipuler HTML; ainsi que de fournir un langage de programmation côté client(sur la page donc et uniquement sur la page et c'est important pour votre question).
Renseignez vous/apprenez sur le DOM pour cela.
En clair JavaScript peut tout changer sur la page HTML mais il ne changera que le HTML (et le CSS car celui ci est inclus dans HTML).
Un exemple de ce que vous demandez à tester et à comprendre(et là il vaut mieux se tourner vers un cours de JavaScript débutant):
Contenu de la balise script précédente(ou du fichier .js associé à la page HTML)
Sauf que vous parlez ici de pages avec PHP.
Donc si vous utilisez PHP il y a probablement une base de donnée(sinon PHP n'a aucune utilité).
Comme indiqué précédemment JavaScript ne fonctionne uniquement que sur le client, c'est à dire sur le navigateur et dans la page.
A moins de stocker les valeurs/modifications quelques part une fois la page refermée pour l'utilisateur( le seul à voir et avoir les modifications valeurs donc) plus aucune donnée n'est stockée.
Pour cela il faut soumettre les valeurs modifiées/ajoutées avec un formulaire à PHP qui permet de faire une requête à la base via SQL.
PHP étant préprocesseur et générée avant l'affichage de la page(et du HTML) et JavaScript ne fonctionnant uniquement qu'une fois la page chargée il est impossible qu'ils communiquent ensemble.
La méthodologie AJAX le permet en créant des données temporaires(métadonnées) qui pourront être reprises au moment où c'est nécessaire(et donc éviter de recharger la page pour faire appel à PHP) mais c'est une utilisation particulière(et fréquente) mais aussi plus avancée que je vous encourage à utiliser une fois seulement que vous maîtrisez correctement les notion que j'ai tentées d'expliquer ici.
pas besoin de lier JavaScript à HTML puisque justement le but de JavaScript est largement de manipuler HTML; ainsi que de fournir un langage de programmation côté client(sur la page donc et uniquement sur la page et c'est important pour votre question).
Renseignez vous/apprenez sur le DOM pour cela.
En clair JavaScript peut tout changer sur la page HTML mais il ne changera que le HTML (et le CSS car celui ci est inclus dans HTML).
Un exemple de ce que vous demandez à tester et à comprendre(et là il vaut mieux se tourner vers un cours de JavaScript débutant):
<!DOCTYPE html> <html> <head></head> <body> <a href=# id=test1>Un bouton qui change du contenu</a> <a href=# id=ajouter1>ajouter 1</a> <p id=zonetest1> </p> <p id=zoneajout>0</p> <script> ... //-- voir encadré suivant ou mieux à mettre dans un fichier .js externe </script> </html> </body>
Contenu de la balise script précédente(ou du fichier .js associé à la page HTML)
/* un sélecteur permet d'obtenir un élément HTML de la page ici avec l'id du lien a test1 ;
avec var on l'enregistre donc dans une variable*/
var boutonTest1=document.getElementById('test1');
/* même chose avec la zone de texte de paragraphe avec ID 'zonetest1'*/
var zone1=document.getElementById('zonetest1');
/* addEventListener(voir doc pour plus d'info) est une méthode qui ajoute un événement (le premier paramètre spécifie un clic sur le lien et lui associe une fonction(une fonction anonyme ici, le seconde paramètre)*/
boutonTest1.addEventListener('click', function(){
zone1.innerHTML+=" : contenu texte modifié par JavaScript";
});
/* même chose avec un calcul mathématique à la place d'un texte
Ici je n'utilise pas de variable pour stocker un élément mais directement les sélecteurs, chaque méthode à ses avantages et correspond à une utilisation différente, par exemple si l'on a besoin d'utiliser plusieurs fois dans le script un élément il est logique de le stocker dans une variable pour y accéder plus facilement et rapidement
*/
document.getElementById('ajouter1').addEventListener('click',
//-- le 2nd paramètre est toujours une fonction anonyme, regardons en détail son contenu
function(){
var valeur=document.getElementById('zoneajout').innerHTML;
/* .innerHTML(méthode) suivit du signe égal permet de modifier le contenu d'un élément, ici il n'est suivit d'aucun attribution avec "=" donc va fournir le contenu de la balise sélectionné(paragraphe p dont l'id est zoneajout dans la variable
*/
/* comme pour PHP JavaScriupt est non typé, il faut donc s'assurer que la valeur texte dans la variable est bien un nombre, cela se fait avec parseInt qui permet de s'assurer que la valeur retournée soit bien un nombre(entier ici) sinon il se produira une erreur*/
valeur=parseInt(valeur);
valeur++;/* équivalent de valeur = valeur+1; donc ajoute 1 à un nombre entier (0 avant le premier clic)
});
Sauf que vous parlez ici de pages avec PHP.
Donc si vous utilisez PHP il y a probablement une base de donnée(sinon PHP n'a aucune utilité).
Comme indiqué précédemment JavaScript ne fonctionne uniquement que sur le client, c'est à dire sur le navigateur et dans la page.
A moins de stocker les valeurs/modifications quelques part une fois la page refermée pour l'utilisateur( le seul à voir et avoir les modifications valeurs donc) plus aucune donnée n'est stockée.
Pour cela il faut soumettre les valeurs modifiées/ajoutées avec un formulaire à PHP qui permet de faire une requête à la base via SQL.
PHP étant préprocesseur et générée avant l'affichage de la page(et du HTML) et JavaScript ne fonctionnant uniquement qu'une fois la page chargée il est impossible qu'ils communiquent ensemble.
La méthodologie AJAX le permet en créant des données temporaires(métadonnées) qui pourront être reprises au moment où c'est nécessaire(et donc éviter de recharger la page pour faire appel à PHP) mais c'est une utilisation particulière(et fréquente) mais aussi plus avancée que je vous encourage à utiliser une fois seulement que vous maîtrisez correctement les notion que j'ai tentées d'expliquer ici.
DevRevoltiumInc
Messages postés
4
Date d'inscription
samedi 28 novembre 2020
Statut
Membre
Dernière intervention
26 septembre 2021
Modifié le 25 sept. 2021 à 21:30
Modifié le 25 sept. 2021 à 21:30
Oh d'accord ça à l'air plus complexe que je prévoyais mais se que je comprend absolument pas c'est que vous dites que JavaScript ne fonctionne que coté client alors que pas du tout c'est le PHP qui fonctionne côté client le Javascript est côté serveur sinon oui il y a une base de donné pour les utilisateur (Gardien de but) mais si je fais un formulaire en PHP il faudrait que je le stock dans une table avec 10 champs ? Par exemple 1er champs id, 2eme 1 ere case 3 eme camps 2eme cases et ainsi de suite ? Sinon vous m'avez beaucoup aidé et bien indiquez vers ou commencer mais je comprend pas la partie du début de mon texte..
EDIT::: Le code ne fonctionne pas de mon côté
EDIT::: Le code ne fonctionne pas de mon côté
jordane45
Messages postés
38137
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 avril 2024
4 649
Modifié le 26 sept. 2021 à 00:30
Modifié le 26 sept. 2021 à 00:30
je comprend absolument pas c'est que vous dites que JavaScript ne fonctionne que coté client alors que pas du tout c'est le PHP qui fonctionne côté client le Javascript est côté serveur
Ben non.. c'est bien l'inverse
le PHP s'exécute côté serveur. C'est lui qui permet d'accéder aux données de la bdd et de générer le code renvoyé au navigateur.
Le Javascript, lui, s'exécute une fois que la page se trouve dans le navigateur ( c'est côté "client" ).
Il existe aussi des "passerelles" entre le javascript et le php .. on appel ça l'ajax.
Mais bon, ce n'est pas, pour l'instant, le thème de ta question...
Comme te l'a suggéré Totorox, il serait bien que tu commences par te former à l'utilisation du javascript. Tu trouveras sans mal sur internet de nombreux cours/tutos à ce sujet.
Ensuite, si tu persistes à avoir des soucis avec ton code.. au lieu de juste dire ça ne marche pas.. montre ce que tu as codé.
Et bien entendu, lorsque l'on parle de javascript .. on pense à regarder dans la console de son navigateur si on peut voir d'éventuels messages d'erreurs... ça aide pour corriger les code.
NB: Le code de Totorox n'est pas vraiment "faux" .. mais il est fortement conseillé de bien mettre chaque attributs html entre quote.
Autrement dit,
<a href="#" id="test1">Un bouton qui change du contenu</a> <a href="#" id="ajouter1">ajouter 1</a> <p id="zonetest1"> </p> <p id="zoneajout">0</p>
En plus le code était incomplet ..
Le voici corrigé
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<meta charset="utf-8">
</head>
<body>
<a href="#" id="test1">Un bouton qui change du contenu</a>
<a href="#" id="ajouter1">ajouter 1</a>
<p id="zonetest1">
</p>
<p id="zoneajout">0</p>
<script>
/* un sélecteur permet d'obtenir un élément HTML de la page ici avec l'id du lien a test1 ;
avec var on l'enregistre donc dans une variable*/
var boutonTest1=document.getElementById('test1');
/* même chose avec la zone de texte de paragraphe avec ID 'zonetest1'*/
var zone1=document.getElementById('zonetest1');
var ajouter1=document.getElementById('ajouter1');
/* addEventListener(voir doc pour plus d'info) est une méthode qui ajoute un événement (le premier paramètre spécifie un clic sur le lien et lui associe une fonction(une fonction anonyme ici, le seconde paramètre)*/
boutonTest1.addEventListener('click', function(){
zone1.innerHTML+=" : contenu texte modifié par JavaScript";
});
/* même chose avec un calcul mathématique à la place d'un texte
Ici je n'utilise pas de variable pour stocker un élément mais directement les sélecteurs, chaque méthode à ses avantages et correspond à une utilisation différente, par exemple si l'on a besoin d'utiliser plusieurs fois dans le script un élément il est logique de le stocker dans une variable pour y accéder plus facilement et rapidement
*/
ajouter1.addEventListener('click', //-- le 2nd paramètre est toujours une fonction anonyme, regardons en détail son contenu
function(){
var valeur=document.getElementById('zoneajout').innerHTML;
/* .innerHTML(méthode) suivit du signe égal permet de modifier le contenu d'un élément, ici il n'est suivit d'aucun attribution avec "=" donc va fournir le contenu de la balise sélectionné(paragraphe p dont l'id est zoneajout dans la variable
*/
/* comme pour PHP JavaScriupt est non typé, il faut donc s'assurer que la valeur texte dans la variable est bien un nombre, cela se fait avec parseInt qui permet de s'assurer que la valeur retournée soit bien un nombre(entier ici) sinon il se produira une erreur*/
valeur=parseInt(valeur);
valeur++;/* équivalent de valeur = valeur+1; donc ajoute 1 à un nombre entier (0 avant le premier clic)*/
document.getElementById('zoneajout').innerHTML = valeur;
});
</script>
</body>
</html>
Hello,
merci pour la "correction" j'avais séparé le code pour faire apparaître les commentaires du js qui n'apparaissait pas en couleur avec l'intitulé HTML.
Effectivement si DevRevoltiumInc ne sait pas comment intégrer JavaScript à une page web il y a du chemin à parcourir, comme il parlait de PHP je pensais qu'il avait quelques notions en JavaScript qui est bien plus simple à utiliser(car pas besoin de serveur fonctionne dans le navigateur).
Pour l'absence des guillemets c'était plus rapide à écrire et je voulais montrer la notation HTML5(qui est donc tolérée en HTML5) sans simples ou double quotes qui est permise sauf si la valeur d'attribut contient un espace.
"mais si je fais un formulaire en PHP il faudrait que je le stock dans une table avec 10 champs ? Par exemple 1er champs id, 2eme 1 ere case 3 eme camps 2eme cases et ainsi de suite ? "
Déjà que voulez vous dire par formulaire PHP, un formulaire c'est du HTML et sert à envoyer les données, à une page PHP par exemple.
Euh absolument pas , avez vous fait une analyse de votre base de données et système d'informations? En tout cas vous ne détaillez pas vos besoins ou alors je n'ai pas fait attention.
A quoi correspond première case? En terme de donnée réelle et non utilité du programme.
Une chose est sûre si par hasard les notions premières cases et suivantes sont représentatives de la nature des données il faut simplement retenir mes champs numéro de case ou mieux encore emplacement du tir (en haut à droite, en bas à droite etc...).
Donc
par exemple(et peut-être incomplet et oncorrect je ne connais pas votre système):
champs table "Tir au but"
date/heure/tir (en timestamp Unix est identifiant)
emplacement (9 valeurs acceptées)
résultat (arrêt ou but peut facilement être passé en booléen)
...éventuellement associer le nom du gardien et celui du tireur(clé étrangère pour lier une table joueur)
Pour rappel ce qui caractérise un champ de donnée ce n'est pas sa valeur mais qu'elle soit unique. Dans la question/exemple que vous proposez un tir ne peut avoir qu'à un seul endroit à la fois donc c'est un seul champ. Si il y avait 2 palets donc 2 tors possible simultanément il faudrait séparer en 2 champs distincts: emplacement palet1, emplacement palets2 car chacun peut avoir une valeur(l'emplacement du tir) différent.
O, s'éloigne quand même de votre question initiale car vous manquez d'approfondissement dans chacun des domaines.
Avant de vous poser la question sur JavaScript il serait plus utile de savoir les bases(comment intégrer et utiliser JavaScript et aussi pourquoi et dans quel contexte).
Mêmes choses pour les formulaires(c'est quoi un formulaire, à quoi ça sert), le PHP et les bases de données(le regroupement en entités logique qui permet d'obtenir des tables de données).
Bon travail alors car il faut vous retrousser les manches ;)
merci pour la "correction" j'avais séparé le code pour faire apparaître les commentaires du js qui n'apparaissait pas en couleur avec l'intitulé HTML.
Effectivement si DevRevoltiumInc ne sait pas comment intégrer JavaScript à une page web il y a du chemin à parcourir, comme il parlait de PHP je pensais qu'il avait quelques notions en JavaScript qui est bien plus simple à utiliser(car pas besoin de serveur fonctionne dans le navigateur).
Pour l'absence des guillemets c'était plus rapide à écrire et je voulais montrer la notation HTML5(qui est donc tolérée en HTML5) sans simples ou double quotes qui est permise sauf si la valeur d'attribut contient un espace.
"mais si je fais un formulaire en PHP il faudrait que je le stock dans une table avec 10 champs ? Par exemple 1er champs id, 2eme 1 ere case 3 eme camps 2eme cases et ainsi de suite ? "
Déjà que voulez vous dire par formulaire PHP, un formulaire c'est du HTML et sert à envoyer les données, à une page PHP par exemple.
Euh absolument pas , avez vous fait une analyse de votre base de données et système d'informations? En tout cas vous ne détaillez pas vos besoins ou alors je n'ai pas fait attention.
A quoi correspond première case? En terme de donnée réelle et non utilité du programme.
Une chose est sûre si par hasard les notions premières cases et suivantes sont représentatives de la nature des données il faut simplement retenir mes champs numéro de case ou mieux encore emplacement du tir (en haut à droite, en bas à droite etc...).
Donc
par exemple(et peut-être incomplet et oncorrect je ne connais pas votre système):
champs table "Tir au but"
date/heure/tir (en timestamp Unix est identifiant)
emplacement (9 valeurs acceptées)
résultat (arrêt ou but peut facilement être passé en booléen)
...éventuellement associer le nom du gardien et celui du tireur(clé étrangère pour lier une table joueur)
Pour rappel ce qui caractérise un champ de donnée ce n'est pas sa valeur mais qu'elle soit unique. Dans la question/exemple que vous proposez un tir ne peut avoir qu'à un seul endroit à la fois donc c'est un seul champ. Si il y avait 2 palets donc 2 tors possible simultanément il faudrait séparer en 2 champs distincts: emplacement palet1, emplacement palets2 car chacun peut avoir une valeur(l'emplacement du tir) différent.
O, s'éloigne quand même de votre question initiale car vous manquez d'approfondissement dans chacun des domaines.
Avant de vous poser la question sur JavaScript il serait plus utile de savoir les bases(comment intégrer et utiliser JavaScript et aussi pourquoi et dans quel contexte).
Mêmes choses pour les formulaires(c'est quoi un formulaire, à quoi ça sert), le PHP et les bases de données(le regroupement en entités logique qui permet d'obtenir des tables de données).
Bon travail alors car il faut vous retrousser les manches ;)
jordane45
Messages postés
38137
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 avril 2024
4 649
>
Totorox
26 sept. 2021 à 10:12
26 sept. 2021 à 10:12
merci pour la "correction" j'avais séparé le code pour faire apparaître les commentaires du js qui n'apparaissait pas en couleur avec l'intitulé HTML.
Ce n'est pas la question.
Tu avais juste oublié de remplir la zoneajout une fois la valeur incrémentée
DevRevoltiumInc
Messages postés
4
Date d'inscription
samedi 28 novembre 2020
Statut
Membre
Dernière intervention
26 septembre 2021
26 sept. 2021 à 00:28
26 sept. 2021 à 00:28
Merci de l'info ça marche et je vais me renseigner sur le javascript merci pour votre aide
