Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

[LONG] Syntaxe HEREDOC et inclusion de javascript, je nage...

35 réponses
Avatar
Eric Demeester
Bonjour,

Dans le but d'externaliser le code javascript inclus dans un script php
dont je ne suis pas l'auteur [*], j'essaye de comprendre comment il a
été construit, et ça commence à me faire mal à la tête...

Voici une fonction mélangeant php et javascript, il y en a plusieurs
comme ça dans le script en question.

Ce que fait la fonction a peu d'importance, ni le nom des variables, ce
qui m'intéresse, c'est la logique (?) de l'imbrication PHP/javascript et
comment réécrire ça proprement...

Mes commentaires concernant ce que je crois comprendre sont entre
crochets.

......................................................................
function rotator_fade_orig( $mod, $fileList, $_params, $speed,
$speed_fade, $number, $url, $url_class, $url_target )
{
$stamp1 = <<<EOT
<script type="text/javascript" language="javascript">
<!--
var j{$mod}=0;
var rotImg{$mod}=new Array();
if (document.images){

EOT;

[ j'en déduis que $stamp1 contient la chaîne littérale contenue entre
<<<EOT et EOT;, et que la valeur de la variable $mod passée en
paramètre à la fonction est affectée à deux variables du javascript,
et ci-dessous on revient au PHP, j'ai bon jusque là ? ]

foreach($fileList as $i=>$imh)
{
$stamp1 .= "rotImg{$mod}[$i]=new Image();\n";
$stamp1 .= "rotImg{$mod}[$i].src=\"". $imh ."\";\n";
}
$_out = "<img src=\"". $fileList[0] ."\" $_params />";
if($url) $_out = "<a href=\"$url\" $url_class $url_target>". $_out
."</a>";

[ Le foreach ci-dessus et le $_out, c'est bien du PHP qui continue à
construire la chaîne $stamp1, mais on est toujours dans le javascript,
puisqu'on a pas encore rencontré de </script>. Donc le bidule est en
train de construire dynamiquement du javascript à la volée, j'ai
toujours bon ? Ci-dessous, on repasse en syntaxe HEREDOC : ]

$stamp2 = <<<EOT
}
function rotator$mod() {
if (document.all){

document.images.rot_img{$mod}.style.filter="blendTrans(duration={$speed_fade})";
document.images.rot_img{$mod}.filters.blendTrans.Apply();
}
document.images.rot_img{$mod}.src=rotImg{$mod}[j{$mod}].src;
if (document.all)
document.images.rot_img{$mod}.filters.blendTrans.Play();

if (j{$mod}<({$number}-1))
j{$mod}=j{$mod}+1;
else
j{$mod}=0;

rotTimer{$mod} = setTimeout('rotator{$mod}()',{$speed});
}
//-->
</script>{$_out}<script type="text/javascript"
language="javascript">rotator{$mod}();</script>
EOT;

[ On s'intéresse maintenant à la chaîne littérale $stamp2, qui comme
$stamp1 est en fait du javascript assaisonné de variables passées par
le PHP. Puis vient la fin du script. {$_out} entre accolades juste
avant la réouverture d'un script appelant la fonction rotator, je ne
comprends pas sa syntaxe... ]

return $stamp1.$stamp2;
}

[ ici, fin de la fonction PHP, qui renvoie la concaténation des deux
chaînes à la fonction appelante, laquelle insérera le javascript
dans la page appelante ($_out je suppose) ]
......................................................................

En résumé, si j'ai compris la philosophie de la chose, je pourrais
résoudre mon problème de séparation des genres en écrivant le javascript
dans un fichier texte puis appeler ce fichier dans les en-têtes de la
page, plutôt que d'insérer directement le javascript dans le corps de la
page html générée ?

Tout ça parce qu'un spécialiste du référencement (sic) n'aime pas le
javascript dans les pages « parce que ça perturbe les robots » :(

Si vous avez des idées, des commentaires, des suggestions, cela me sera
d'un grand secours.

Merci aux personnes qui auront eu la patience de me lire.

[*] Il s'agit de function.image_rotator.php, qui est un plugin de
cms made simple :
http://dev.cmsmadesimple.org/project/files/172#package-220
C'est ce qui fait défiler les portraits en haut à droite sur :
http://www.opusinfide.com/

--
Eric

10 réponses

1 2 3 4
Avatar
Olivier Miakinen
Le 24/02/2011 21:45, Eric Demeester a écrit :

[...]

[ j'en déduis que $stamp1 contient la chaîne littérale contenue entre
<<<EOT et EOT;, et que la valeur de la variable $mod passée en
paramètre à la fonction est affectée à deux variables du javascript,
et ci-dessous on revient au PHP, j'ai bon jusque là ? ]



Presque... Ce n'est pas tout à fait une chaîne littérale car la variable
$mod est interprétée.

[...]

En résumé, si j'ai compris la philosophie de la chose, je pourrais
résoudre mon problème de séparation des genres en écrivant le javascript
dans un fichier texte puis appeler ce fichier dans les en-têtes de la
page, plutôt que d'insérer directement le javascript dans le corps de la
page html générée ?



Presque aussi. Après avoir lu le javascript depuis un fichier texte, il
faudrait soit remplacer les variables par leurs valeurs via un truc du
style preg_replace('/$mod/', $mod), soit en faire des paramètres de la
fonction javascript. J'essaierai de détailler un peu plus tard, là je
dois partir.

--
Olivier Miakinen
Avatar
Olivier Miakinen
Salut !

Comme promis voici une réponse un peu plus complète.

Il faut savoir que les chaînes de caractères en syntaxe Heredoc se
comportent exactement comme celles entourées de doubles guillemets,
avec donc l'interprétation des variables, la seule différence étant
qu'on n'a pas besoin d'échapper les « " » eux-mêmes. Cela étant posé,
l'essentiel pour comprendre ce que fait ce code se trouve ici :
http://fr.php.net/manual/fr/language.types.string.php#language.types.string.parsing.complex

De temps en temps il est écrit simplement $mod et parfois c'est {$mod}.
Le plus souvent c'est la même chose, mais parfois la syntaxe {$mod} est
obligatoire. Voyons cela plus en détail.

Le 24/02/2011 21:45, Eric Demeester a écrit :
......................................................................
function rotator_fade_orig( $mod, $fileList, $_params, $speed,
$speed_fade, $number, $url, $url_class, $url_target )
{
$stamp1 = <<<EOT
<script type="text/javascript" language="javascript">
<!--
var j{$mod}=0;
var rotImg{$mod}=new Array();



Ici, on aurait pu avoir tout aussi bien j$mod et rotImg$mod, ça
reviendrait strictement au même. Par exemple, si $mod vaut 15, le
code JavaScript résultant sera :
var j15=0;
var rotImg15=new Array();

foreach($fileList as $i=>$imh)
{
$stamp1 .= "rotImg{$mod}[$i]=new Image();n";
$stamp1 .= "rotImg{$mod}[$i].src="". $imh ."";n";



Ici, en revanche, les accolades sont indispensables. Supposons que $mod
vaut 15 et $i vaut 2, alors ce code est équivalent à :
$stamp1 .= "rotImg15[2]=new Image();n";
$stamp1 .= "rotImg15[2].src="". $imh ."";n";

Sans les accolades, PHP essaierait d'accéder à l'indice 2 d'un tableau
PHP nommé $mod, puis de coller le contenu de $mod[2] dans la chaîne,
laquelle ne serait pas du tout une syntaxe de tableau JavaScript !

function rotator$mod() {



Là il n'y a pas d'accolades, mais on aurait pu les mettre :
function rotator{$mod}() {
c'est-à-dire si $mod = 15 :
function rotator15() {

if (document.all){

document.images.rot_img{$mod}.style.filter="blendTrans(duration={$speed_fade})";
document.images.rot_img{$mod}.filters.blendTrans.Apply();
}
document.images.rot_img{$mod}.src=rotImg{$mod}[j{$mod}].src;
if (document.all)
document.images.rot_img{$mod}.filters.blendTrans.Play();

if (j{$mod}<({$number}-1))
j{$mod}=j{$mod}+1;
else
j{$mod}=0;

rotTimer{$mod} = setTimeout('rotator{$mod}()',{$speed});



Bon, là il y a des accolades partout, mais ça ne devrait plus te poser
de problème de compréhension. La plupart pourraient être supprimées,
plus précisément toutes sauf une seule paire d'accolades. Je te laisse
trouver laquelle.


Cordialement,
--
Olivier Miakinen
Avatar
Olivier Masson
Le 24/02/2011 21:45, Eric Demeester a écrit :


Tout ça parce qu'un spécialiste du référencement (sic) n'aime pas le
javascript dans les pages « parce que ça perturbe les robots » :(




Eh bé ! Quel spécialiste ! Ce qui peut perturber certains crawlers, ce
sont les liens JS (à la "onclick") même si Google en tient compte, par
opposition aux liens dits "en dur" que recherchent les référenceurs.
Ce n'est pas le cas ici, donc c'est du gros pipeau et je n'ai d'ailleurs
jamais vu d'article sur une telle connerie.
Avatar
Eric Demeester
dans (in) fr.comp.lang.php, Olivier Miakinen <om+
ecrivait (wrote) :

Bonjour Olivier,

Il faut savoir que les chaînes de caractères en syntaxe Heredoc se
comportent exactement comme celles entourées de doubles guillemets,


[...]
http://fr.php.net/manual/fr/language.types.string.php#language.types.string.parsing.complex



Honte à moi, j'avais consulté cette page du manuel, mais je m'étais
limité à la lecture du paragraphe concernant Heredoc, et j'avais raté
les explications concernant la syntaxe « complète ». C'est beaucoup plus
clair, maintenant.

De temps en temps il est écrit simplement $mod et parfois c'est {$mod}.
Le plus souvent c'est la même chose, mais parfois la syntaxe {$mod} est
obligatoire. Voyons cela plus en détail.



Voyons si j'ai compris tes explications :

Bon, là il y a des accolades partout, mais ça ne devrait plus te poser
de problème de compréhension. La plupart pourraient être supprimées,
plus précisément toutes sauf une seule paire d'accolades. Je te laisse
trouver laquelle.

> document.images.rot_img{$mod}.src=rotImg{$mod}[j{$mod}].src;


^^^^^^
C'est là qu'il faut les laisser. J'ai bon ? :)

Tu me disais dans un précédent message :

Après avoir lu le javascript depuis un fichier texte, il
faudrait soit remplacer les variables par leurs valeurs via un truc du
style preg_replace('/$mod/', $mod), soit en faire des paramètres de la
fonction javascript.



En fait, étant une feignasse notoire, je pensais m'orienter vers la
solution suivante :

Je laisse le script PHP original construire $stamp1 et $stamp2 (ainsi
j'ai un javascript dans lequel les variables sont affectées), mais je le
modifie de façon à supprimer au début :

<script type="text/javascript" language="javascript">

et </script> à la fin.

Une fois que j'ai construit $stamp1 et $stamp2, je les écris dans un
fichier texte intitulé disons, rotator.js, puis, au lien de renvoyer ces
deux variables à la fonction appelante, je lui retourne cette chaîne :

<script type="text/javascript" language="javascript1.2"
src="rotator.js"></script>

Ça implique de générer dynamiquement le javascript à chaque appel de la
fonction php, mais après tout c'est déja ce qui se passe, la seule
différence étant que je fais plaisir au référenceur fou en
l'externalisant afin qu'il ne soit plus présent dans le source de la
page html. Je m'en vais tester tout ça.

Merci de ta réponse !

Amicalement,

--
Eric
Avatar
Eric Demeester
[ Attention, suivi positionné sur fr.comp.infosystemes.www.auteurs et
sujet changé parce que ça n'a plus rien à voir avec PHP ]

Salut Olivier,

dans (in) fr.comp.lang.php, Olivier Masson
ecrivait (wrote) :

Le 24/02/2011 21:45, Eric Demeester a écrit :
> Tout ça parce qu'un spécialiste du référencement (sic) n'aime pas le
> javascript dans les pages « parce que ça perturbe les robots » :(

Eh bé ! Quel spécialiste ! Ce qui peut perturber certains crawlers, ce
sont les liens JS (à la "onclick") même si Google en tient compte, par
opposition aux liens dits "en dur" que recherchent les référenceurs.



Oui, mais ça, il n'y a pas sur mes sites. Je n'utilise le javascript
qu'à la demande expresse de clients qui veulent des Mickeys qui bougent,
dans le genre des portraits défilants sur la page que je citais. Le
bidule est cliquable, mais il y a au moins 3 liens en dur dans des menus
menant à la même page, parfaitement accessibles aux robots d'indexation.

Ce n'est pas le cas ici, donc c'est du gros pipeau et je n'ai d'ailleurs
jamais vu d'article sur une telle connerie.



Je viens de regarder un peu, et les seuls articles parlant de ça sont
sur des sites de... marchands de référencement.

J'y ai quand même trouvé un bon conseil, mais pas spécialement lié aux
robots d'indexation, c'est l'utilisation systématique d'une balise
<noscript> proposant un résumé de ce que fait le javascript, utile pour
améliorer l'accessibilité et proposer une informations aux personnes
ayant javascript désactivé.

Autre préconisation du même spécialiste pour, je cite, « passer en
tendance verte sur mes outils de monitoring » : gziper le site
entièrement en paramétrant un php.ini.

Je suis loin d'être un spécialiste en référencement, mais je trouve tout
ça un peu tiré par les cheveux, comparé à la proposition de contenus
pertinents, sémantiquement corrects et organisés selon une arborescence
claire, le tout présenté dans des pages valides w3c.

Mais bon.

--
Eric
Avatar
Olivier Miakinen
Le 25/02/2011 15:11, Eric Demeester a écrit :

http://fr.php.net/manual/fr/language.types.string.php#language.types.string.parsing.complex



Honte à moi, j'avais consulté cette page du manuel, mais je m'étais
limité à la lecture du paragraphe concernant Heredoc, et j'avais raté
les explications concernant la syntaxe « complète ». C'est beaucoup plus
clair, maintenant.



Il faut dire que la syntaxe des chaînes est beaucoup plus complexe
qu'on ne pourrait le croire au premier abord. Il n'y a qu'à voir
comment on peut écrire aussi bien "${foo}" que "$foo" ou "{$foo}".
Et c'est encore pire avec les variables statiques de classes et les
constantes de classes (cf. plus loin sur la page) !

Voyons si j'ai compris tes explications :

Bon, là il y a des accolades partout, mais ça ne devrait plus te poser
de problème de compréhension. La plupart pourraient être supprimées,
plus précisément toutes sauf une seule paire d'accolades. Je te laisse
trouver laquelle.



> document.images.rot_img{$mod}.src=rotImg{$mod}[j{$mod}].src;


^^^^^^
C'est là qu'il faut les laisser. J'ai bon ? :)



20/20 !

[...]

En fait, étant une feignasse notoire, je pensais m'orienter vers la
solution suivante :

Je laisse le script PHP original construire $stamp1 et $stamp2 (ainsi
j'ai un javascript dans lequel les variables sont affectées), mais je le
modifie de façon à supprimer au début :

<script type="text/javascript" language="javascript">

et </script> à la fin.

Une fois que j'ai construit $stamp1 et $stamp2, je les écris dans un
fichier texte intitulé disons, rotator.js, puis, au lien de renvoyer ces
deux variables à la fonction appelante, je lui retourne cette chaîne :

<script type="text/javascript" language="javascript1.2"
src="rotator.js"></script>

Ça implique de générer dynamiquement le javascript à chaque appel de la
fonction php, mais après tout c'est déja ce qui se passe, la seule
différence étant que je fais plaisir au référenceur fou en
l'externalisant afin qu'il ne soit plus présent dans le source de la
page html. Je m'en vais tester tout ça.



Attention, si tu fais cela, à ce que la fonction ne soit appelée qu'une
seule fois. En effet, si elle est appelée plusieurs fois avec des
paramètres différents ($mod, $url, $speed, $speed_fade, etc.), c'est
le dernier appel qui gagnera en remplissant le rotator.js avec *ses*
paramètres particuliers.

P.-S. : je ne suis pas sûr que le paramètre language de la balise script
serve à quelque chose... mais sur ce point tu dois être plus au courant
que moi alors je te laisse juge.

Cordialement,
--
Olivier Miakinen
Avatar
SAM
Le 25/02/11 17:27, Eric Demeester a écrit :
[ Attention, suivi positionné sur fr.comp.infosystemes.www.auteurs et
sujet changé parce que ça n'a plus rien à voir avec PHP ]

Salut Olivier,

dans (in) fr.comp.lang.php, Olivier Masson
ecrivait (wrote) :

Le 24/02/2011 21:45, Eric Demeester a écrit :
Tout ça parce qu'un spécialiste du référencement (sic) n'aime pas le
javascript dans les pages « parce que ça perturbe les robots » :(






...
Eh bé ! Quel spécialiste !




...
Oui, mais


...
Ce n'est pas le cas ici, donc c'est du gros pipeau




J'y ai quand même trouvé un bon conseil, mais pas spécialement lié aux
robots d'indexation, c'est l'utilisation systématique d'une balise
<noscript> proposant un résumé de ce que fait le javascript, utile pour
améliorer l'accessibilité et proposer une informations aux personnes
ayant javascript désactivé.



Ha! Ben! les v'là bôs avec l'info leur disant que rien ne fonctionne !

Bêtas comme ils sont à pas savoir enabléder leur JS, ils ne s'étaient
rendus compte de rien les pôvrets.

Vaudrait peut-être mieux donner des conseils éclairés aux
javascripteurs, me semble ?!

Autre préconisation du même spécialiste pour, je cite, « passer en
tendance verte sur mes outils de monitoring » : gziper le site
entièrement en paramétrant un php.ini.



Bon ... là ... on ne sait dequidequoi qu'on cause.


Je suis loin d'être un spécialiste en référencement, mais je trouve tout
ça un peu tiré par les cheveux, comparé à la proposition de contenus
pertinents, sémantiquement corrects et organisés selon une arborescence
claire, le tout présenté dans des pages valides w3c.

Mais bon.



Certes.



--
Stéphane Moriaux avec/with iMac-intel
Avatar
Olivier Masson
Le 25/02/2011 17:27, Eric Demeester a écrit :

J'y ai quand même trouvé un bon conseil, mais pas spécialement lié aux
robots d'indexation, c'est l'utilisation systématique d'une balise
<noscript> proposant un résumé de ce que fait le javascript, utile pour
améliorer l'accessibilité et proposer une informations aux personnes
ayant javascript désactivé.

Autre préconisation du même spécialiste pour, je cite, « passer en
tendance verte sur mes outils de monitoring » : gziper le site
entièrement en paramétrant un php.ini.

Je suis loin d'être un spécialiste en référencement, mais je trouve tout
ça un peu tiré par les cheveux, comparé à la proposition de contenus
pertinents, sémantiquement corrects et organisés selon une arborescence
claire, le tout présenté dans des pages valides w3c.

Mais bon.




On est hors charte mais je me permets sur cette réponse (si on continue,
ce sera sur fciw).

Le <noscript> est une bonne habitude, c'est certain mais son utilité
pour le référencement, franchement, jamais entendu parlé ni constaté.

Quant à la compression des pages, c'est une évidence (tu peux également
indiqué que tu compresses les css et les js), mais surtout pour la
performance. Tout comme la réduction du nombre de requêtes
(concaténation des css, des js, utilisation de sprites...)
Or, Google prend en compte la performance depuis l'année dernière pour
ajuster son positionnement. Google avait annoncé alors que ce critère ne
serait que peu pris en compte, mais certains tests effectués semble
montrer qu'il est parfois assez influent. Comme toujours dans le
référencement, c'est surtout dans un contexte de forte concurrence que
tous les critères doivent être optimisés au mieux.
Bref, installe pagespeed de Google ou YSlow de Yahoo sur ton firefox et
utilise une partie des conseils résultant.
Tu peux aussi installer le module mod_pagespeed de Google pour apache
qui pourrait être génial, sauf que j'ai parfois de fortes montées en
charge sur mes httpd. Je remonte les problèmes aux dev et les versions
s'améliorent peu à peu.
Avatar
Olivier Masson
Le 25/02/2011 20:13, Olivier Masson a écrit :


On est hors charte mais je me permets sur cette réponse (si on continue,
ce sera sur fciw).



:) tiens, on y est déjà, je n'avais pas vu le cross-post...
Avatar
Eric Demeester
dans (in) fr.comp.infosystemes.www.auteurs, Olivier Masson
ecrivait (wrote) :

Bonjour Olivier,

On est hors charte mais je me permets sur cette réponse (si on continue,
ce sera sur fciw).



Comme tu l'as constaté ensuite, nous y sommes déjà, et j'avais
soigneusement signalé le suivi en tête du message auquel tu réponds :)

Le <noscript> est une bonne habitude, c'est certain mais son utilité
pour le référencement, franchement, jamais entendu parlé ni constaté.



Vi.

Quant à la compression des pages, c'est une évidence (tu peux également



Je l'ignorais, mais en lisant la suite de tes explications, je te crois
volontiers.

indiqué que tu compresses les css et les js), mais surtout pour la
performance. Tout comme la réduction du nombre de requêtes
(concaténation des css, des js, utilisation de sprites...)



Dans la mesure ou j'ai activé la compression au niveau de php :

zlib.output_compression = On
zlib.output_compression_level = 6

C'est vraiment utile d'aller en plus concaténer et compresser les css et
les javascript en amont ?

Bon, à en croire ce que me raconte Pagespeed (voir ci-dessous), ça
l'est.

Bref, installe pagespeed de Google ou YSlow de Yahoo sur ton firefox et
utilise une partie des conseils résultant.



Hop, je viens d'installer Firebug et Pagespeed [*]. Sur la page
d'accueil du site, j'obtiens 82%, sur les autres, 84% en moyenne. C'est
donc encore améliorable, mais puisque tu sembles avoir de l'expérience
dans l'utilisation de cet outil, est-ce un score excellent, bon, moyen,
catastrophique ?

Tu peux aussi installer le module mod_pagespeed de Google pour apache



Ça ne va pas être possible pour le moment sur mon serveur, parce que je
doute qu'il soit compatible avec l'Apache 1.3.27 antédiluvien qui y
tourne, et que je me garderai bien de passer en 2.2. parce que ce serait
trop compliqué (FreeBSD hors d'âge, dépendances, patin couffin, j'ai
déjà galéré des heures pour le passer en php5).

Ceci dit, grand merci pour tes explications et tes conseils !

[*] J'ai l'habitude d'utiliser web Developer, d'où l'absence de Firebug
sur ma machine jusqu'à maintenant.

--
Eric
1 2 3 4