# Programozás JavaScript nyelven
Tartalomjegyzék
- # Programozás JavaScript nyelven
- Tartalomjegyzék
- Források
- Miért nem tölt be a js/css?
- Strict mód
- Alert
- Prompt
- Explicit és implicit
- Adattípusok(primitívek)
- VS Code debug
- If - elágazások
- Switch szerkezet
- JavaScript operátorok – összefoglaló cheat sheet
- Primitívek, referenciák, objektumok
- Ciklusok (Loop)
- Feladatok
- Memória túlcsordulás HD (StackOverflow)
- Inkrementálás
- Metódusok
- Math.
- document.write()
- OOP
- Időzítő beállítása
- Html és js összekötése
- Összefoglaló
- Hibák
- Modern JS és lambda (arrow function) verzió
- Cheat Sheet
- DOM manipuláció
- style
- querySelectorAll
- innerHTML vs textContent vs innerText
- HTML DOM API Képességek és Alapok
- JavaScript DOM Manipuláció Puska
- localStorage
- LOCALSTORAGE ÖSSZEFOGLALÓ
- Teszt adatok generálása és gyors teszt
- Haladóbb (toggle)
Források
https://sanfranciscoboljottem.com
https://www.youtube.com/playlist?list=PLyriihBWoulwgaKMNF6M20iD0c6iDtu0S
https://www.youtube.com/watch?v=BUFagBZZafo&list=PLg7lel5LdVjyO7jk-4biyr0fqPVygTLOk&index=5
https://www.codedex.io/home
https://www.freecodecamp.org/learn/javascript-v9/lecture-working-with-the-dom-click-events-and-web-apis/how-do-you-create-new-nodes-using-innerhtml-and-createelement
https://www.udemy.com/course/the-complete-javascript-course/
100+ Web Development Things you Should Know
Miért nem tölt be a js/css?
Futtatáskor nyomd mega böngészőben az F12-t. -> Sources -> Page -> Csekkold le, hogy ott vannak-e a css/js fájlok.
Strict mód
"use strict";
/* Strict mode segít:
hibákat korábban észrevenni tisztább, biztonságosabb kódot írni elkerülni rejtett bugokat */
Alert
alert("Itt írtam a kódot: https://jsfiddle.net/");
//clg -> console log hotkey
Prompt
//A prompt a felugró ablak. A "name" egy címke, a "Bobby" egy input mező.
var name = window.prompt("What's your name?", "Bobby");
window.alert("Hello " + name + "!");
console.log("hello " + n)
Console
console.log("Hello, World!"); console.error("This is an error message."); console.warn("This is a warning message."); console.table([{name: "Amit", age: 30}, {name: "Jatin", age: 25}]);
Továbbiak itt találhatóak.
Explicit és implicit
Kötőjelet nem lehet írni a js-ben a változó nevébe.
Explicit érték adás. Ez explicit, mert az értékadás külön történik a deklarációtól.
var a;
a = 1;
Implicit érték adás. Ez implicit, mert az értékadás „bele van foglalva” a deklarációba.
var b = 2;
//alert(a + b);
Adattípusok(primitívek)
8 db van.
Típus Leírás
String (Karakterlánc), Időzőjelek közé zárt szöveges karakterek sorozata.
Number (Szám) Matematikai értéket képviselő szám (egész vagy tizedes).
BigInt "Olyan szám, amely a normál szám típusnál nagyobb egész értékeket képvisel."
Boolean (Logikai) "Logikai érték, amely vagy true (igaz), vagy false (hamis) lehet."
Object (Objektum) Adatok kulcs-érték párjainak gyűjteménye.
Undefined "Olyan primitív változó, amelyhez még nem rendeltek értéket."
Null "Primitív érték, amely egy objektum hiányát jelzi."
Symbol (Szimbólum),Egyedi és megváltoztathatatlan primitív azonosító.
Néhány fontos megjegyzés:
Primitív típusok: A fenti listából hét (String, Number, BigInt, Boolean, Undefined, Null, Symbol) primitív típus, ami azt jelenti, hogy egyszerre csak egy értéket tárolnak és megváltoztathatatlanok. Amikor azt mondjuk, hogy a primitív típusok (mint a String vagy a Number) megváltoztathatatlanok (immutable), az nem azt jelenti, hogy a változó értékét nem írhatod felül, hanem azt, hogy magát az értéket a memóriában nem tudod módosítani.
Összetett típus: Az Object az egyetlen összetett típus, ide tartoznak a tömbök (Arrays) és a függvények (Functions) is a JavaScriptben.
var c = 3; //number
var d = 3.5; //float
var a = "Hello"; // dupla idézőjel
var b = "Hello"; // szimpla idézőjel
A backtick (`) speciális, mert enged változóbeillesztést és többsoros szöveget
let name = "Andrea";
var c = `Hello`; // backtick (templateliterál)
const a =2;
let message = `Hello, ${name}!`; // → "Hello, Andrea!"
var g = true; //boolean
var i = null; //null
var j; //undefined
let vs var vs const
A “var” simán újra definiálható, ezért inkább nem használják. A “let” nem definiálható újra, ugyanabban a hatókörben. A "const"-nak csak egyszer lehet értéket adni, olyanmint a javaban a final típusú változó.
//for ciklus:
for (var j=0; j<10; j++){
console.log(j);
}
for (let i=0; i<10; i++){
console.log(i);
}
console.log(i);//Hibaüzenetet kapunk, mert a let-el deklarált változó, csak a scope-n belül létezik.
VS Code debug
Itt találod az útmutatót a telepítéshez.
Futtatáskor a Chromeban F12-t nyomj a devtool eléréséhez és a console részre te is tudsz írni, pl új változót is deklarálhatsz.
If - elágazások
var ageOfGyula = 17;
//== összehasonlító operátor
// felkiáltójel= nem egyenlő operátor
if (ageOfGyula == 17) {
//alert("Majdnem nagykorú.");
} else if (ageOfGyula < 18) {
//alert("Gyula még kiskorú.");
} else {
//alert("Gyula már nagykorú.");
}
const a=1;
a=2; //Error, csak egyszer lehet értéket adni a const változónak.
Switch szerkezet
var r = "Rudi4";
switch (r) {
case "Rudi":
//alert("Rudi egy kutya.");
break;
case "Mici":
// alert("Mici egy macska.");
break;
default:
//alert("Nem kutya, sem macska.");
}
== (egyenlőség, laza összehasonlítás) Automatikus típusátalakítást végez. Ha a két érték nem ugyanaz a típus, JavaScript megpróbáljaátkonvertálni őket, hogy össze tudja hasonlítani. Ezért néha váratlan eredményt ad.
=== (szigorú egyenlőség) Nem végez típusátalakítást. Csak akkor ad true-t, ha érték és adattípus is megegyezik.
switch (ageOfGyula) {
case ageOfGyula === 17:
// alert("Majdnem nagykorú.");
break;
case ageOfGyula > 18:
//alert("Gyula már nagykorú.");
break;
default:
//alert("Gyula még kiskorú.");
}
```javasript
# Tömbök
```javascript
var fruits = ["grape", "apple", "banana"];
alert(fruits[0]); //első elem kiíratása
var a = [];
a.push(1, 2, 3, 4, 5); //hozzáadjuk az elemeket.
console.log(a); //Kiírja az elemeit. output: (5) [1, 2, 3, 4, 5]
JavaScript operátorok – összefoglaló cheat sheet
========================
ARITMETIKAI OPERÁTOROK
========================
+ # összeadás
- # kivonás
* # szorzás
/ # osztás
% # maradék (modulus)
** # hatványozás
========================
ÖSSZEHASONLÍTÓ OPERÁTOROK
========================
== # egyenlő (típus konverzióval)
=== # szigorúan egyenlő (érték + típus)
!= # nem egyenlő (típus konverzióval)
!== # szigorúan nem egyenlő
> # nagyobb
< # kisebb
>= # nagyobb vagy egyenlő
<= # kisebb vagy egyenlő
========================
LOGIKAI OPERÁTOROK
========================
&& # ÉS (AND)
|| # VAGY (OR)
! # NEM (NOT)
========================
ÉRTÉKADÓ OPERÁTOROK
========================
= # értékadás
+= # hozzáadás és értékadás
-= # kivonás és értékadás
*= # szorzás és értékadás
/= # osztás és értékadás
%= # maradék és értékadás
**= # hatványozás és értékadás
========================
INKREMENT / DEKREMENT
========================
++ # növelés 1-gyel
-- # csökkentés 1-gyel
========================
TÍPUS OPERÁTOROK
========================
typeof # típust ad vissza
instanceof # objektum típust ellenőriz
========================
HÁRMAS (TERNARY) OPERÁTOR
========================
feltétel ? érték1 : érték2
Példa:
let x = 10;
let result = x > 5 ? "nagy" : "kicsi";
========================
NULLISH COALESCING
========================
?? # ha null vagy undefined → másik érték
Példa:
let a = null ?? "default"; // "default"
========================
OPTIONAL CHAINING
========================
?. # biztonságos hozzáférés
Példa:
user?.name # nem dob hibát, ha user nincs
========================
BITWISE OPERÁTOROK
========================
& # AND
| # OR
^ # XOR
~ # NOT
<< # balra shift
>> # jobbra shift
>>> # jobbra shift (unsigned)
========================
STRING OPERÁTOR
========================
+ # string összefűzés
Példa:
"Hello" + " World"
Tömb műveletek
sort
var fruits = ["grape", "apple", "banana"];
fruits.sort(); //rendezés
A JavaScript sort() alapértelmezetten nem számként, hanem szövegként (stringként) rendez.
var a=[1, 2, 3, 4, 5,55,9,63,22];
a.sort(); //output: (9) [1, 2, 22, 3, 4, 5, 55, 63, 9]
a.sort((x, y) => x - y); //output: (9) [1, 2, 3, 4, 5, 9, 22, 55, 63]
Vagy:
var a=[1, 2, 3, 4, 5,55,9,63,22];
// callbacks
function asc(a,b) {
return a-b;
}
a.sort(asc);
Látványos példa a magyarázatra:
var a=[1, 2, 3, 4, 5, 55, 9, 63, 22];
a.sort((x, y) => {
console.log(`${x} - ${y} = ${x-y}`); //Mindegyik értéket összehasonlítja mindegyik értékkel.
return x - y;
});
console.log(a);
pop/push/shift
var x= a.pop(); //Kiszedi a legutolsó elemet és elmenti a változóba. output: undefined
x; //output: 5
a; //output: (4) [1, 2, 3, 4]
Lehet a konzolon is lekérni a változókat például, vagy újat magadni.
var a = [1, 2, 3];
var b = [];
b.push(4, 5, 6);
var c = a.concat(b); //Egybe fűzés. output: (6) [1, 2, 3, 4, 5, 6]
console.log(c);
console.log(c.slice(1, 3)); //output: (2)[(2, 3)];
c.shift() //Kiszedi az első elemet. output: (5) [2, 3, 4, 5, 6]
Primitívek, referenciák, objektumok
var lista1 = ["alma", "körte", "makszem"];
var lista2 = ["alma", "körte", "makszem"];
Objektumok=Összetett adattípusok, nem egyszerű számok, vagy szövegek.
alert(lista1 == lista2);
false, mert két különböző objektumra mutatnak, különböző helyen vannak tárolva a memóriában. A == objektumok esetén referenciát hasonlít, nem tartalmat.
alert(lista1 === lista2);
false, mert két különböző objektumra mutatnak, különböző helyen vannak tárolva a memóriában. Típust is ellenőriz ÉS objektumoknál szintén csak a referenciát hasonlítja.
var lista1 = ["alma", "körte", "makszem"];
var lista2 = lista1;
alert(lista1 === lista2); // true
A fenti példában ugyanarra az objektumra mutatnak.
Objektumok
var myobj= new Object();
myobj.name='Steve';
myobj; //output: 'Steve'
// A böngészőben van egy JS objektumom (objects):
//Adatcserére jó.
var person = {
name: "bobby",
age: 42,
email: "bobbyc@sfu.ca",
address: {
number: "123",
street: "fake st",
},
speak: function (words) {
//Metódus.
console.log(words);
},
};
person.speak("hello"); //output: hello
Ciklusok (Loop)
While
var a = 0;
while (a < 6) {
alert("A értéke kisebb, mint 6, mert a= " + a);
a = a + 1;
}
alert("Kiléptünk a ciklusból, mert A értéke: " + a);
Egy soros ciklus
Egysoros ciklusnál nincs kapcsos zárójel, de csak egy utasítás tartozik a ciklushoz.
var a = 0;
while (a < 6)
a = a + 1;
Do-while
Egyszer mindenképpen le fog futni.
var a = 0;
do {
alert("a= "+a);
a++;
} while (a == 0);
For ciklus
Kiíratjuk a tömb elemeit.
for (i = 0; i < fruits.length; i++) {
alert(fruits[i]);
}
Feladatok
- feladat – Életkor ellenőrzés
A prompt stringet ad vissza, ezért Number()-ral számmá kell alakítani.
var age = Number(prompt("Kérlek, add meg az életkorodat:"));
if (age < 14) {
alert("Gyerek");
} else if (age >= 14 && age <= 17) {
alert("Tizenéves");
} else {
alert("Felnőtt");
}
String()-el meg szöveggé lehet konvertálni.
Boolean(10>9); //true
- feladat – Gyümölcs kereső 🍎
//Van egy tömb:
var fruits = ["alma", "körte", "banán", "narancs"];
A program: Kérjen be egy gyümölcsnevet (prompt-tal). Ha a megadott gyümölcs benne van a tömbben → alert("Van ilyen gyümölcs!") Ha nincs benne → alert("Nincs ilyen gyümölcs!")
Használhatsz:
fruits.includes(keresettGyumolcs)
var fruits = ["alma", "körte", "banán", "narancs"];
var valasztottertek = prompt("Válasz egy gyümölcsöt:").toLowerCase();
if (fruits.includes(valasztottertek)) {
alert("Van ilyen gyümölcs.");
} else {
alert("Nincs ilyen gyümölcs.");
}
- feladat – Számláló ciklus _🔁
Írj egy while ciklust, ami: 0-tól indul, minden lépésben kiírja a számot (alert vagy console.log), és 5-ig számol. De ha a szám 3, akkor írja ki: "Ez a kedvenc számom!"
var number = 0;
while (number <= 5) {
alert(`A szám: ${number}`);
/*=== (szigorú egyenlőség)
Nem végez típusátalakítást.
Csak akkor ad true-t, ha érték és adattípus is megegyezik.*/
if (number === 3) {
alert("Ez a kedvenc számom.");
}
number++;
}
Memória túlcsordulás HD (StackOverflow)
Ez egy végtelen ciklus, ami sosem áll meg. Egy idő után elfogy a rendelkezésünkre álló memória, vagyis túlcsordulunk a memóriából. -> StackOverflow
var fruits = ["banana", "grape", "apple"];
while (a == 0) {
var b = "onodnfvnfdkvnkfjd";
}
Inkrementálás
JavaScript inkrementálás (++) működésének klasszikus példája, és valóban nem minden nyelv kezeli ugyanúgy.
Post-increment (a++) → előbb használja az értéket, majd növeli
Pre-increment (++a) → előbb növeli, majd használja az értéket
var a = 0;
// post-increment
var c = a++; //Az érték átadás után növeltük az értéket.
alert(c + " " + a); //output: 0 1
// pre-increment
c = ++a; //Először növeljük az értéket és utána adjuk át.
alert(c); //output: 2
Metódusok
DOM Element Properties and Methods
function house() {
alert("Itt lakom látod, ez az a ház!");
}
function house2(package) {
alert(package);
}
//Meghívjuk a metódust.
house();
house2("Szevasz! Bent vagyok a házban!");
var myfunc2 = function(){
console.log('hello world 2');
}
myfunk2;
Hacsak egy argumentumot adunk át, és az is már összeadott érték (68 + 96 = 164). Ezért a függvényben a = 164 lesz, és b = undefined.
A JavaScriptben az undefined + szám → NaN (Not a Number), tehát az alert NaN-t fog mutatni.
function sum(a, b) {
alert(a + b);
}
sum(68 + 96);
Helyes megoldás:
function sum(a, b) {
alert(a + b);
}
sum(3, 5);
Math.
//Minimum: 0 (előfordulhat)
//Maximum: 0.999999... (de 1 sosem lesz)
Math.random();
const number = Math.trunc(Math.random()*20)+1; // 1-20 közötti szám kreálása.
//A +1 azért kell, hogy lehessen 20 is az eredmény.
Van még egy pár metódusa a Math osztálynak.
document.write()
Csak a html body-ban tud le futni.
<script>
document.open();
document.write("<h1>Hello World</h1>");
document.writeln("Hello World!");
document.close();
</script>
<button onclick="myFunction()">Open</button>
<script>
function myFunction() {
const myWindow = window.open();
myWindow.document.write("<h1>New Window</h1>");
myWindow.document.write("<p>Hello World!</p>");
}
</script>
<button onclick="window.print()">Print this page.</button>
OOP
class Felhasznalo {
// 1. Mezők (Property-k) deklarálása (opcionális, de tiszta)
szerep = 'tag';
#jelszo; // Privát mező (kívülről nem elérhető)
// 2. Konstruktor: ez fut le példányosításkor (new Felhasznalo)
constructor(nev, kor, jelszo) {
this.nev = nev; // Nyilvános tulajdonság
this.kor = kor;
this.#jelszo = jelszo;
}
// 3. Metódus (függvény az osztályon belül)
koszon() {
console.log(`Szia, a nevem ${this.nev}, és ${this.kor} éves vagyok.`);
}
// 4. Getter és Setter (kontrollált hozzáférés)
get profilInfo() {
return `${this.nev} (${this.szerep})`;
}
set eletkorFrissites(ujKor) {
if (ujKor > 0) {
this.kor = ujKor;
}
}
// 5. Statikus metódus (az osztályhoz tartozik, nem a példányhoz)
static leiras() {
console.log("Ez egy Felhasználó osztály sablon.");
}
}
// HASZNÁLAT:
const adam = new Felhasznalo('Ádám', 28, 'titok123');
adam.koszon(); // "Szia, a nevem Ádám..."
console.log(adam.profilInfo); // "Ádám (tag)"
Felhasznalo.leiras(); // Osztály szintű hívás
Időzítő beállítása
var i = 0;
//inter-ban eltároljuk az időazonosítóját.
var inter = window.setInterval(function(){
console.log(i); //Kiíratás.
i++; //Szám növelése.
},1000) //1000 milliszekundum = 1 másodperc, vagyis minden másodpercben lefut.
A setInterval() futtatja a kódot ismételten bizonyos időközönként. 1-1000-ig kiírja a számokat.
Ez a callback függvény:
function(){
console.log(i);
i++;
}
Ezzel lehet megállítani:
clearInterval(inter);
Modern módszer:
setInterval(() => console.log("hello"), 1000);
//A hello előtt megjelenik egy szám és az növekszik másodpercenként.
Html és js összekötése
A html kódba ezt írd bele, rakhatod a head, vagy a body-ba is.
<!--defer: A script csak akkor fut le, amikor a HTML teljesen betöltődött.-->
<script src="script.js" defer></script>
Egy komponens id-jára, így kell hivatkozni:
document.getElementById("fname");
var t=document.getElementById("fname");
t.value; //output: ''
//Beírom az input mezőbe azt, hogy Bobby.
t.value; //output: 'Bobby'
Egy komponens value-ra való hivatkozás:
//A html-ben van egy gomb, aminek a value-ja SuBmit.
var c=document.querySelector('input[value="SuBmit"]');
c.value; //'SuBmit'
c.value='SEND', //'SEND'
//Elem szövegét módosítjuk. pl.: div,p , span
document.querySelector(".number").textContent = 13;
//Szám beállítása az input mezőben. ez lehet input, vagy textarea
document.querySelector(".guess").value = 23;
Típus csekkolás
// 1. Az elem szövegként jön ki (string)
let a = document.querySelector(".number").textContent;
typeof a; // "string"
// 2. Átalakítás számmá
a = Number(a);
typeof a; // "number"
A táblázat összes cellájára való hivatkozás:
var td =document.getElementsByTagName("td");
td[0]; // → első td , maga az HTML elem, output: <td>1</td>
td[0].innerHTML;
//→ az elem belsejében lévő tartalom (szöveg vagy HTML)
//output: 1
Billentyű lenyomás eseményfigyelő:
Figyeli, hogy a felhasználó lenyomott-e a billentyűzeten egy gombot, azt is nézi, ha nem egy input mezőben nyomott meg valamit.
addEventListener mindig függvényt vár, nem a függvény azonnali meghívását.
window.addEventListener('keypress',processKey);
function processKey(evt){
console.log(evt);
}
//output: KeyboardEvent {isTrusted: true, key: 'f', code: 'KeyF', location: 0, ctrlKey: false, …}
Ezzel, csak a betűket írjuk ki:
window.addEventListener('keypress',processKey);
function processKey(evt){
console.log (evt.key);
}
//output: f
Click eseményhez:
var button=document.querySelector('input[value="SuBmit"]');
button.addEventListener('click',kattintas);
function kattintas(){
console.log("Kattintottal.");
}
Arrow függvény click eseményhez:
window.addEventListener('click', () => {
console.log("Kattintottál.");
}); //Csak akkor fut, amikor valóban kattintanak az ablakban.
Még rövidebb arrow függvény:
addEventListener('click', () => console.log("kattintas"));
Ezzel nem fog csinálni semmit az oldal, ha rákattintok a gombra:
var button=document.querySelector('input[value="SuBmit"]');
button.addEventListener('click',function(evt){
evt.preventDefault()
});
A class-on belül meg lehet adni alosztályt, ha van:
// <button class="btn check">Check!</button>
//A btn class-on belül a check gombot kérjük le.
document.querySelector(".check").addEventListener();
Összefoglaló
-
A DOM (Document Object Model) A böngésző a HTML dokumentumot egy "fa struktúraként" értelmezi, amit DOM-nak hívunk. A JavaScript segítségével hozzáférhetünk ezekhez az elemekhez (ágakhoz), és módosíthatjuk őket.
-
Elemek kiválasztása Megtanulhatod, hogyan "találd meg" a HTML elemeket a kódban, például:
document.getElementById("azonosito"); // id-ra hivatkozunk.
document.querySelector("body"); // tag, amiből tuti egy darab van.
document.querySelector("#azonosito"); // id-ra hivatkozunk.
document.querySelector(".osztaly-nev"); // class-ra hivatkozunk.
- Eseménykezelés (Event Listeners) Ez a webes interaktivitás lelke. A JavaScript képes "figyelni" a felhasználó mozdulatait, például:
- Kattintás (click)
- Billentyűleütés (keydown)
- Egér mozgatása (mouseover)
Példa egy gombnyomás kezelésére:
const gomb = document.querySelector('button');
gomb.addEventListener('click', () => {
alert('Megnyomtad a gombot!');
});
- HTML/CSS dinamikus módosítása A JavaScripttel nemcsak a szöveget cserélhetjük ki az oldalon, hanem stílusokat is módosíthatunk (pl. egy gomb színe megváltozik, ha rákattintanak), vagy új elemeket hozhatunk létre és törölhetünk.
Hibák
A programozás során elkerülhetetlen, hogy hibákba fussunk, ezért kulcsfontosságú megérteni, miért történnek, és hogyan javíthatjuk ki őket.
Íme egy összefoglaló a JavaScript leggyakoribb hibaüzeneteiről és a hibakezelési technikákról:
Leggyakoribb hibatípusok
SyntaxError (Szintaktikai hiba): Akkor fordul elő, ha a kód nem felel meg a nyelv nyelvtani szabályainak (pl. hiányzó zárójel, idézőjel vagy vessző). A JavaScript értelmezője ilyenkor el sem tudja indítani a futtatást.
Példa: console.log("Hello"; (hiányzik a bezáró zárójel).
ReferenceError (Referencia hiba): Akkor jelentkezik, ha egy olyan változóra vagy függvényre hivatkozunk, amely nem létezik, vagy nincs definiálva az adott hatókörben (scope).
Példa: console.log(x); (ha x korábban nem lett deklarálva).
TypeError (Típus hiba): Akkor kapjuk, ha egy műveletet nem megfelelő típusú adaton próbálunk elvégezni. Például olyan értéket próbálunk függvényként meghívni, ami nem az, vagy egy null érték tulajdonságát akarjuk elérni.
Példa: let num = 5; num.toUpperCase(); (a számoknak nincs ilyen metódusa).
RangeError (Tartomány hiba): Akkor fordul elő, ha egy érték kívül esik a megengedett tartományon.
Példa: Egy tömbnek negatív hosszt próbálunk megadni.
Hibakezelés (Error Handling)
A JavaScript biztosítja a try...catch szerkezetet, amellyel "elkaphatjuk" a futásidejű hibákat, így megakadályozhatjuk, hogy az egész program összeomoljon.
try blokk: Itt helyezzük el azt a kódot, amely potenciálisan hibát dobhat.
catch blokk: Ha a try blokkban hiba történik, a futtatás ide ugrik át. Itt kezelhetjük a hibát (pl. hibaüzenet kiírása).
finally blokk: Ez a rész mindenképpen lefut, függetlenül attól, hogy történt-e hiba vagy sem. Gyakran használják erőforrások felszabadítására vagy takarításra.
throw kulcsszó: Segítségével mi magunk is létrehozhatunk és "dobhatunk" egyedi hibákat, ha egy bizonyos feltétel nem teljesül.
Miért fontos ez? A hibák megértése segít a hibakeresésben (debugging). Ahelyett, hogy találgatnánk, a hibaüzenet pontosan megmondja:
- Mi a hiba típusa.
- Hol történt (fájl és sor száma).
- Hogyan háríthatjuk el.
Modern JS és lambda (arrow function) verzió
document.addEventListener("DOMContentLoaded", () => {
//HTML-ben a button id=gomb
const gomb = document.getElementById("gomb");
gomb.addEventListener("click", () => {
alert("Rákattintottál!");
});
});
DE!!! Nem kötelező a fenti, ha a html-ben a