Menu
How common is it to use PHP to generate at least part of a JavaScript file? I was wondering if doing so was a sign of bad coding habits.
I must admit I’ve done it myself:
[code=php]<?php
header(“Content-Type:text/javascript”);
$year = $_GET[‘year’];
include(‘../DataFiles/Includes/common.php’);
GetDB();
$query = mysql_query(“SELECT
(SELECT DISTINCT
`conference`
FROM `divisions`
JOIN `team_divs` ON `divisions`.`d_code` = `team_divs`.`d_code`
WHERE `team_divs`.`t_code` = `colors`.`t_code`
) AS `conf`,
`colors`.`t_code`,
`colors`.`logo`
FROM `colors`
WHERE(`colors`.`to` = 0 OR `colors`.`to` > $year)
AND(`colors`.`from` <= $year)
AND `logo` IS NOT NULL
;”);
$tm = ‘var $logos = {‘ . n;
while($row = mysql_fetch_array($query)){
$tm .=
t1 . ”Team_’ . $row[‘t_code’] . ”:{‘ .
”URL’:” . $row[‘t_code’] . ‘/’ . $row[‘logo’] . ”,’ .
”Conf’:” . $row[‘conf’] . ”’ .
‘},’ . n
;
}
$tm = substr($tm, 0 , -3) . n . ‘};’;
echo $tm;
?>
Which (currently) spits out:
[code=php]var $logos = {
‘Team_ALB’:{‘URL’:’ALB/alphas.jpg’,’Conf’:’Eastern’},
‘Team_BAL’:{‘URL’:’BAL/spirits-1.jpg’,’Conf’:’Eastern’},
‘Team_BDF’:{‘URL’:’BDF/bantams-logo-great.png’,’Conf’:’Eastern’},
‘Team_GAL’:{‘URL’:’GAL/sand_dollars_NEW.png’,’Conf’:’Western’},
‘Team_HNT’:{‘URL’:’HNT/mayors.png’,’Conf’:’Eastern’},
‘Team_MON’:{‘URL’:’MON/howlers-logo.png’,’Conf’:’Western’},
‘Team_NWK’:{‘URL’:’NWK/pride.jpg’,’Conf’:’Eastern’},
‘Team_PIT’:{‘URL’:’PIT/pitt_keystones_logo.png’,’Conf’:’Eastern’},
‘Team_SAS’:{‘URL’:’SAS/spectrums.png’,’Conf’:’Western’},
‘Team_STA’:{‘URL’:’STA/thrust.jpg’,’Conf’:’Western’},
‘Team_TAL’:{‘URL’:’TAL/typhoons.jpg’,’Conf’:’Eastern’},
‘Team_WIL’:{‘URL’:’WIL/minutemenlogo.png’,’Conf’:’Eastern’}
};
The full generated script is
[code=php]var $logos = {
‘Team_ALB’:{‘URL’:’ALB/alphas.jpg’,’Conf’:’Eastern’},
‘Team_BAL’:{‘URL’:’BAL/spirits-1.jpg’,’Conf’:’Eastern’},
‘Team_BDF’:{‘URL’:’BDF/bantams-logo-great.png’,’Conf’:’Eastern’},
‘Team_GAL’:{‘URL’:’GAL/sand_dollars_NEW.png’,’Conf’:’Western’},
‘Team_HNT’:{‘URL’:’HNT/mayors.png’,’Conf’:’Eastern’},
‘Team_MON’:{‘URL’:’MON/howlers-logo.png’,’Conf’:’Western’},
‘Team_NWK’:{‘URL’:’NWK/pride.jpg’,’Conf’:’Eastern’},
‘Team_PIT’:{‘URL’:’PIT/pitt_keystones_logo.png’,’Conf’:’Eastern’},
‘Team_SAS’:{‘URL’:’SAS/spectrums.png’,’Conf’:’Western’},
‘Team_STA’:{‘URL’:’STA/thrust.jpg’,’Conf’:’Western’},
‘Team_TAL’:{‘URL’:’TAL/typhoons.jpg’,’Conf’:’Eastern’},
‘Team_WIL’:{‘URL’:’WIL/minutemenlogo.png’,’Conf’:’Eastern’}
};
var $map = document.getElementById(‘Team_Map’);
var $body = document.getElementsByTagName(‘body’)[0];
var $logo = new Object();
$logo.DIV = document.createElement(‘div’);
$logo.IMG = document.createElement(‘img’);
$logo.DIV.appendChild($logo.IMG);
$logo.DIV.style.position=”absolute”;
$logo.DIV.style.left=’0′;
$logo.DIV.style.top=’0′;
$logo.DIV.style.color=’red’;
$logo.DIV.style.fontWeight=’bold’;
$logo.DIV.style.display=’none’;
$logo.DIV.style.borderStyle=’groove’;
$logo.DIV.style.borderColor=’black’;
$logo.DIV.style.borderWidth=’3px’;
$body.appendChild($logo.DIV);
var $img = new Object();
for($l in $logos){
$img[$l] = new Image();
$img[$l].src = ‘./Teams/Graphics/’ + $logos[$l].URL;
$img[$l].conf = $logos[$l].Conf;
}
var $areas = document.getElementById(‘Team_Map_Links’).getElementsByTagName(‘area’);
for(var $lp = 0; $lp < $areas.length; $lp++){
var $id = $areas[$lp].getAttribute(‘id’);
if(!($logos[$id]===undefined)){
$areas[$lp].onmouseover = function($lp){return function(){
var $coords = $areas[$lp].getAttribute(‘coords’).split(‘,’);
var $id2 = $areas[$lp].getAttribute(‘id’);
var $logX = (
($img[$id2].conf == ‘Eastern’)?
($logX = Number($coords[0]) – 10 – Number($img[$id2].width) + Number($map.offsetLeft)):
Number($coords[2]) + 10 + Number($map.offsetLeft)
);
var $logY = (
((Number($coords[1]) + 16 + Number($img[$id2].height)) > $map.height)?
(Number($coords[3]) – 3 – Number($img[$id2].height) + Number($map.offsetTop)):
(Number($coords[1]) + 6 + Number($map.offsetTop))
);
$logo.DIV.style.display=’block’;
$logo.DIV.style.width=Number($img[$id2].width).toString()+’px’;
$logo.DIV.style.height=Number($img[$id2].height).toString()+’px’;
$logo.DIV.style.left=$logX.toString() + ‘px’;
$logo.DIV.style.top=$logY.toString() + ‘px’;
$logo.IMG.setAttribute(‘src’, $img[$id2].src);
}}($lp);
$areas[$lp].onmouseout = function(){
$logo.DIV.style.display=’none’;
}
}
}