[JavaScript] Application Web

Sleeper · Le 23/09/2006, à 00:47

Bonsoir,

Je désire réaliser une application avec les technologies du moment style Ajax, pour l'instant je travail sur JavaScript que je découvre suite à cette article très intéressant => http://pompage.net/pompe/separation/

Depuis toujours j'étais fixé sur XHTML, CSS et PHP sans vouloir utiliser des scripts exécuté du coté client mais comme il n'y a que les con qui ne changent pas d'avis

Donc c'est la première fois que je travail avec de l'orienté objet et je bloque sur un truc tout con j'en suis sur. C'est un script qui applique des PopUp sur tous les liens qui ont un attribut class="fiche"

function fiche(){
	var AttClass = "fiche"; // Class des liens où le script doit être appliqué
	var Hauteur = 300; // Hauteur du PopUp
	var Largeur = 600; // Largeur du PopUp
	var Top = (screen.height-Hauteur)/2; // Position du PopUp en haut en px
	var Left = (screen.width-Largeur)/2; // Position du PopUp à gauche en px
	var TagA = document.getElementsByTagName("a"); // Sélection de tous les tag A
	
	for(var i = 0; i < TagA.length; ++i){ // Pour chaque tag A
	
		if (TagA[i].getAttribute("class") == AttClass){ // Ayant l'attribut class = fiche
			
			var AttHref = TagA[i].getAttribute("href"); // Valeur de l'attribut href
			var AttTitle = TagA[i].getAttribute("title"); // Valeur de l'attribut title
			
			TagA[i].onclick = function(){
				
				window.open(AttHref,AttTitle,'height='+Hauteur+',width='+Largeur+',top='+Top+',left='+Left+',status=no,directories=no,toolbar=no,location=no,menubar=no,scrollbars=no,resizable=no');
				return false;
				
			}
		}
	}
}

Alors tout va bien dans ce script sauf une chose, les variables AttHref et AttTitle prennent la valeur du dernier lien trouvé et non pas du lien auquel TagA[i] se rapporte.

Je bloque donc sur ça par manque d'expérience.

Merci à celui qui saura m'aider.

Dernière modification par Sleeper (Le 24/09/2006, à 06:37)

Bebuntu · Le 23/09/2006, à 01:05

Hop,

remplace ça :

            
            var AttHref = TagA[i].getAttribute("href"); // Valeur de l'attribut href
            var AttTitle = TagA[i].getAttribute("title"); // Valeur de l'attribut title
            
            TagA[i].onclick = function(){
                
                window.open(AttHref,AttTitle,'height='+Hauteur+',width='+Largeur+',top='+Top+',left='+Left+',status=no,directories=no,toolbar=no,location=no,menubar=no,scrollbars=no,resizable=no');
                return false;
                
            }

Par ça :

            
            TagA[i].onclick = function(){
                
               
                var AttHref = this.getAttribute("href"); // Valeur de l'attribut href
                var AttTitle = this.getAttribute("title"); // Valeur de l'attribut title
                window.open(AttHref,AttTitle,'height='+Hauteur+',width='+Largeur+',top='+Top+',left='+Left+',status=no,directories=no,toolbar=no,location=no,menubar=no,scrollbars=no,resizable=no');
                return false;
                
            }

Ca devrait rouler

p.s. window.open c'est le mal !

Dernière modification par Bebuntu (Le 23/09/2006, à 01:07)

Bebuntu · Le 23/09/2006, à 01:10

Donc c'est la première fois que je travail avec de l'orienté objet

Euh ? a part l'utilisation des méthodes DOM, tu fais quedal en objet là

Sleeper · Le 23/09/2006, à 01:12

J'ai déja essayé cette solution et je sais pas pourquoi ça ne fonctionne pas, les popup ne s'ouvre plus..

La console JavaScript affiche => Tag[i] has no properties pour la ligne => var AttHref = TagA[i].getAttribute("href");

Bebuntu a écrit :

p.s. window.open c'est le mal !

C'est pas pour de la pub et c'est la meilleur solution que j'ai trouvé à mon prob.

Merci

Dernière modification par Sleeper (Le 23/09/2006, à 01:19)

Sleeper · Le 23/09/2006, à 01:14

Bebuntu a écrit :

Donc c'est la première fois que je travail avec de l'orienté objet
Euh ? a part l'utilisation des méthodes DOM, tu fais quedal en objet là

Ca prouve bien que c'est la première fois.. lol mdr.. C'est quoi travailler en orienté objet ?

C'est pas => document.getElementsByTagName("a"); ... c'est ça le DOM

Dernière modification par Sleeper (Le 23/09/2006, à 01:15)

Bebuntu · Le 23/09/2006, à 11:21

Sleeper a écrit :

Bebuntu a écrit :
Donc c'est la première fois que je travail avec de l'orienté objet
Euh ? a part l'utilisation des méthodes DOM, tu fais quedal en objet là
Ca prouve bien que c'est la première fois.. lol mdr.. C'est quoi travailler en orienté objet ?
C'est pas => document.getElementsByTagName("a"); ... c'est ça le DOM

Oui, le DOM a une structure d'objet et des méthodes lui sont associées telles que getElementsByTagName(); mais ton code en lui même n'est pas objet, c'est ce que j'entendais.

cf (par exemple) : http://www.digital-web.com/articles/objectifying_javascript/

Pour ton code, je testerai ça tout à l'heure.

Sleeper · Le 23/09/2006, à 20:33

Bebuntu a écrit :

Pour ton code, je testerai ça tout à l'heure.

Merci c'est cool de m'aider..

Moi je pense que c'est parce que les deux variables ( var AttHref ) et ( var AttTitle ) sont remplacée à chaque fois par la boucle. Faudrait trouver un moyen de pouvoir créer à chaque fois une variable différente par tour de boucle et pouvoir les retrouver dans le window.open ... Un système d'incrémentation peut être ?

Bebuntu · Le 23/09/2006, à 21:12

Au fait, t'as bien mis this.getAttribute(...) et pas tagA[ i].getAttribute(...) ??

Sleeper · Le 23/09/2006, à 21:23

:D:D T'es trop fort toi !!! Encore désolé je n'avait pas vu la petite modif en dehors du faite que t'avais déplacé les deux ligne. Tu peux me dire pourquoi on ne pouvait pas utiliser le tagA[ i] ? C'est parce que la variable n'étais pas accessible dans la nouvelle fonction ?

Merci beaucoup !!!

Bebuntu · Le 23/09/2006, à 23:00

Bah dans le for, ça fonctionne mais utilisé comme ça, ça prendra la dernière valeur de la boucle je crois.

Dans le onclick = ... il faut utiliser this parceque c'est un évenement.

vala vala.

Bebuntu · Le 23/09/2006, à 23:01

c'est un peu pourri comme explication en fait

le mieux c'est encore de regarder un cours de JS

Sleeper · Le 23/09/2006, à 23:33

C'est ce que je suis entrain de faire. J'apprend tout doucement..
Merci pour tes explications

Sleeper · Le 24/09/2006, à 06:39

Devinez quoi ? Sous IE le script ne fonctionne pas.. Fait chier.. pourquoi tout le monde n'utilise pas un navigateur respectueux des standards ???

Bebuntu · Le 24/09/2006, à 12:23

C'est ça qu'IE ne comprend pas je crois :
screen.height (et idem pour width)

Tu dois avoir un équivalent pour IE. Pour que ça fonctionne partout tu fais :

    var h = (screen.height) ? screen.height : LA_SYNTAXE_POUR_IE;
    var w = (screen.width) ? screen.width : LA_SYNTAXE_POUR_IE;
    var Top = (h-Hauteur)/2; // Position du PopUp en haut en px
    var Left = (w.width-Largeur)/2; // Position du PopUp à gauche en px

A priori ça fonctionnera (je suis pas certain à 100% pour le truc du width/height, mais à tous les coups c'est ça).

++

Sleeper · Le 24/09/2006, à 13:02

J'ai essayé en supprimant carement cette partie du code mais rien n'y fait !!! Sous Firefox c'est tj ok sauf que le PopUp n'est plus centré donc normal !!!

Il implémente les méthodes du DOM IE ?

Dernière modification par Sleeper (Le 24/09/2006, à 13:04)

Bebuntu · Le 24/09/2006, à 14:13

Sleeper a écrit :

Il implémente les méthodes du DOM IE ?

Oui

Y a juste getAttribute('class') qu'il faut prendre avec précaution et le doubler avec un getAttribute('className')

File voir un exemple en ligne qu'on se rende mieux compte.

Sleeper · Le 24/09/2006, à 16:08

Je n'ai rien en ligne pour l'instant. Et le je suis entrain de me battre avec les CSS tj à cause de IE (je le hais) ... Dés que je met en ligne je te fait signe en attendant j'ai pris l'ancienne solution pour tester.

<a href="javascript:popupFiche('fiche.php?id=sleeper','Sleeper')" title="Sleeper"> ... </a>

Mais je compte bien trouver une solution pour éviter ça !!!

Dernière modification par Sleeper (Le 24/09/2006, à 16:08)

Bebuntu · Le 24/09/2006, à 16:43

A PROSCRIRE !!!!!!!

Tout comportement JavaScript ne doit pas être essentiel au contenu, et aucun élément (HTML ou autre) ne doit apparaître s'il ne sert QUE pour le JS.

Typiquement, ton lien ne sert QU'au JS, JS inactivé, ton lien ne sert à rien à part perturber l'utilisateur.

Tu as bien un espace web où présenter tes essais na ? parceque là c'est plutôt obscur pour trouver ce qui cloche et tester.

++

Sleeper · Le 24/09/2006, à 17:33

Je sais très bien que c'est pas la bonne solution mais ce n'est que pour tester en local.

De plus... http://forum.ubuntu-fr.org/viewtopic.php?pid=499954

Sleeper a écrit :

Hé hé !!! C'est la grande discution on dirait !!! Ne vous disputez pas les gars... lol
J'en ai marre, je m'arache les cheveux !!! Pas moyen d'inover avec des beau effet CSS, j'ai vais m'orienter vers deux feuilles de style, une pour tous les navigateur sauf IE et une autre pour IE !!! Ca ira encore plus vite que de passer deux heures sur un bête truc et de devoir supprimer des fonctionnalité au fur et à mesure..
C'est quand même grave d'en arriver à ce point là..
C'est ça ou je me remet à utiliser des tableau pour faire de la mise en page !!! C'est honteux !!!

Quel journée.. je n'aurais jamais du démarrer ma machine virtuel pour tester ça sous IE !!!

Enfin là comme je suis parti avec CSS.. je ne me préoccupe plus de IE.. J'adapterai la feuille de style après juste pour lui et à dieu les beau effet ca sera banal mais bon.. Je metterai un avertissement pour faire découvrir des navigateurs alternatifs.. Aussi non je suis toujours obligé d'adapter et je peux pas utiliser les CSS à fond !!!

mccricri · Le 26/09/2006, à 08:06

Au lieu de :

if (TagA[i].getAttribute("class") == AttClass)

tu peux faire plutôt :

if (TagA[i].className == AttClass)

Chez moi, ça semblait fonctionner.

Sleeper · Le 26/09/2006, à 09:16

Hé hé !!! C'est magique !!!

Merci bcp pour à vous deux Bebuntu et mccricri, mon script fonctionne à présent !!!

Bebuntu · Le 26/09/2006, à 14:44

mccricri a écrit :

Au lieu de :
if (TagA[i].getAttribute("class") == AttClass)
tu peux faire plutôt :
if (TagA[i].className == AttClass)
Chez moi, ça semblait fonctionner.

Oui mais non

Autant utiliser DOM jusqu'au bout et utiliser ce dont je parlais plus haut à savoir redoubler la syntaxe pour IE

if (TagA[i].getAttribute('class') == AttClass || TagA[i].getAttribute('className') == AttClass) { ... }

mccricri · Le 27/09/2006, à 11:47

Autant utiliser DOM jusqu'au bout et utiliser ce dont je parlais plus haut à savoir redoubler la syntaxe pour IE

oui, mais non aussi
Tant qu'à faire du JS, pourquoi ne pas utiliser les propriétés des objets JS qui font justement le pont entre les 2 mondes ?
Moi, dans Firefox il y a l'explorateur DOM qui permet de voir aussi les propriétés JS des noeuds du DOM, donc je vois pas pourquoi on pourrait pas l'utiliser. Parce que dans ce cas, le "vrai" attribut du tag c'est bien class et pas classname. Et ce dernier ne devrait pas être disponible via la méthode getAttribute().

Et puis, tant qu'à faire du beurk pour IE (qui apparement ne respecte pas le DOM puisqu'il créerait des attibuts fictifs), pq essayer de faire du propre

En réalité, c'est pour celà qu'il existe maintenant des librairies JS qui permettent de ne plus se prendre la tête avec des différences entre navigateur. La mode Ajax aura eu du bon à ce niveau là...

Bebuntu · Le 27/09/2006, à 14:48

mccricri a écrit :

Et puis, tant qu'à faire du beurk pour IE (qui apparement ne respecte pas le DOM puisqu'il créerait des attibuts fictifs), pq essayer de faire du propre

Tu utilises le même argument que moi mais pour dire le contraire !! comme quoi

C'est plus propre de faire avec les méthodes DOM et donc, tant pis pour IE ou un poil d'adaptation

Enfin, c'est comme ça que je le vois

mccricri a écrit :

En réalité, c'est pour celà qu'il existe maintenant des librairies JS qui permettent de ne plus se prendre la tête avec des différences entre navigateur. La mode Ajax aura eu du bon à ce niveau là...

mwui... une lib de 4583305 ko, bof bof hein ! pas que du bon... à part peut être jquery

Ubuntu-fr

Navigation

Liens de recherche

Annonce

#1 Le 23/09/2006, à 00:47

[JavaScript] Application Web

#2 Le 23/09/2006, à 01:05

Re : [JavaScript] Application Web

#3 Le 23/09/2006, à 01:10

Re : [JavaScript] Application Web

#4 Le 23/09/2006, à 01:12

Re : [JavaScript] Application Web

#5 Le 23/09/2006, à 01:14

Re : [JavaScript] Application Web

#6 Le 23/09/2006, à 11:21

Re : [JavaScript] Application Web

#7 Le 23/09/2006, à 20:33

Re : [JavaScript] Application Web

#8 Le 23/09/2006, à 21:12

Re : [JavaScript] Application Web

#9 Le 23/09/2006, à 21:23

Re : [JavaScript] Application Web

#10 Le 23/09/2006, à 23:00

Re : [JavaScript] Application Web

#11 Le 23/09/2006, à 23:01

Re : [JavaScript] Application Web

#12 Le 23/09/2006, à 23:33

Re : [JavaScript] Application Web

#13 Le 24/09/2006, à 06:39

Re : [JavaScript] Application Web

#14 Le 24/09/2006, à 12:23

Re : [JavaScript] Application Web

#15 Le 24/09/2006, à 13:02

Re : [JavaScript] Application Web

#16 Le 24/09/2006, à 14:13

Re : [JavaScript] Application Web

#17 Le 24/09/2006, à 16:08

Re : [JavaScript] Application Web

#18 Le 24/09/2006, à 16:43

Re : [JavaScript] Application Web

#19 Le 24/09/2006, à 17:33

Re : [JavaScript] Application Web

#20 Le 26/09/2006, à 08:06

Re : [JavaScript] Application Web

#21 Le 26/09/2006, à 09:16

Re : [JavaScript] Application Web

#22 Le 26/09/2006, à 14:44

Re : [JavaScript] Application Web

#23 Le 27/09/2006, à 11:47

Re : [JavaScript] Application Web

#24 Le 27/09/2006, à 14:48

Re : [JavaScript] Application Web

Pied de page des forums