Projet javascript/html ISN

**Feist** · 18/05/2015, 10h19

(désolé du double post)

Je dois rendre mon dossier jeudi et je suis toujours dans le flou avec les expressions régulières.
C'est trop demandé mais pourrais-tu m'expliquer ligne par ligne ce que ça fait ?

Merci d'avance

**melka one** · 18/05/2015, 13h59

pense tu pouvoir berné la personne qui te corrigera ?

**Feist** · 18/05/2015, 17h28

C'est pas question de berner, c'est savoir expliquer les grandes lignes. Si j'ai compris le principal du comment marchent les expressions régulières alors je pourrai m'en sortir

**melka one** · 18/05/2015, 18h20

mais il n'y a pas d'expression régulière dans le code

**Feist** · 18/05/2015, 20h13

Ah bon ? Pourtant je pensais que les trucs genre split étaient spécifiques aux expressions régulières.
Bref si tu pouvais juste me faire un petit commentaire à côté de chaque ligne ça serait adorable et ça me sauverait la vie, vraiment !

(J'ai demandé à plusieurs potes ils ne comprennent pas trop non plus)

Merci encore !

**dmganges** · 18/05/2015, 20h34

Bonsoir,

Tiens, ce sont des Regex Perl mais c'est pareil...
Mais pour peu que tu fasses une recherche, tu en trouveras plein !
Le cours est bien fait, il y a l'essentiel.
Ce que te donne melka one n'est pas très complexe, entre 8.1 & 8.6 tu as tout ce dont tu as besoin !
Les Regex te seront toujours utiles par la suite, ça vaut le coup d'y investir un peu de temps...

**melka one** · 18/05/2015, 22h55

ce que j'utilise ce sont des méthodes de l' objet string et certaines de ces méthodes peuvent prendre en paramètre une expression régulière ou un caractère choisi c'est le cas pour split

dans le cas de la fonction cette ligne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var tbphrase=txt.split(' ');

elle decoupe la phrase en fonction des espaces en partant du principe que chaques mot est separé par un espace et retourne donc un tableau ou chaque index contient un mot.

fait une recherche (string javascript) pour comprendre.

**melka one** · 19/05/2015, 14h18

avec des commentaires

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
 
<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;
	padding-left:5px;
}
 
</style>
 
<script>			
 
function syno_c(conteneur,lui){		//la fonction constructeur
 
this.conteneur=document.getElementById(conteneur);
 
this.out_b=this.out.bind(this);
 
this.nom=lui;
}
 
syno_c.prototype.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"]
	}
 
syno_c.prototype.dg='';
 
 
 
syno_c.prototype.dina=function (){
 
		var txt=this.conteneur.textContent;		//on recupere le texte contenu dans le div
		this.conteneur.innerHTML='';			//on vide le div
 
		var tbphrase=txt.split(' ');			// on recuper chaques mot en se basant sur les espaces que l'on stock dans un array grace a la methode split de l'oblet string
		var pvpv=[];							// on cree un array qui contiendra les point ,point d'exclamation d'interrogation,vigule,et point virgule de la phrase.
 
		for(var i=0;i<tbphrase.length;i++){		//on vas parcourir le tableau contenant tous les mots de la phrase et verifier si il contiennent un point point virgule...etc
 
			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);		//si c'est le cas on stock dans une variable le point, la virgule...etc
			}
			else{
				var rev=null;							//sinon on donne comme valeur a la variable null
			}
			pvpv.push(rev);								//ensuite on rempli le array par la valeur contenu dans la variable. 
			tbphrase[i]=tbphrase[i].replace(rev,'');	// et enfin on utilise la methode replace de l'objet string pour retirer les points poin virgule...etc pour les mots en contenant
		}
 
		// a ce moment on se retouve avec le array contenant tous les mot de la phrase et un array contenant les points poin virgule...etc.
 
 
 
		for(var i=0;i<tbphrase.length;i++){			//on parcoure le array afin d'y extraire les mot un par un
 
			var mot=tbphrase[i];		//la variable mot contient le mot se trouvant dans l'index i du array 
 
			for(var j=i+1;j<tbphrase.length;j++){// dans cette boucle on vas comparer le mot contenu dans la variable mot avec toutes clee de l'objet contenant tous les synonyme jusqu'a ce que l'on trouve une correspondance
 
				if(tbphrase[j]==mot && this.synonymes[mot]){		//quand on trouve un mot correspondant (un doublon) on modifie le mot en lui ajoutant un span afin que le mot puisse etre encadre en rouge et on rajoute a la balise l'evenement onclick qui declanchera la fonction servant a cree et afficher le menu avec les synonymes.
 
					tbphrase[j]='<span onclick="'+this.nom+'.choix(this,event,\''+mot+'\')">'+tbphrase[j]+'</span>';		//les parametres que recevra la fonction sont l'element declancheur dans notre cas le span contenant le mot a changé l'evenement clic et le mot lui meme
				}
			}
		}
 
		for(var i=0;i<tbphrase.length;i++){		// pour cette boucle on parcour le array cetenant le points, points virgules ...etc afin de les remettre
 
			if(pvpv[i]!=null){
				tbphrase[i]+=pvpv[i];
			}
		}
		var phrase=	tbphrase.join(" ");  	//ici recree la phrase en utilisant la methode join de l'objet string
		this.conteneur.innerHTML=phrase;	// et enfin on insere la phrase avec les mots marque en rouge dans la page
	}
 
 
syno_c.prototype.choix=function(lui,e,mot){		//cette fonction sert a cree le menu qui contient les mot proposés
 
		this.dg=='' ? this.dg=document.createElement('div') : this.dg.innerHTML=''; //au premier passage on cree le div pour les autres passage on vide son contenu
 
		this.dg.className='dg';					//on lui assigne une class css
		this.dg.style.display='block';			//on le rend visible
		this.dg.style.left=e.pageX+10+'px';		//on le position a 10 pixel de la souris en x
		this.dg.style.top=e.pageY+20+'px';		//on le position a 10 pixel de la souris en y
 
		for(var i=0;i<=this.synonymes[mot].length;i++){ 	// dans l'objet synonyme en fonction de la clee (le mot mis en parametre de fonction) on vas parcourir l'array contenant les synonymes du mot
 
			var crea=document.createElement('div');		//pour chaques synonyme on cree un div
			crea.textContent=this.synonymes[mot][i];	//on met le synonyme dans le div
			var mt=this.synonymes[mot][i]
 
			this.add(crea,mt,lui)	//on appel la fonction add qui vas pour chaques synonymes ajouter un evenement clic qui declanchera une fonction anonyme
 
			this.dg.appendChild(crea);				//on insere chaques mot dans le div conteneur (le menu)
		}
 
		var crea=document.createElement('div');
			crea.textContent="ignorer";	//
			crea.style.color='black';
			crea.style.border='none';
 
			crea.onclick=function(){
 
			lui.previousSibling.textContent+=lui.textContent;	//on concerve le mot.
			lui.parentNode.removeChild(lui); 		//on supprime le span contenant le texte.
 
			}
			this.dg.appendChild(crea);				//on insere annuler dans le div conteneur (le menu).
			document.body.appendChild(this.dg);		// le div conteneur (le menu) dans la page.
 
			document.addEventListener('mouseup',this.out_b,false);	//permet de cacher le menu quand on clic dans la page
	}
 
syno_c.prototype.add=function(crea,mt,lui){
 
		var that=this;
		crea.onclick=function(){
		lui.previousSibling.textContent+=mt;	//on insere le nouveau mot.
		lui.parentNode.removeChild(lui); 		//on supprime le span contenant le texte.
		that.dg.style.display='none';			//on cache le menu.
		}
	}
 
 
syno_c.prototype.out=function(crea,mt,lui){		// cache le menu et retire l'evenement mouseup du document.
		this.dg.style.display='none';
		document.removeEventListener('mouseup',this.out_b,false);
	}
 
 
 
function syno_instance(){		//instanciation de l'objet.
 
	is=new syno_c('trtt','is');
 
	document.getElementById('bb').onclick=function(){is.dina()}
 
}
 
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 id='bb'>azerty</button>
</body>
<html>

Projet javascript/html ISN

JavaScript

Discussions similaires

Partager

Partager