IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Projet javascript/html ISN


Sujet :

JavaScript

  1. #1
    Nouveau Candidat au Club
    Homme Profil pro
    Lycéen
    Inscrit en
    Avril 2015
    Messages
    12
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 27
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Lycéen

    Informations forums :
    Inscription : Avril 2015
    Messages : 12
    Points : 0
    Points
    0
    Par défaut Projet javascript/html ISN
    Bonjour,

    Avant toute chose je souhaite dire que je suis (très) nul en programmation/développement et en informatique tout court. C'est pourquoi j'ai absolument besoin de votre aide et pourquoi je me suis inscrit ici.
    Je suis en Terminale S spécialité ISN (Informatique et Sciences du Numérique). Il nous est demandé la création d'un projet informatique que nous devrons présenter en fin d'année scolaire devant un jury. Ce projet peut être de toute sorte, mais il doit être fait à partir des bases informatiques apprises en cours, à savoir HTML, JAVASCRIPT et CSS.

    Bref, je ne maîtrise que très peu javascript et pourtant je vais en avoir besoin pour mon projet.
    En effet, celui-ci a pour ambition d'être un "détecteur de répétitions".

    Le topo: il faudrait une zone de texte où l'utilisateur rentre son texte.
    Le programme détecte les mots qui apparaissent souvent (occurrence supérieure à 2) et en fonction du mot propose une liste de synonymes pour remplacer les dites répétitions.

    ex: L'utilisateur rentre: "Je joueur de football a réalisé un très beau tir. Ce tir est venu se loger en pleine lucarne".
    Il y a 2 fois le mot "tir", le programme surligne donc le mot tir et propose une liste de synonyme pour le mot tir.


    Je ne sais pas comment me débrouiller pour faire ça, j'ai commencé mais je n'ai que la variable contenant la liste de synonyme (j'ai pas mis tous les synonymes de la Terre juste une série parceque si ça marche avec quelques synonymes ça marche avec tout)

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    <!doctype html>
    <html lang="fr">
    <header>
    <meta charset="utf-8">
    <link rel="stylesheet" href="color.css" />
     
    <h1>Répétitions</h1>
    <h2>Entrez votre texte</h2>
    </header>
    <body>
     
    <script>
    for (var prop in synonymes) {
    	console.log(" + prop + " = " + obj[prop]);
    var position =function(mot){
     alert(document.getElementById("ameliorer").value.indexOf(mot));
    }
    var str = "mot";
    var res = str.replace("mot", "synonyme");
    var valider = function(){
     
    }
     
    var synonymes = ([mot:"tir",synonyme: ["frappe","shoot","coup de pied"]},
    					{mot:"passe",synonyme: ["transmission","échange","remise","une-deux"]},
    					{mot:"arrêt",synonyme: ["parade","plongeon","sauvetage","claquette"]},
    					{mot:"dribble",synonyme: ["technique","crochets","enfumage","gri-gri"]},
    					{mot:"victoire",synonyme: ["succès","réussite","triomphe","gain"]},
    					{mot:"chance",synonyme: ["réussite","aubaine","bonheur","hasard"]},
    					{mot:"occasion",synonyme: ["action","enchaînement",]},
    					{mot:"arbitre",synonyme: ["homme en noir",]},
    					{mot:"gardien",synonyme: ["portier","dernier rempart"]}])
     
     
     
     
    </script>
     
    </body>
    </html>
    Comment faire ?

    J'appelle une âme charitable qui pourrait céder un peu de son temps pour me venir en aide !

    Merci !

  2. #2
    Membre habitué
    Homme Profil pro
    Développeur Web
    Inscrit en
    Février 2015
    Messages
    107
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 33
    Localisation : France, Vendée (Pays de la Loire)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Février 2015
    Messages : 107
    Points : 139
    Points
    139
    Par défaut
    Repartons déjà sur de bonne base HTML :

    Ton HTML doit ressembler à ça :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
     
     <!doctype html>
    <html lang="fr">
    <head> <!-- et non header-->
    <!-- ici tu mets tes balises meta, css, et tes script javascript -->
    </head>
    <body>
    <!-- ici l'affichage (h1, h2...)-->
    </body>

    1ère question sans rapport direct : le projet est pour quand ?
    2ème question : est-ce que ton script doit fonctionner pour n'importe quels mots ou seulement pour une liste définie dans le cadre du projet ?
    Darkauron

  3. #3
    Nouveau Candidat au Club
    Homme Profil pro
    Lycéen
    Inscrit en
    Avril 2015
    Messages
    12
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 27
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Lycéen

    Informations forums :
    Inscription : Avril 2015
    Messages : 12
    Points : 0
    Points
    0
    Par défaut
    1ère question sans rapport direct : le projet est pour quand ?
    2ème question : est-ce que ton script doit fonctionner pour n'importe quels mots ou seulement pour une liste définie dans le cadre du projet ?

    1) J'ai 1 mois encore pour réaliser le projet.
    2) Non juste une liste définie suffit. Il s'agit juste de montrer que ça marche, c'est pour ça que j'utiliserai la liste que j'ai mis plus haut.

  4. #4
    Membre expérimenté
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Avril 2003
    Messages
    1 303
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine Saint Denis (Île de France)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : Service public

    Informations forums :
    Inscription : Avril 2003
    Messages : 1 303
    Points : 1 380
    Points
    1 380
    Par défaut
    Citation Envoyé par Feist Voir le message
    ... je suis (très) nul en programmation/développement et en informatique tout court...
    Je suis en Terminale S spécialité ISN (Informatique et Sciences du Numérique)...
    Il faudrait peut-être envisager un changement d'orientation dans ce cas.

    Pour compléter ce qu'à écrit Darkauron, les balises <form> et <input> (probablement expliquées dans vos cours) devraient vous être utiles.

    Bon courage !

    P.S. : il est préférable d'utiliser les balise CODE pour le code, au lieu des balises QUOTE.
    Christophe

    Pensez à mettre quand c'est le cas.

  5. #5
    Nouveau Candidat au Club
    Homme Profil pro
    Lycéen
    Inscrit en
    Avril 2015
    Messages
    12
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 27
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Lycéen

    Informations forums :
    Inscription : Avril 2015
    Messages : 12
    Points : 0
    Points
    0
    Par défaut
    Pour le coup c'est un peu trop tard pour le changement de spécialité

    Merci pour les balises, je vais voir ce que je peux faire de ce côté là, mais je rame !

    P.S. : il est préférable d'utiliser les balise CODE pour le code, au lieu des balises QUOTE.
    Oui je m'en suis rendu compte après je vais edit le premier post

  6. #6
    Membre expérimenté
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Avril 2003
    Messages
    1 303
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine Saint Denis (Île de France)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : Service public

    Informations forums :
    Inscription : Avril 2003
    Messages : 1 303
    Points : 1 380
    Points
    1 380
    Par défaut
    Cela permet de voir immédiatement (grâce aux couleurs) qu'il y a un problème de guillemets.
    Christophe

    Pensez à mettre quand c'est le cas.

  7. #7
    Nouveau Candidat au Club
    Homme Profil pro
    Lycéen
    Inscrit en
    Avril 2015
    Messages
    12
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 27
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Lycéen

    Informations forums :
    Inscription : Avril 2015
    Messages : 12
    Points : 0
    Points
    0
    Par défaut
    Bon après des recherches non concluantes, je m'en remet à vous.

    Je bloque vraiment, et je ne sais pas par où commencer pour mener à bien ce projet.

    Personne ne pourrait me venir en aide ?

  8. #8
    Membre expérimenté
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Avril 2003
    Messages
    1 303
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine Saint Denis (Île de France)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : Service public

    Informations forums :
    Inscription : Avril 2003
    Messages : 1 303
    Points : 1 380
    Points
    1 380
    Par défaut
    Les étapes que je vous propose :
    1 Afficher un formulaire avec un champ texte et un bouton.
    2 La validation du formulaire (clic sur le bouton) réaffiche la page avec en plus le contenu du champ texte dans la page (dessous le formulaire).
    3 Le contenu du champ texte est modifié avant d'être affiché (un mot y est ajouté par exemple).
    4 Afficher chaque mot du champ texte séparément.
    5 Remplacer un mot par un autre
    etc.

    Vous devriez trouver assez facilement des exemples pour tout ça.
    Christophe

    Pensez à mettre quand c'est le cas.

  9. #9
    Membre habitué
    Homme Profil pro
    Développeur Web
    Inscrit en
    Février 2015
    Messages
    107
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 33
    Localisation : France, Vendée (Pays de la Loire)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Février 2015
    Messages : 107
    Points : 139
    Points
    139
    Par défaut
    Salut Feist,

    J'ai un peu regardé ton problème et j'ai plusieurs questions :
    - Pour la liste de synonymes, est ce que le format de la liste est obligatoirement celui que tu as fourni ou non ?
    - Si un mot apparait plusieurs fois, le script doit proposer des mots en remplacement ou modifier automatiquement ?
    - Le texte doit-il être valider par un bouton ou est-il analysé en cours d'écriture ?

    Aussi, as-tu un sujet plus détaillé de ce que tu dois faire ?

    Pour info, il ne me semble pas nécessaire de faire de formulaire (form) et encore moins un input text/textarea vu qu'il n'y a pas de PHP, et à priori, pas de validation par un bouton. Pour ma part, j'ai utilisé une div éditable pour pouvoir mettre du HTML dedans.
    Darkauron

  10. #10
    Nouveau Candidat au Club
    Homme Profil pro
    Lycéen
    Inscrit en
    Avril 2015
    Messages
    12
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 27
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Lycéen

    Informations forums :
    Inscription : Avril 2015
    Messages : 12
    Points : 0
    Points
    0
    Par défaut
    - Pour la liste de synonymes, est ce que le format de la liste est obligatoirement celui que tu as fourni ou non ?
    - Si un mot apparait plusieurs fois, le script doit proposer des mots en remplacement ou modifier automatiquement ?
    - Le texte doit-il être valider par un bouton ou est-il analysé en cours d'écriture ?
    -Euh non je pense pas, c'est mon prof qui m'a conseillé ce format, au début je faisais une nouvelle variable pour chaque nouveau mot
    -Dans le cadre de mon projet je préfère que le script propose des mots en remplacement
    -Le texte doit être validé par un bouton

    Aussi, as-tu un sujet plus détaillé de ce que tu dois faire ?
    Hm non pas vraiment je crois que j'ai tout dit.

  11. #11
    Membre expérimenté
    Homme Profil pro
    bricoleur par les mots
    Inscrit en
    Avril 2015
    Messages
    715
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 79
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : bricoleur par les mots
    Secteur : Distribution

    Informations forums :
    Inscription : Avril 2015
    Messages : 715
    Points : 1 600
    Points
    1 600
    Par défaut
    essai ce code qui devrais suffire

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    <!DOCTYPE html>
    <html>
     
    <head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
     
    <script>			
     
    var synonymes = [{mot:"tir",synonyme: ["frappe","shoot","coup de pied"]},
    				{mot:"passe",synonyme: ["transmission","échange","remise","une-deux"]},
    				{mot:"arrêt",synonyme: ["parade","plongeon","sauvetage","claquette"]},
    				{mot:"dribble",synonyme: ["technique","crochets","enfumage","gri-gri"]},
    				{mot:"victoire",synonyme: ["succès","réussite","triomphe","gain"]},
    				{mot:"chance",synonyme: ["réussite","aubaine","bonheur","hasard"]},
    				{mot:"occasion",synonyme: ["action","enchaînement",]},
    				{mot:"arbitre",synonyme: ["homme en noir",]},
    				{mot:"gardien",synonyme: ["portier","dernier rempart"]}]
     
     
    var tbphrase=null
     
     
    function dina(){
     
    	var txt=document.getElementById('trtt').value
     
    	tbphrase=txt.split(' ')
    	var index_syno=0
     
    	for(var i=0;i<tbphrase.length;i++){
     
    		var mot=tbphrase[i].replace(/\,|\.|\;/gi,'')
     
    		for(var j=i+1;j<tbphrase.length;j++){
     
    			if(tbphrase[j]==mot){
     
    				for(var k=0;k<synonymes.length;k++){
     
    					if(synonymes[k].mot==mot){
     
    						tbphrase[j]=synonymes[k].synonyme[index_syno]
    						index_syno++
    					}
    				}
    			}
    		}
    	}
     
    	var phrase=	tbphrase.join(" ")
     
    	document.getElementById('trtt').value=phrase
    }
    </script>
    </head>
    <body>
    <br>
     
    <button onclick="dina()">teste</button>
     
    <textarea style='width:400px;height:80px' id="trtt">le joueur de football a réalisé un très beau tir. Ce tir est venu se loger en pleine lucarne. c'est un tir exceptionnel</textarea>
     
    </body>
    <html>
    je sais que je devrais pas mais sa me démangeai

    ps: ta punition sera de comprendre comment sa fonctionne
    Plus vite encore plus vite toujours plus vite.

  12. #12
    Membre actif

    Homme Profil pro
    Étudiant
    Inscrit en
    Février 2013
    Messages
    119
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Algérie

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Électronique et micro-électronique

    Informations forums :
    Inscription : Février 2013
    Messages : 119
    Points : 203
    Points
    203
    Billets dans le blog
    1
    Par défaut Voila 20/20
    voila ca colrie en rouge les doublons et ca suggère les mots dans le dictionnaire .

    tu pourras changer les couleurs les emplacements , et plus encore ....


    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
     
    <!doctype html>
    <html lang="fr">
    <header>
    <meta charset="utf-8">
     <style>
     .cls-selection
     {
    	position : relative ;
    	background-color : transparent ;
    	border : 0px ;
    	width:450px;
     }
     
     .cls-edition
     {
    	direction:ltr;
    	position:absolute;
    	padding:5px;
    	left:0;
    	top:0;
    	overflow:hidden;
    	border:1px solid #595959;
    	background:transparent;
    	width:299px;
    	height:199px;
    	cursor:text;
    	font-size:12px;
    	font-family:Arial;
    	line-height:18px;
    	word-wrap:break-word;
    	white-space:pre-wrap;
    	resize:none;
    	border-radius:5px;
    	z-index:5 
     }
     .cls-cloneur
     {
        direction:ltr;
    	position:absolute;
    	padding:5px;
    	left:0;
    	top:0;
    	overflow:hidden;
        border:none;
    	background:white;
    	width:300px;
    	height:200px;
    	font-size:12px;
    	font-family:Arial;
    	line-height:18px;
    	word-wrap:break-word;
    	white-space:pre-wrap;
    	resize:none;
    	border-radius:5px;
    	z-index:4;
        color : white;	
     }
     .cls-compteur
     {
    	position:absolute;
    	font-family:Arial;
    	font-size:11px;
    	font-weight:bold;
    	color:black;
    	border:0px;
    	left:0;
    	top:208px;
    	text-align:left;
    	padding:3px 5px 3px 5px;
    	margin:0;
    	background:transparent;
    	border-radius:0px;
    	z-index:3;
     }
     .cls-fermeture
     {
    	position:absolute;
    	font-family:Arial;
    	font-size:12px;
    	font-weight:bold;
    	color:white;
    	border:0px;
    	cursor:pointer;
    	left:312px;
    	top:0;
    	padding:3px 5px 3px 5px;
    	margin:0;
    	background:#151515;
    	border-radius:5px;
    	z-index:6;
    	opacity:0.5;
     }
     .cls-souligner
     {
      padding:0; 
      height:15px; 
      margin:0; 
      font-size:12px;
      font-family: Arial;
      white-space:pre-wrap;
      color:white;
      border-radius:3px;
      background-color:red;
     }
     
     
     #fermeture:hover 
     {
        opacity:1;
     }
     
     </style>
     
    </header>
    <body>
     <h1>Répétitions</h1>
    <h2>Entrez votre texte</h2>
    <script>
     
     
    var synonymes =  {
                        "tir": ["frappe","shoot","coup de pied"],
    					"passe": ["transmission","échange","remise","une-deux"],
    					"arrêt": ["parade","plongeon","sauvetage","claquette"],
    					"dribble": ["technique","crochets","enfumage","gri-gri"],
    					"victoire": ["succès","réussite","triomphe","gain"],
    					"chance": ["réussite","aubaine","bonheur","hasard"],
    					"occasion": ["action","enchaînement"],
    					"arbitre": ["homme en noir"],
    					"gardien": ["portier","dernier rempart"]
    					} 
     
     
    function suggerer(mots)
    {
      document.getElementById("suggestions").innerHTML="";
      var htm="";
      mots = mots||[];
     for(var i = 0; i< mots.length;i++)
     {
        mot=mots[i];
       syn=synonymes[mot];
       if(syn)
       {
    	 htm+="<p><b> pouvez remplacer le mot "+mot+" par </b>:<em>"+syn.join()+"</em>";
       }
     }
     document.getElementById("suggestions").innerHTML=htm;
     
    }	
     
     function effacer()
     {
    	document.getElementById("textId").value = "";
    	 document.getElementById("suggestions").innerHTML="";
    	document.getElementById("compte").innerHTML = "0";
    	document.getElementById("dulpiCompte").innerHTML = "0";
     }
     
      function soulignerDoublons(texte)
    {
    	var dupl = ((texte+"").match(/\b(\w+)\b(?=.*\b\1\b)/g)||[]);
    	suggerer(dupl);
    	return souligner(texte,dupl.join("|"));
    }
     
     function souligner(texte,mot)
     {
      var reg= new RegExp("("+mot+")","gi");
      return texte.replace(reg, '<span  class="cls-souligner" onclick="alert(5)">$1</span>');
     
     }
     
     function gererEffaceur()
     {
       var effaceur= document.getElementById("fermeture");
        effaceur.addEventListener("click", function(e){
    	 effacer();
       });
     }
      function gererZoneText()
      {
       var zoneText= document.getElementById("textId");
       zoneText.addEventListener("keyup", function(e){
    		var contenuText=this.value;
    		document.getElementById("compte").innerHTML = ((contenuText+"").split(/\b\S+\b/g)||[]).length;
    		document.getElementById("dulpiCompte").innerHTML = ((contenuText+"").match(/\b(\w+)\b(?=.*\b\1\b)/g)||[]).length;
    		var texteSouligne= soulignerDoublons(contenuText);
    		document.getElementById("cloneur").innerHTML =texteSouligne;
     
       });
     
      }
    this.addEventListener("load",function()
     {
    	effacer();
    	gererEffaceur();
    	gererZoneText()
      })
     
     
     
    </script>
      <div id='suggestions'> 
    	 </div> 
     <br><br>
         <div   class="cls-selection" >
    	 <textarea id="textId" class="cls-edition" >
     
    	 </textarea>
    	 <div id='cloneur' class='copier cls-cloneur'>
    	 </div>
    	  <a id='fermeture' class="cls-fermeture" >X</a>
    	  <div id="counter_1" class="cls-compteur">Total mots saisis: <em id="compte">0</em>    Total  Mots dupliqués :<em id="dulpiCompte">0</em></div>
    	 </div>
    	 <br/>
     
     
     
     
     
    </body>
    </html>

  13. #13
    Nouveau Candidat au Club
    Homme Profil pro
    Lycéen
    Inscrit en
    Avril 2015
    Messages
    12
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 27
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Lycéen

    Informations forums :
    Inscription : Avril 2015
    Messages : 12
    Points : 0
    Points
    0
    Par défaut
    Lequel des deux dois-je prendre ?

    Merci beaucoup en tous cas ! Je vais me pencher sur ces codes

  14. #14
    Membre expérimenté
    Homme Profil pro
    bricoleur par les mots
    Inscrit en
    Avril 2015
    Messages
    715
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 79
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : bricoleur par les mots
    Secteur : Distribution

    Informations forums :
    Inscription : Avril 2015
    Messages : 715
    Points : 1 600
    Points
    1 600
    Par défaut
    Lequel des deux dois-je prendre ?
    au moins tu ne poura pas dire que tu n'avait pas le choix

    j'ai un peut modifier mon script il y avait un petit default et un bug

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
     
    <script>			
     
    var synonymes =  {
    	"tir": ["frappe","shoot","coup de pied"],
    	"passe": ["transmission","échange","remise","une-deux"],
    	"arrêt": ["parade","plongeon","sauvetage","claquette"],
    	"dribble": ["technique","crochets","enfumage","gri-gri"],
    	"victoire": ["succès","réussite","triomphe","gain"],
    	"chance": ["réussite","aubaine","bonheur","hasard"],
    	"occasion": ["action","enchaînement"],
    	"arbitre": ["homme en noir"],
    	"gardien": ["portier","dernier rempart"]
    } 
     
    function dina(){
     
    	var txt=document.getElementById('trtt').value;
     
    	var tbphrase=txt.split(' ');
    	var index_syno=0;
    	var pvpv=[];
     
    	for(var i=0;i<tbphrase.length;i++){
     
    		var rev=(tbphrase[i].match(/\,|\.|\;|\?|\!/));
    		pvpv.push(rev);
    		tbphrase[i]=tbphrase[i].replace(/\,|\.|\;|\?|\!/gi,'');
    	}
     
    	for(var i=0;i<tbphrase.length;i++){	
     
    		var mot=tbphrase[i];
     
    		for(var j=i+1;j<tbphrase.length;j++){
     
    			if(tbphrase[j]==mot && synonymes[mot]){
     
    				if(index_syno >= synonymes[mot].length){
    				index_syno=0
    				}
    				else{
    				tbphrase[j]=synonymes[mot][index_syno];
    				index_syno++;
    				}
    			}
    		}
    		index_syno=0;
    	}
     
    	for(var i=0;i<tbphrase.length;i++){
     
    		if(pvpv[i]!=null){
    			tbphrase[i]+=pvpv[i];
    		}
    	}
    	var phrase=	tbphrase.join(" ");
    	document.getElementById('trtt').value=phrase;
    }
     
    </script>
    </head>
    <body>
    <br>
     
    <button onclick="dina()">azerty</button>
     
    <textarea style='width:400px;height:80px' id="trtt">le joueur de football a réalisé un très beau tir. Ce tir, est venu se loger en pleine lucarne, le gardien a rien pu faire. c'est un tir exceptionnel que le gardien ne pouvait arreter.</textarea>
     
    </body>
    <html>
    Plus vite encore plus vite toujours plus vite.

  15. #15
    Nouveau Candidat au Club
    Homme Profil pro
    Lycéen
    Inscrit en
    Avril 2015
    Messages
    12
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 27
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Lycéen

    Informations forums :
    Inscription : Avril 2015
    Messages : 12
    Points : 0
    Points
    0
    Par défaut
    Le code de Lakhdr se rapproche plus de ce que je cherche, en effet il surligne les mots et propose des synonymes alors que celui de melka one remplace directement.
    Cependant dans le code de Lakhdr le problème c'est que des fois il y a des lettres qui sont surlignées alors que ce ne sont pas des mots. Et mon prof m'a dit qu'il faut que ce soit du javascript et ma du java.


  16. #16
    Membre actif

    Homme Profil pro
    Étudiant
    Inscrit en
    Février 2013
    Messages
    119
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Algérie

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Électronique et micro-électronique

    Informations forums :
    Inscription : Février 2013
    Messages : 119
    Points : 203
    Points
    203
    Billets dans le blog
    1
    Par défaut
    tu peux donner un exemple de lettres soulignées? ca sera un bug dans ce cas ! ca ne devrait souligner que les mots dans le dictionnaire!

  17. #17
    Membre expérimenté
    Homme Profil pro
    bricoleur par les mots
    Inscrit en
    Avril 2015
    Messages
    715
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 79
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : bricoleur par les mots
    Secteur : Distribution

    Informations forums :
    Inscription : Avril 2015
    Messages : 715
    Points : 1 600
    Points
    1 600
    Par défaut
    comme ca

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
     
    <style type="text/css">
     
    #trtt span{
    background:red;
    }
    </style>
     
    <script>			
     
    var synonymes =  {
    	"tir": ["frappe","shoot","coup de pied"],
    	"passe": ["transmission","échange","remise","une-deux"],
    	"arrêt": ["parade","plongeon","sauvetage","claquette"],
    	"dribble": ["technique","crochets","enfumage","gri-gri"],
    	"victoire": ["succès","réussite","triomphe","gain"],
    	"chance": ["réussite","aubaine","bonheur","hasard"],
    	"occasion": ["action","enchaînement"],
    	"arbitre": ["homme en noir"],
    	"gardien": ["portier","dernier rempart"]
    }
     
    var dg=''
     
    function dina(){
     
    	var txt=document.getElementById('trtt').textContent;
     
    	var tbphrase=txt.split(' ');
    	var spn=[];
    	var pvpv=[];
     
    	for(var i=0;i<tbphrase.length;i++){
     
    		var rev=(tbphrase[i].match(/\,|\.|\;|\?|\!/));
    		pvpv.push(rev);
    		tbphrase[i]=tbphrase[i].replace(/\,|\.|\;|\?|\!/gi,'');
    	}
     
    	for(var i=0;i<tbphrase.length;i++){	
     
    		var mot=tbphrase[i];
     
    		for(var j=i+1;j<tbphrase.length;j++){
     
    			if(tbphrase[j]==mot && synonymes[mot]){
     
    				tbphrase[j]='<span onclick="choix(this,event,\''+mot+'\')">'+tbphrase[j]+'</span>';
    			}
    		}
    	}
     
    	for(var i=0;i<tbphrase.length;i++){
     
    		if(pvpv[i]!=null){
    			tbphrase[i]+=pvpv[i];
    		}
    	}
    	var phrase=	tbphrase.join(" ");
    	document.getElementById('trtt').innerHTML=phrase;
    }
     
     
    function choix(lui,e,mot){
     
    	if(dg==''){
    		dg=document.createElement('div')
    		dg.style.position='absolute';
    	}
    	else{
    		dg.innerHTML='';
    	}
    	dg.style.display='block';
    	dg.style.left=e.pageX+10+'px';
    	dg.style.top=e.pageY+20+'px';
     
    	for(var i=0;i<synonymes[mot].length;i++){
     
    		var crea=document.createElement('div');
    		crea.style.backgroundColor='#dddddd';
    		crea.style.width='110px';
    		crea.style.border='1px';
    		crea.style.borderStyle='solid';
     
    		crea.textContent=synonymes[mot][i];
    		var mt=synonymes[mot][i]
     
    		add(crea,mt,lui)
     
    		dg.appendChild(crea);
    		document.body.appendChild(dg);
    	}
    }
     
    function add(crea,mt,lui){
    	crea.onclick=function(){lui.innerHTML=mt;dg.style.display='none';lui.style.backgroundColor="transparent";}
    }
    </script>
    </head>
    <body>
    <br>
     
    <div id="trtt" class="editable" contenteditable="true" style='width:400px;height:80px'>
        le joueur de football a réalisé un très beau tir. Ce tir, est venu se loger en pleine lucarne, le gardien a rien pu faire. c'est un tir exceptionnel que le gardien ne pouvait arreter.
    </div>
    <button onclick="dina()">azerty</button>
    </body>
    <html>
    Plus vite encore plus vite toujours plus vite.

  18. #18
    Nouveau Candidat au Club
    Homme Profil pro
    Lycéen
    Inscrit en
    Avril 2015
    Messages
    12
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 27
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Lycéen

    Informations forums :
    Inscription : Avril 2015
    Messages : 12
    Points : 0
    Points
    0
    Par défaut
    Merci à tous pour votre aide en tous cas !

    Le code de melka one marche bien, le problème c'est que ça marche avec des "expressions régulières", et c'est compliqué d'après mon prof.
    D'après lui il vaut mieux faire quelque chose de plus simple mais que je comprends:

    quelque chose comme l'utilisation de "string".

    Désolé si je suis difficile mais pour le coup, j'ai du mal !

  19. #19
    Membre expérimenté
    Homme Profil pro
    bricoleur par les mots
    Inscrit en
    Avril 2015
    Messages
    715
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 79
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : bricoleur par les mots
    Secteur : Distribution

    Informations forums :
    Inscription : Avril 2015
    Messages : 715
    Points : 1 600
    Points
    1 600
    Par défaut
    il est dificile ton prof surtout que c'est plus simple avec le regex de ce code qui est simple

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
     
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
     
    <style type="text/css">
     
    #trtt span{
    	background:red;
    	cursor:pointer;
    }
     
    .dg{
    	position:absolute;
    }
     
    .dg div{
    	background-color:#bbbbbb;
    	width:110px;
    	border:1px;
    	border-style:solid;
    	cursor:pointer;
    	color:white;
    }
     
    </style>
     
    <script>			
     
    var syno_c={
     
    	synonymes :  {
     
    		"tir": ["frappe","shoot","coup de pied"],
    		"passe": ["transmission","échange","remise","une-deux"],
    		"arrêt": ["passe","parade","plongeon","sauvetage","claquette"],
    		"dribble": ["technique","crochets","enfumage","gri-gri"],
    		"victoire": ["succès","réussite","triomphe","gain"],
    		"chance": ["réussite","aubaine","bonheur","hasard"],
    		"occasion": ["action","enchaînement"],
    		"arbitre": ["homme en noir"],
    		"gardien": ["portier","dernier rempart"]
    	},
     
    	dg :'',
    	out_b:'',
            conteneur:'',
     
    	dina : function (){
     
    		var txt=document.getElementById('trtt').textContent;
    		document.getElementById('trtt').innerHTML='';
     
    		var tbphrase=txt.split(' ');
    		var pvpv=[];
     
    		for(var i=0;i<tbphrase.length;i++){
     
    			if(tbphrase[i].indexOf('.', 0) != -1 || tbphrase[i].indexOf(',', 0)!= -1 || tbphrase[i].indexOf('?', 0)!= -1  || tbphrase[i].indexOf('!', 0) != -1 || tbphrase[i].indexOf(';', 0)!= -1){
     
    				var rev=tbphrase[i].substr(tbphrase[i].length-1, 1);	
    			}
    			else{
    				var rev=null;
    			}
    			pvpv.push(rev);
    			tbphrase[i]=tbphrase[i].replace(rev,'');
    		}
     
    		for(var i=0;i<tbphrase.length;i++){	
     
    			var mot=tbphrase[i];
     
    			for(var j=i+1;j<tbphrase.length;j++){
     
    				if(tbphrase[j]==mot && this.synonymes[mot]){
     
    					tbphrase[j]='<span onclick="'+this.nom+'.choix(this,event,\''+mot+'\')">'+tbphrase[j]+'</span>';
    				}
    			}
    		}
     
    		for(var i=0;i<tbphrase.length;i++){
     
    			if(pvpv[i]!=null){
    			        tbphrase[i]+=pvpv[i];
    			}
    		}
    		var phrase=	tbphrase.join(" ");
    		document.getElementById('trtt').innerHTML=phrase;
    	},
     
     
    	choix : function(lui,e,mot){
     
    		this.dg=='' ? this.dg=document.createElement('div') : this.dg.innerHTML='';
     
    		this.dg.className='dg';
    		this.dg.style.display='block';
    		this.dg.style.left=e.pageX+10+'px';
    		this.dg.style.top=e.pageY+20+'px';
     
    		for(var i=0;i<=this.synonymes[mot].length;i++){
     
    			var crea=document.createElement('div');
    			crea.textContent=this.synonymes[mot][i];
    			var mt=this.synonymes[mot][i]
     
    			this.add(crea,mt,lui)
     
    			this.dg.appendChild(crea);
    			document.body.appendChild(this.dg);
    		}
    		document.addEventListener('mouseup',this.out_b,false);
    	},
     
    	add : function(crea,mt,lui){
     
    		var that=this;
    		crea.onclick=function(){lui.innerHTML=mt;that.dg.style.display='none';lui.style.backgroundColor="transparent";that.dina()}
    	},
     
     
    	out : function(crea,mt,lui){
    		this.dg.style.display='none';
    		document.removeEventListener('mouseup',this.out_b,false);
    	}
     
    }
     
     
    function syno_instance(){
     
    	is=Object.create(syno_c);
    	is.conteneur=document.getElementById(trtt);
    	is.out_b=is.out.bind(is);
    	is.nom='is';
    }
     
    window.addEventListener("load",syno_instance, false);
     
    </script>
    </head>
    <body>
    <br>
     
    <div id="trtt" class="editable" contenteditable="true" style='overflow:auto;width:400px;height:140px'>
        le joueur de football a réalisé un très beau tir. Ce tir, est venu se loger en pleine lucarne, le gardien a rien pu faire. c'est un tir exceptionnel que le gardien ne pouvait arreter.
    </div>
    <button onclick="is.dina()">azerty</button>
    </body>
    <html>
    Plus vite encore plus vite toujours plus vite.

  20. #20
    Nouveau Candidat au Club
    Homme Profil pro
    Lycéen
    Inscrit en
    Avril 2015
    Messages
    12
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 27
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Lycéen

    Informations forums :
    Inscription : Avril 2015
    Messages : 12
    Points : 0
    Points
    0
    Par défaut
    Salut,

    Ton code est juste parfait melka ! Désolé de ne pas être passé depuis un moment mais j'avais pas mal de travail mis à part l'ISN ces derniers temps.
    Donc ça marche bien !

    Cela dit pour le bac je viens d'apprendre que c'est pas seulement un rendu écrit mais il va falloir que j'explique le tout à l'oral... Quelle galère, j'ai compris en gros ce que faisait les fonctions du code mais en détail ligne par ligne ça risque d'être compliqué.

Discussions similaires

  1. positionnement fonction javascript/html
    Par shnouf dans le forum Général JavaScript
    Réponses: 10
    Dernier message: 27/05/2006, 00h46
  2. Javascript-html: ne pas afficher le javascript:void(0)
    Par Anarianthe dans le forum Général JavaScript
    Réponses: 8
    Dernier message: 01/02/2006, 23h32
  3. [FLASH MX2004] [Javascript][HTML] Comm. SWF et HTML
    Par CUCARACHA dans le forum Flash
    Réponses: 1
    Dernier message: 20/10/2005, 11h51

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo