# JavaScript hozzáadása az oldal frontendjéhez

> Négy mód arra, hogyan futtathatsz saját JavaScriptet az űrlapokkal együtt, és mire figyelj a függőségeknél és a betöltésnél.

A frontenden megjelenő űrlapokkal együttműködő JavaScriptet többféleképpen is hozzáadhatsz az oldalhoz. Bármelyik módot választod, a kódot általában a `DOMContentLoaded` eseményre kötött függvénybe írd.

Figyelj arra, hogy a téma cseréje vagy frissítése felülírhatja a téma mappáját, így az ott végzett módosításaid elvesznek. Készíts rendszeres mentést, és használj gyermektémát.

## 1. mód: `wp_print_footer_scripts`

Ha a PHP-kódot harmadik féltől származó bővítménnyel (kódrészlet-kezelővel) adod hozzá, a legegyszerűbb a `wp_print_footer_scripts` WordPress-akció használata. Egyes témák `init.js` vagy `custom.js` fájlt is adnak, oda is beteheted a kódot.

```php
add_action( 'wp_print_footer_scripts', function() { ?>
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function () {
            // saját kód
        });
    </script>
<?php } );
```

## 2. mód: HTML-mező

Ha a JavaScriptet csak egyetlen űrlaphoz akarod futtatni, beleírhatod közvetlenül az űrlap egy **HTML** mezőjébe. Ennek az az előnye, hogy a kód az űrlap exportjával együtt elkíséri az űrlapot.

```html
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
        // saját kód
    });
</script>
```

## 3. mód: harmadik féltől származó bővítmény

Külső bővítmények és témaeszközök is futtathatnak extra JavaScriptet az űrlap mellett. Ilyen például a Code Chest nevű ingyenes bővítmény, amely az űrlaphoz tartozó JavaScriptet és CSS-t pontosan oda tölti be, ahol kell. Ezeknél az eszközöknél sokszor nincs szükség a `<script>` blokkra, elég a függvény:

```javascript
document.addEventListener('DOMContentLoaded', function () {
    // saját kód
});
```

A harmadik féltől származó megoldásokat a Gravity Forms nem vizsgálja és nem támogatja: te felelsz azért, hogy megfelelnek-e a funkcionális, biztonsági, jogi és költségigényeidnek.

## 4. mód: a GFAddOn keretrendszer

Saját kiegészítő írásakor a keretrendszer lehetővé teszi a szkriptek és stílusok betöltését. A betöltés feltételét a `field_types` tulajdonság szerint is megadhatod, vagyis csak akkor töltődik be, ha az űrlapon van ilyen típusú mező. A keretrendszer a függőségek tömbjét is fogadja.

## Különleges szempontok

### Függőségek

Gondoskodj róla, hogy a kódod előtt betöltődjenek azok a szkriptek, amelyekre épít. A 4. módszer paraméterében megadhatod azoknak a szkripteknek az azonosítóját, amelyeknek előbb kell betöltődniük.

A Gravity Forms frontend-szkriptjeitől függő kódot a `gform/theme/scripts_loaded` esemény hatására indítsd. Így biztos, hogy a többi Gravity Forms szkript már elérhető, és a kódod látja a JavaScript `gform` objektumot.

### Feltételes betöltés

Érdemes a szkriptet csak azokon az oldalakon betölteni, ahol szükség van rá. Betöltés előtt ellenőrizd, melyik oldalt töltik éppen.