JSON er et enkelt format til lagring af data og indstillinger.

{
  "autoplay": true,
  "interval_seconds": 5,
  "max_banners": 2
}

JSON udfører ikke selv noget. PHP eller JavaScript skal læse filen og bruge oplysningerne.

HTML

HTML er sidens struktur.

<div class="banner-slider">
  <div class="banner-slide">Banner 1</div>
  <div class="banner-slide">Banner 2</div>
</div>

Hvis en afsluttende </div> står forkert, kan banner 2 ende uden for slideren. JavaScript finder så måske kun det første banner.

JavaScript

JavaScript kører i browseren og gør siden interaktiv.

Et slideshow skal typisk:

1. finde slideren
2. finde alle billeder
3. vise det første
4. skjule det gamle billede
5. vise det næste efter et antal sekunder

Sådan arbejder delene sammen

JSON-indstillinger
        ↓
PHP læser data
        ↓
PHP genererer HTML
        ↓
Browseren viser siden
        ↓
JavaScript finder elementerne
        ↓
Slideshow eller anden funktion starter

Hvis ét led fejler, kan resultatet være, at billeder ikke skifter, knapper ikke virker, eller kun ét element vises.

Typiske problemer

PHP genererer kun ét element

JavaScript kan ikke skifte til banner nummer to, hvis PHP kun har sendt ét banner til browseren.

Kontrollér derfor sidens HTML-kilde:

<div class="banner-slide">Banner 1</div>
<div class="banner-slide">Banner 2</div>

Hvis der kun findes ét element, ligger fejlen sandsynligvis i PHP eller JSON.

PHP og JavaScript bruger forskellige klasser

PHP kan generere:

<div class="frontpage-banner-slide">

mens JavaScript leder efter:

document.querySelectorAll(".banner-slide");

Resultatet bliver nul fundne billeder.

Klassenavne skal være helt ens.

Scriptet starter for tidligt

JavaScript kan blive indlæst, før HTML-elementerne findes.

En løsning er at bruge:

<script src="slider.js" defer></script>

eller placere scriptet lige før </body>.

Forkert placeret </div>

En lille HTML-fejl kan ligne en JavaScriptfejl:

<div class="banner-slider">
  <div class="banner-slide">Banner 1</div>
</div>

<div class="banner-slide">Banner 2</div>

JavaScript søger kun inde i .banner-slider og finder derfor kun banner 1.

hidden bliver ikke fjernet

PHP kan skjule alle billeder undtagen det første:

<div class="banner-slide" hidden>

JavaScript skal derefter fjerne skjulningen:

slide.hidden = false;

Det er ikke altid nok kun at ændre en CSS-klasse.

Sekunder og millisekunder

JavaScript bruger millisekunder.

setTimeout(nextSlide, 5000);

5000 betyder fem sekunder.

Hvis JSON gemmer værdien som sekunder:

"interval_seconds": 5

skal JavaScript gange med 1.000.

const delay = intervalSeconds * 1000;

Tal bliver læst som tekst

HTML-dataattributter returnerer tekst:

<div data-interval="5000">

JavaScript bør konvertere værdien:

const interval = Number.parseInt(
  slider.dataset.interval,
  10
);

Ugyldig JSON

En manglende komma kan gøre hele JSON-filen ugyldig:

{
  "autoplay": true
  "max_banners": 2
}

Korrekt:

{
  "autoplay": true,
  "max_banners": 2
}

PHP bør kontrollere fejl fra json_decode().

Skriveproblemer

PHP skal have rettigheder til at skrive i mapper som:

/data/
/uploads/banners/

Ellers kan admin vise, at noget er gemt, mens forsiden stadig bruger gamle data.

Browser-cache

Browseren kan fortsætte med at bruge en gammel JavaScriptfil.

<script src="slider.js?v=1"></script>

Efter en ændring kan versionen hæves:

<script src="slider.js?v=2"></script>

Det tvinger browseren til at hente den nye fil.

Faktaboks

PHP: Kører på serveren og bygger siden.

JSON: Gemmer data og indstillinger.

HTML: Bestemmer sidens struktur.

CSS: Bestemmer udseendet.

JavaScript: Styrer funktioner i browseren.

En JavaScriptfejl behøver derfor ikke nødvendigvis ligge i JavaScript. Fejlen kan også skyldes forkert PHP-output, ugyldig JSON, manglende HTML-elementer eller CSS, der skjuler indholdet.

Hurtig fejlfinding

Når en funktion ikke virker, bør man kontrollere følgende:

1. Indeholder JSON de forventede data?
2. Genererer PHP alle nødvendige elementer?
3. Ligger elementerne inde i den rigtige HTML-wrapper?
4. Matcher klassenavnene mellem HTML og JavaScript?
5. Er JavaScriptfilen indlæst uden fejl?
6. Er tidsintervallet et gyldigt tal?
7. Fjernes hidden korrekt?
8. Skjuler CSS det aktive element?
9. Er mapper og JSON-filer skrivbare?
10. Bruger browseren den nyeste JS- og CSS-version?

Et simpelt debug-output kan ofte afsløre problemet:

console.log({
  slider,
  slides: slides.length,
  autoplay,
  interval
});

Hvis slides.length viser 1, selv om der burde være to billeder, ligger fejlen sandsynligvis i HTML- eller PHP-outputtet og ikke i timerfunktionen.

Konklusion

PHP, JSON, HTML og JavaScript har hver sin opgave, men de er afhængige af hinanden. Den mest effektive fejlfinding er derfor at følge dataene hele vejen:

JSON → PHP → HTML → JavaScript → CSS