[html, php, javascript] script z HTML do .js

[dyžon]

zdravím,
chtěl bych Vás poprosit o pomoc s úpravou code.
potřeboval bych přesunout javascript z html do samostatnýho souboru.
v javascriptu mám code, co mi po 10 vterinách mění fotku v <img>
kdyz mám javascript vloženej v html, tak to funguje dobře

Kód: Vybrat vše

<div class="prava_strana">
    <?php $pocet_fotek = spocitej_fotky() ?>
    <img src="grafika/album_fotek/fotka_0.png" id="prezentace" alt="obr_talíř" />
        <script type="text/javascript">
            var i = 1;
            function zmen_fotku() {
                document.getElementById("prezentace").src = "grafika/album_fotek/fotka_"+(i++ % <?= $pocet_fotek ?>)+".png";
            }
            function zmena_fotky(){
                setInterval(zmen_fotku, 10000);
            }
         </script>
</div>

když ale vytvořím soubor zmen.js a funkce přesunu tam

Kód: Vybrat vše

<div class="prava_strana">
      <?php $pocet_fotek = spocitej_fotky()
      <img src="grafika/album_fotek/fotka_0.png" id="prezentace" alt="obr_talíř" />
             <script src="java/zmen.js"></script>
</div>

a zmen.js

Kód: Vybrat vše

var i = 1;
function zmen_fotku() {
      document.getElementById("prezentace").src = "grafika/album_fotek/fotka_"+(i++ % <?= $pocet_fotek ?>)+".png";
}
function zmena_fotky(){
       setInterval(zmen_fotku, 10000);
}

tak nic.
nějakej nápad ??

[Doggg]

Podívej se do logu console bez většího zkoumání - nehledá ty obrázky v /java/grafika namísto /grafika?

[JirkaVejrazka]

Nechybi ti ukonceni te PHP sekce?

[zivan]

Co problém s "$pocet_fotek" v js souboru?

[Emil Pastelka]

Kromě uvedených chyb v zápise je problém v kombinaci proměnné PHP a JS. V prvním případě se vše vykoná, protože server sestaví HTML správně, ale ve chvíli, kdy oddělíte JS, který stále volá proměnnou z PHP, tak nedojde k vykonání PHP, protože to se uvnitř JS prostě nespustí.
Lze to řešit tak, že místo JS souboru vše uložíte jako PHP a zavoláte jej přes

Kód: Vybrat vše

include 'zmen.php';

Pak to bude vypadat takto

Kód: Vybrat vše

<div class="prava_strana">
    <?php $pocet_fotek = spocitej_fotky();
              include 'zmen.php';?>
    <img src="grafika/album_fotek/fotka_0.png" id="prezentace" alt="obr_talíř" />
</div>


a zmen.php

Kód: Vybrat vše

<script type="text/javascript">
var i = 1;
function zmen_fotku() {
document.getElementById("prezentace").src = "grafika/album_fotek/fotka_"+(i++ % <?= $pocet_fotek ?>)+".png";
}
function zmena_fotky(){
setInterval(zmen_fotku, 10000);
}
</script>


Ovšem stále se jedná o hloupé řešení, protože kombinujete proměnné dvou prostředí a JS bude fungovat jen v daném místě - to je vždy nevhodné. PHP slouží ke konstrukci HTML a JS k jeho manipulaci. Pokud máte proměnnou v PHP, je vhodné z ní udělat HTML element, který pak JS bude nativně volat. Na to je vhodný HTML atribut data-.

Kód: Vybrat vše

<?php $pocet_fotek = spocitej_fotky(); ?>
<div class="prava_strana">
    <img src="grafika/album_fotek/fotka_0.png" id="prezentace" data-pocet-fotek="<?php echo $pocet_fotek; ?>" />
</div>


a externí JS, které budete volat normálně, bude vypadat takto

Kód: Vybrat vše

  var i = 1;
  var prezentace = document.getElementById('prezentace');
  var pocet = prezentace.getAttribute('data-pocet-fotek');

function zmen_fotku() {
   prezentace.src = "grafika/album_fotek/fotka_"+(i++ % pocet)+".png";
}
function zmena_fotky(){
  setInterval(zmen_fotku, 10000);
}


Nicméně stále je to nepěkný kód

[Emil Pastelka]

Měl jsem chvilku čas. Ideální by bylo, aby výstup funkce spocitej_fotky(); vracel rovnou číslo.

Kód: Vybrat vše

<div class="prava_strana">
    <img src="grafika/album_fotek/fotka_0.png" id="prezentace" data-pocet-fotek="<?php echo spocitej_fotky(); ?>" data-cesta="grafika/album_fotek/fotka_" />
</div>


A script pak bude

Kód: Vybrat vše

  var prezentace = document.getElementById('prezentace');
  var cesta = prezentace.getAttribute('data-cesta');
  var pocet = prezentace.getAttribute('data-pocet-fotek');
  var cas = 1000;
  var i = 0;

var interval = setInterval(function (){
    i++;
    if(pocet < i){ i = 1 }
    prezentace.src = cesta + i + ".png";
}, cas);


Ve výsledku můžete přes PHP do atributu data- nacpat cokoliv - třeba požadovaný čas, cestu... A pomocí stejného JS pak univerzálně volat potřebné hodnoty.

[dyžon]

děkuji všem ...
to: Emil Pastelka::
tak to je nádhera, díky moc, nečekal jsem, že to vytvoříte za mě, ale jsem rád.
jsem samouk a z hotových řešení se učím nejlépe.
funkce spocitej_fotky(); vrací číslo:

Kód: Vybrat vše

   function spocitej_fotky() {
         $slozka = "grafika/album_jidel/";
         $pocet_fotek = 0;

        if (is_dir($slozka)) {
            if ($otevrena_slozka = opendir($slozka)) {
                while (($soubor = readdir($otevrena_slozka)) !== false) {
                    if($soubor != '.' && $soubor != '..') {

                        $pocet_fotek = $pocet_fotek + 1;
                    }
                }
                return $pocet_fotek;
                closedir($otevrena_slozka);
            }
        }
    }

Váš zápis se mi líbí, bohužel mi nefunguje. Co vlastně spouští ten script zmen.js ?
zkoušel jsem ho přidat za tag <img ...>, ale fotky se pořád nemění .. :o/

Kód: Vybrat vše

<div class="prava_strana">
    <img src="grafika/album_fotek/fotka_0.png" id="prezentace" data-pocet-fotek="<?php echo spocitej_fotky(); ?>" data-cesta="grafika/album_fotek/fotka_" />
<script src="java/zmen.js"></script>
</div>

tak se omlouvám, zapoměl jsem nahrát soubor zmen.js na server. (asi tím vedrem ...)
trošku jsem ho ještě upravil, interval jsem zvýšil na 10 vteřin a ve složce album_fotek mi začínají soubory 0, fotka_0.png, takže jsem upravil podmínku na if(pocet < i + 1):

Kód: Vybrat vše

  var prezentace = document.getElementById('prezentace');
  var cesta = prezentace.getAttribute('data-cesta');
  var pocet = prezentace.getAttribute('data-pocet-fotek');
  var cas = 10000;
  var i = 0;

var interval = setInterval(function (){
    i++;
    if(pocet < i + 1){ i = 0 }
    prezentace.src = cesta + i + ".png";
}, cas);

teď už valí všechno jak má ...
ještě jednou děkuji a přeji krásné léto všem ...

[Emil Pastelka]

Tak to mám radost, že se dobrá věc podařila. JS počítá od nuly, ten můj zápis předpokládal, že fotka nula neexistuje
Každopádně se podívejte na PHP FilesystemIterator, váš postup je sice správný, ale takový nemoderní.

Kód: Vybrat vše

$obsah = new FilesystemIterator(__DIR__); //jméno adresáře s uvozovkami např. "obrazky"
$pouzesoubory = new CallbackFilterIterator($obsah, function($filtr) {
    return $filtr->isFile();
});

printf("Obsah adresáře, složky i soubory: %d <br>", iterator_count($obsah));
printf("Obsah adresáře, pouze soubory: %d", iterator_count($pouzesoubory));


[dyžon]

aha, tuhle funkci jsem neznal, určitě se na ni podívám ...
nemá smysl vytvářet něco, co už je hotové,
děkuji.

[TomPlasil]

To bude tím, že v tom rozvířeným bahnnu HTML,CSS a JS už nejde jednoduše hrábnout na dno a nabrat JS bahínko a dát ho do samotnýho kvelbu, a když to uděláš, zůstane ti tam PHP. A ten kýbl na javascript nebude interpretovat PHP, letmo jsem viděl, že tam nejsou otevírací tagy php.
mimochodem hlavní soubor se interpretuje na serveru?

A za další, když přetáhneš jen tak bez přemýšlení PHP kód, z jednoho hlavního php souboru tak, tím zpřetrháš vazby, něco jako kdybys chtěl zapojenou televizi přesunout z jednoho bytu do druhého a prostě bys ji vyrval a přenesl a pak nezapojil

[Emil Pastelka]

Teda, eh, vůbec netuším, co jste chtěl sdělit a na co přesně reagujete.