A JavaScript egy leginkább webes céllal létrehozott interpretált nyelv, amelyet általában arra használnak, hogy interaktív effektusokat hozhassunk létre a böngészőnkben.
Oldalhoz felhasznált tartalom:
https://nzs-prog.blogspot.com/2022/09/javascript.html
Mit tehetünk a JavaScript segítségével?
Mikor a weboldalunkat megnyitjuk a böngészőben, akkor létrejön az úgynevezett DOM (Document Object Model), ami a weboldalunk megjelenő tartalmát reprezentálja: például a képeket, a HTML elemeket, és a CSS kódot.
A JavaScript segítségével lehetőség nyílik arra, hogy ezeket az elemeket manipuláljuk, akár még akkor is, mikor az oldalunk már teljesen betöltött. Lehetőség van a szerverrel való kommunikációra is. A teljesség igénye nélkül néhány a leggyakoribb alkalmazási módokra:
- Animációkat hozzunk létre
- Elemeket tüntessünk el, jelenítsünk meg
- Új tartalmakat töltsünk be az oldalunkra annak újratöltése nélkül
- Különféle űrlapok kitöltési helyességét ellenőrizzük
- Lenyíló menüket kezeljünk
- Különféle szövegmezők automatikus kiegészítését segítsük
Animáció létrehozása:
Sokszor felmerül az igény a késleltetésre pl. egy animáció elkészítéséhez. Ezt egyszerűen meg tudjuk oldani egy setInterval és egy clearInterval függvény használatával. Roppant egyszerű függvények mégis nagyon hasznosak!
A setInterval() egy függvény adott időközönkénti ismételt végrehajtására szolgál. Ezt fel lehet használni pl. egy kép mozgatására oly módon, hogy annak margótól való távolságát folyamatosan változtatjuk.
De nézzük a kódot:
<style>
#spider {
position: relative;
top: -350px;
cursor: pointer;
}
</style>
<img id="spider" src="spider_k.png">
<script>
spider.onclick = function() {
let start = Date.now();
let timer = setInterval(function() {
let timePassed = Date.now() - start;
spider.style.top = (timePassed / 3 )-350 + 'px';
if (timePassed > 1000) clearInterval(timer);
});
}
</script>Első lépésben a spider egyedi azonosítóval ellátott kép pozícióját állítom be, mégpedig úgy, hogy pozícióját az oldalon relatívra állítom. Ezzel a CSS tulajdonsággal relatívan eltolhatom az alapértelmezett pozíciójához képest. A következő sorban ezt meg is teszem, 350 px-lel felfelé.
Muszáj szólnom a képről pár szót. Átlátszó hátterű, 230 x 388 képpontból álló png kiterjesztésű kép. Mivel egy keretben fogom mozgatni, ezért 350 px-lel eltolva felfelé alapból csak annyi fog belőle látszani, hogy még éppen megjelenik a pók alatti felirat.
Ez azért szükséges, hogy rá lehessen kattintani, hiszen ez az esemény fogja elindítani a mozgatását.
Hogy érzékelni lehessen, mikor áll felette az egér, mikor lehet kattintani, a felirat mellett azzal is segítek, hogy az egérkurzort is megváltoztatom nyílról kézre cursor: pointer;.
Megadom a kép id azonosítóját és elérésének helyét. Majd megadom, hogy a képre való kattintáskor, milyen függvény fusson le.
A függvényben először a start változóban letárolom az aktuális időpontot.let start = Date.now();
Majd a már említett setInterval függvényt hívom meg, melyet hozzárendeltem a timer változóhoz. Az eseményt elindító függvény futását egy if feltétellel szabályozm, oly módon, hogy a setInterval függvény addig fog ismétlődni, amíg a timePassed változó értéke kisebb 1000-nél. Vagyis ha pont annyi vagy nagyobb, akkor a clearInterval utasítás kilépteti a függvényből.
A timePassed pillanatnyi értéke folyamatosan nő, mégpedig azt az éppen aktuális idő és az elején letárolt start változóban lévő időpontok különbsége adja.
A kép mozgatása pedig a spider.style.top = (timePassed / 3 )-350 + 'px'; utasítással történik, az egyre nagyobb timePassed érték arányosan egyre nagyobb távolságra állítja be a képet a keret tetejétől.
A “/3” – mal a mozgatás sebességét tudom változtatni, minél nagyobb ez a szám, annál lassaban fog mozogni. A -350px itt is a kezdő pozíció beállítását szolgálja.
Elemeket tüntessünk el, jelenítsünk meg:
Erre létrehoztam egy DIV-et, melynek beállítottam tulajdonságait:
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: #66FF00;
margin-top: 20px;Kitölti a keret méretét, 50px helyet hagy körben a szélétől, középre igazít, zöld háttér és az egésznek felül még 20px margó.
A gombra kattintva javascripttel lekérdezem a “myDIV” egyedi azonosítóval ellátott DIV-em display tulajdonságát. Ha az értéke none, azaz kikapcsolt, akkor bekapcsolom, különben meg kikapcsolom.
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}Új tartalmakat töltsünk be az oldalunkra annak újratöltése nélkül:
Alább, a gombra kattintva kirajzolok egy táblázatot, melynek tartalma egy 2D JavaScript tömbben van dekralálva. Tehát ezen oldal betöltődésekor a táblázat nem létezik, annak vázát és tartalmáz is Javascripttel lesz megjelenítve.
Működése:
1. először a Táblázat készítése gombra kell kattintani!
2. ekkor kiírja a táblázatot sorról sorra, az adatokat egy 2 dimenziós tömbváltózóból véve.
3. Lehetőség van új sort hozzáadni, vagy az utolsó sort törölni.
4. Új sor hozzáadásakor megjelenik 3 beviteli mező (különben nem tudnánk beleírni). Ha megadtuk az adat(ok)at, Entert nyomva hozzáadja azokat a tömbhöz. Törli a táblázatoz és újra kiírja, ezúttal már a hozzáadott adatokkal. Természetesen ezek csak a következő oldalfrissítésig lesznek meg, akkor visszaáll az eredeti táblázat az eredeti tömbbadatokkal.
Ahhoz hogy ez meg is maradjon, el legyen mentve, ahhoz valamiféle adatbázisba szsükséges elmenteni.
De itt mmost nem ez a feladat.
Ide kattintva egy hasonló táblázattal lehet játszadozni, itt bármelyik sort lehet törölni.
Következő példában egy txt fájl tartalmát íratom ki:
Különféle űrlapok kitöltési helyességét ellenőrizzük:
A következő űrlapon lévő mezők ellenőrzésénél a következőket ellenőriztem javascripttel:
Csak érvényes e-mail címet fogad el.
Telefonszám csak 0 és 9 közötti számjegyeket tartalmazhat, a számjegy karakterek hossza minimum 10 és maximum 12 lehet.
A Név mező nem tartalmazhat számokat.
A jelszónak legalább 6 karakter hosszúnak kell lennie.
Lenyíló menüket kezeljünk:
Sokat nem kell ragozni, három fő részből áll, egy html kód, egy stílus kód (css) és egy javascript kód.
Különféle szövegmezők automatikus kiegészítését segítsük:
A JavaScript automatikus kiegészítési funkciója releváns javaslatokat ad, amikor valaki elkezd gépelni a szövegmezőbe. Erre található alább egy példa, a világ összes országát tartalmazó tömbből automatikusan megjeleníti az beírt betűnek megfelelő, azzal kezdődő országnevek listáját, ha még egy karaktert beviszünk, akkor még pontosabb találatot ad és így tovább.