JavaScript bevezetés

1. Kockadobást szimuláló program készítése.

Bemenet: 6 fáziskép egy dobókockáról. Felhasználhatók Juhász Tibor-Kiss Zsolt: Programozási ismeretek (MK-4462-3) tankönyv digitális mellékletének képei, ám az alábbi képek letöltésének sincs akadálya:

Kimenet: Az előállított véletlen értéket ábrázoló kép.

Változók: Random szám 1 és 6 között, String típusú tömb 6 elemmel

Algoritmus: Feltöltjük az imgsrc tömböt a képek nevével, majd az előállított véletlenszám segítségével kiválasztjuk azt a tömbelemet, amellyel a HTML dokumentumban megjelenített kép lecserélhető. A sikeres megoldáshoz a DOM modell felépítését kell megismernünk.

Eseménykezelés: Az onclick esemény bekövetkezésekor végrehajtandó utasításokat a changeImage() függvényben rögzítjük.

Az alábbiakban rendszerezzük a megoldáshoz szükséges ismereteket. A platformfüggetlen megoldás elkészítéséhez gyakorlatilag egy böngésző programra, és esetleg egy egyszerűbb editorra van szükség. A lecke mintaprogramjai a böngészőben kipróbálhatók és módosíthatók a forráskód alatti "Próbáld ki! »" gombra kattintás után. Alea iacta est.

Hogyan épül fel egy HTML dokumentum?

Elöszőr gondoljuk át a programozási környezet jellemzőit. A böngészők HTML kódokat jelenítenek meg. A HTML nyelvet azonban még nem tekintjük programnyelvnek, mert csupán a tartalmi elemek megjelenítéséhez szükséges információkat írja le. Vizsgáljuk meg HTML dokumentum szerkezetét. Mindig <html> és a </html> tagek (HTML utasítások) között találhatók a tartalmi elemek. A <head> és a </head> között a dokumentum meta (leíró) információi szerepelnek. Az itt található adatok nem jelennek meg a böngészőben, mivel a dokumentum tulajdonságairól adnak információt a böngészőnek és a robotoknak. A dokumentum tartalmi része a <body> és a </body> tagek között található. Egy HTML dokumentumban szöveg, kép, hang és mozgókép jeleníthető meg. Készítéséhez használhatunk egyszerűbb texteditort (pl. notepad, notepad++), vagy HTML fejlesztő programot (pl. Adobe Dreamweaver, CoffeeCup).

Beküldhető feladatok:

A fenti minta tanulmányozása után készítsetek egy bemutatkozó HTML dokumentumot, amelyben megjelenik a csapat neve, az iskolájának neve és címe, a csapattagok kedvenc időtöltésének listája, az iskola weblapjának linkje és egy kép a csapatról.
1000|₂ pont
Készítsetek HTML dokumentumot a feladatok megoldása során feltárt hasznos linkek tematikus áttekintéséhez.
100|₂ pont

A HTML oldalon a <form> és a </form> tagek által közrefogott űrlapról tudunk adatokat beolvasni. Az adatok bekérésének leggyakrabban használt utasítása az <input> tag.

<Experts only!>
Pusztán az ügyfél-kiszolgáló architektúra megértésének kedvéért, szánjunk pár percet a szerver oldali adatfeldolgozást végző PHP kód áttekintésére is. Figyeljük meg, hogy az űrlap <form> tagja rendelkezik egy action attributummal, amelyben megadhatjuk, hogy milyen kódot hajtson végre a szerver az "Elküld" gomb lenyomását követően. Az űrlapmezők adatait a $_POST tömbben fogadja a szerver.

<!DOCTYPE html>
<html>

<head>
 <title>Haladóknak - Űrlapfeldolgozás</title>
 <meta charset="UTF-8">
</head>

<body>

<?php
  print "<h1>A szerver az alábbi adatokat kapta:</h1>";
  print var_dump($_POST);
  print "<hr />";
  print "<h1>Kiszolgáló információk:</h1>";
  print "IP cím: ".$_SERVER['SERVER_ADDR']."<br />";
  print "Név: ".$_SERVER['SERVER_NAME']."<br />";
  print "Szoftver: ".$_SERVER['SERVER_SOFTWARE']."<br />";
  print "<hr />";
  print "<h1>Ügyfél információk:</h1>";
  print "IP cím: ".getenv('REMOTE_ADDR')."<br />" ;
  print "Név: ".gethostbyaddr($_SERVER['REMOTE_ADDR'])."<br />";
  print "Szoftver: ".$_SERVER['HTTP_USER_AGENT']."<br />";
  print "<br />Hivatkozás: ".$_SERVER['HTTP_REFERER']."<br />";
?>

</body>
</html>

A fenti kód a szerveren fut, a böngésző csak a futtatás eredményét kapja vissza. Ugye észrevetted, hogy itt a <?php és ?> jelölések között jelentek meg a PHP utasítások. Ha szeretnéd kipróbáni a szerver oldali programozást, akkor telepíts a számítógépedre egy WAMP szervert vagy regisztrálj egy ingyenes webtárhelyet, ám a JavaScript programozáshoz erre egyenlőre nem lesz szükséged.
</Experts only!>

« Előző | Lap eleje

JavaScript utasítások a HTML dokumentumban

Ha a HTML kódban számításokat akarunk végezni, vagy néhány feltétel teljesülését szeretnénk megvizsgálni, vagy esetleg utasításokat többször végrahajtani, akkor bizony adat- és vezérlőszerkezetekre lesz szükségünk. Nos, a HTML ezen hiányosságát pótolhatjuk például JavaScript kódok beágyazásával. Ilyenkor a <script> és a </script> tagek közé írjuk a JavaScript utasításokat, melyeket a böngésző program fog értelmezni és végrehajtani.

Beküldhető feladatok:

Hogyan lehetne kiíratni az évet, hónapot és napot önálló sorokban?
10|₂ pont
Írassátok ki a csapatneveteket és az iskolátok honlapjának linkjét script-ben!
10|₂ pont

« Előző | Lap eleje

JavaScript változók használata

A változót névvel azonosított memóriaterületnek tekintjük, különböző értékek tárolásának illetve feldolgozásának az eszköze. A változókat a var kulcsszó után deklaráljuk. Értékadó kifejezésekben az egyenlőségjel bal oldalán álló változó veszi fel a jobb oldalon álló kifejezés értékét. A kifejezések kiértékelését a JavaScript értelmező végzi el. Az eredmény a kifejezésben használt változók és a kijelölt műveletek jellegétől függően leggyakrabban szám, szöveg vagy logikai típusú.

Ha megegyező típusú adatok sorozatát szeretnénk feldolgozni (pl. osztályzatok, hőmérséklet, bevételek, kiadások), akkor tömbösíthetünk, vagyis egy közös azonosítóval hivatkozhatunk az adatsorozatra, miközben annak elemeit sorszámmal jelöljük. Tömb deklarálása az Array() kulcsszóval történik.

Billentyűzetről a legegyszerűbben a prompt() metódussal kérhetünk be adatot:

Beküldhető feladatok:

Olvassuk be egy tetraeder oldalának hosszát, majd írassuk ki felszínének és térfogatának értékét!
100|₂ pont
Kérjétek be egy háromszög oldalainak hosszát, majd írassátok ki, hogy tompa-, derék-, vagy hegyesszögű! Ha az c²-a²-b² összefüggés egyenlő nullával akkor derékszögű, ha nagyobb nullánál, akkor tompaszögű, és ha kisebb nullánál, akkor hegyesszögű.
1000|₂ pont

« Előző | Lap eleje

JavaScript vezérlőszerkezetek

Meghatározott logikai feltételek teljesülése esetén a vezérlőszerkezetekkel tudjuk szabályozni az utasítások végrehajtásának sorrendjét. A struktúrált programban alapvetően három vezérlőszerkezet használatos: szekvencia, szelekció, iteráció. Figyeljük meg a mintapéldákban a vezérlőszerkezetek egymásba ágyazódását!

Szekvencia

Szekvencia (utasításblokk) esetén az utasítások a programba írt sorrendjük szerint hajtódnak végre.

Beküldhető feladatok:

A pénztári kifizetésekhez 5000, 1000, 500, 200, 100 Ft-os címleteket használnak. Készítsetek programot, amely kiírja, hogy a billentyűzetről beolvasott összeg milyen címletekkel fizethető ki a legkevesebb bankjegy illetve érme felhasználásával! Feltételezzük, hogy a kifizetendő összeg mindig osztható 100-zal.
1000|₂ pont
Készítsetek programot, mely beolvas egy időpontot (óra, perc, másodperc) a billentyűzetről, majd beolvas egy másik, az előzőnél későbbi időpontot! (A két időpont egy napra esik.) A program határozza meg és írja képernyőre a két időpont között eltelt időt óra:perc:másodperc formátumban! (Az időpontokat 24 órás formátumban adjuk meg, tehát 12:59:59 után 13:00:00 következik.)
1000|₂ pont
Olvassuk be egy háromszög oldalainak hosszát, majd határozzuk meg a háromszög kerületét és a Heron képlet segítségével a területét: T=Math.sqrt(s*(s-a)*(s-b)*(s-c)), ahol s=0,5*(a+b+c).
100|₂ pont

Szelekció

Szelekcióhoz (elágazás) már olyan utasításokat használunk, amelyek valamilyen logikai kifejezés értékétől függően eltérő utasításblokkot hajtanak végre. Megvalósításához használhatjuk az if (logikai kifejezés){ } utasítást.

Beküldhető feladatok:

Olvassunk be egy egész óra értéket. Ha nem egészet ütöttünk be, vagy ha a szám nem 0 és 24 között van, akkor adjon hibaüzenetet! A program a napszaknak megfelelően köszönjön! 4-9: Jó reggelt!, 10-17: Jó napot!, 18-21: Jó estét!, 22-3: Jó éjszakát!
100|₂ pont
Az (x₁,y₁), (x₂,y₂) értékpárok egy síkbeli pontrendszer elemeinek koordinátái. A koordináták valós típusú értékek. Határozzuk meg a pontoknak az origótól vett távolságait, és döntsük el, hogy melyik pont van távolabb az origótól.
1000|₂ pont

Iteráció

Az iteráció (ismétlődés, ciklus) teszi lehetővé bizonyos feltételek teljesülése esetén egy utasításblokk többszöri végrehajtását. Ilyenkor a ciklusmagban használt változók értéke feladattól függően folyamatosan változhat. Az while (logikai kifejezés){ } elöltesztelő ciklusnál az ismétlési feltételeket a ciklus mag előtt allítjuk be, míg a do { } while (logikai kifejezés) hátultesztelő ciklus esetén a ciklusmag utasításblokkját követően. Létezik még az úgynevezett növeknényes ciklusszervező utasítás a for (ismétlések) { }. Itt az ismétlések tényleges számát már a ciklus indulásakor meg kell adnunk. Figyeljük meg az alábbi mintaprogramban az iterációk felépítését.

Gondoltam egy számot: A program kigondol egy számot egy és tíz között, majd megkérdezi tőlünk, hogy vajon melyikre gondolt. Ezt addig teszi, amíg ki nem találjuk. A probléma megoldására while ciklust és if elágazást használunk.

<!DOCTYPE html>
<html>
<head>
 <title>Vezérlőszerkezetek</title>
 <meta charset="UTF-8">
 <script>
  function myFunction() {
   var numberComputer = Math.floor((Math.random()*10)+1);
   var num = prompt("Gondoltam egy számra egy és tíz között. Találd ki!");
   var ok = true;
   while(ok) {
    if(isNaN(num)){
      num = prompt("Csak számot adhatsz meg és legyen egy és tíz között!");
    } else if(num < numberComputer) {
      num = prompt("Nagyobbra gondoltam!");
    } else if(num > numberComputer) {
      num = prompt("Kisebbre gondoltam!");
    } else if(num == numberComputer) {
      alert("Igen, erre a számra gondoltam: " + numberComputer);
      ok = false;
    }
   }
  }
 </script>
</head>

<body>
 
 <h1>Gondoltam egy számot!</h1>
 <button type="button" onclick="myFunction()">Találd ki!</button>
 <p id="demo"></p>

</body>
</html>

Beküldhető feladatok:

Készítsetek programot, amely beolvas egy számot, majd kiírja az összes osztóját!
100|₂ pont
Döntsétek el egy beolvasott számról, hogy prímszám-e!
100|₂ pont
Olvassatok be két pozitív egész számot, majd írjátok ki a legnagyobb közös osztójukat, és a legkisebb közös többszörösüket!
1000|₂ pont

« Előző | Lap eleje

JavaScript függvények és az eseménykezelés

Függvényhívások

A függvény névvel azonosított utasításcsoport. Általában akkor alkalmazzuk, amikor ugyanazokat a műveleteket kell a program különböző részein elvégezni, esetleg más-más adattal. A function kulcsszó után az általunk magadott néven lesznek elérhetőek az utasítás zárójelek { } között megadott utasítások. Ha a függvény utasításainak adatot szeretnénk átadni, akkor a függvény neve után zárójelben megadott úgynevezett attribútumokkal tehetjük meg. A függvény hívása nevének és attribútumainak megadásával történik.

<!DOCTYPE html>
<html>
<head>
 <title>Függvények és események</title>
 <meta charset="UTF-8">
 <script>
  function myexplorer() {
   txt = "<p>Böngésző kódnév: " + navigator.appCodeName + "</p>";
   txt+= "<p>Böngésző név:  " + navigator.appName + "</p>";
   txt+= "<p>Böngésző verzió: " + navigator.appVersion + "</p>";
   txt+= "<p>Süti engedélyezve: " + navigator.cookieEnabled + "</p>";
   txt+= "<p>Platform: " + navigator.platform + "</p>";
   txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";
   txt+= "<p>User-agent nyelv: " + navigator.systemLanguage + "</p>";
   document.getElementById("example").innerHTML=txt;
  }
 </script>
</head>

<body>
 
  <h1>Függvény hívások</h1>
  <p id="example">Ebbe a bekezdésbe kerülnek a böngésző adatai</p>

  <button type="button" onclick="myexplorer()">Böngészőm adatai</button>
     
</body>
</html>

Beküldhető feladatok:

Írassuk ki n-ig a tökéletes számokat! A "tökéletes szám", olyan szám, amely egyenlő, a magánál kisebb osztóinak az összegével, ha az 1-et is az osztók közé számítjuk. A tökéletes szám fogalma, a püthagoreusoktól származik. Ők négy tökéletes számot ismertek (a 6-ot, a 28-at, a 496-ot és a 8128-at) (forrás: http://www.erdekessegek.hu/index2_12.htm)
1000|₂ pont
Tükörszámoknak nevezzük azokat a számokat, melyek visszafelé olvasva megegyeznek saját magukkal, például 878 vagy 1441, írjunk programot, amely megszámolja, hány tükörszám található 10-től 100 000-ig!
1000|₂ pont
Titkosítunk egy szöveget a karaktereltolás módszerével.
- Az aktuális karakter helyett a kódtáblában, tőle az általunk megadott eltolással feljebb, illetve lejjebb levő karaktert írjuk a szövegbe.
- Az eltolást a p(x,y)=x+3*(y mod 2) polinommal számítsuk ki, ahol x az általunk megadott eltolás, y pedig az aktuális karakterpozíció értéke.
1 0000|₂ pont

Eseménykezelés

A program működése közben a kezelőfelületről illetve a kommunikációs felületről érkező események üzeneteit folyamatosan dolgozza fel, így a külső (egérről vagy billentyűzetről érkező) és a belső (timertől vagy más működő folyamatoktól érkező) események befolyásolják a futását.

A külső események érzékelésekor az operációs rendszer üzenetet küld annak az ablaknak, amelyen az esemény bekövetkezett. Az alkalmazás fogadja az üzenetet, és végrehajtja az eseményhez rendelt utasításokat. Ilyen események lehetnek az egérkattintás, az egérkurzor valamelyik dokumentumelem feletti állapota stb.

<!DOCTYPE html>
<html>
<head>
 <title>Függvények és események</title>
 <meta charset="UTF-8">
 <script>
  function Hatter(color){
    alert("Háttérszín: "+document.getElementById("myPage").style.backgroundColor+" -> "+color);
    document.getElementById("myPage").style.background=color;
  }
 </script>
</head>

<body id="myPage" style="background:lightyellow;" >
<h1>Háttérszíncsere egérkatintásra</h1>
<table style="text-align:center;padding:5px;">
  <tr>
    <td><input TYPE="button" value="Piros háttér" onclick="Hatter('red')"></td>
    <td><input TYPE="button" value="Zöld háttér" onclick="Hatter('green')"></td>
	<td><input TYPE="button" value="Kék háttér" onclick="Hatter('blue')"></td>
    <td><input TYPE="button" value="Eredeti háttér" onclick="Hatter('lightyellow')"></td>
  </tr>
</table>

</body>
</html>

Szintén külső események vezérlik az űrlapmezők kitöltését, vagy az alábbi kő-papír-olló játékot is.

<!DOCTYPE html>
<html>

<head>
 <title>Kő-papír-olló játék</title>
 <meta charset="UTF-8">
 <script>
 function myfunction(){
   alert("Kő, papír, olló!");
   document.getElementById("result").style.visibility="hidden";
   document.getElementById("demo").style.visibility="visible";
   document.getElementById("hi").innerHTML="<h1>Hello " + document.getElementById("veznev").value+" " + document.getElementById("utonev").value+"!</h1><p>Kő, papír vagy olló?</p>";
 }
 function kpofunction(userTip){
    var compTip=Math.floor((Math.random()*3)+1);
	document.getElementById("userT").src="./img/KPO"+userTip+".jpg";
	if (userTip==compTip){
	 document.getElementById("winner").innerHTML=" = ";
	} else{
	 document.getElementById("winner").innerHTML=userTip<compTip?" < ":" > ";
	}
	document.getElementById("compT").src="./img/KPO"+compTip+".jpg";
	document.getElementById("result").style.visibility="visible";
 }
 </script>
</head>

<body>
 <h1>JavaScript kő-papír-olló</h1>
 
 <form action="javascript:myfunction()">
   Vezetéknév: <input type="text" id="veznev" name="veznev" value="Chat"><br>
   Keresztnév: <input type="text" id="utonev" name="utonev" value="Elek"><br>
   <input type="submit" value="Feldolgoz">
 </form>

 <p>Kattints az feldolgoz gombra.</p>
 
 <div id="demo" style="visibility:hidden;">
 <p id="hi"></p>
 <p id="tip">
 <img id="kpo3" src="./img/KPO3.jpg" alt="Kő" onclick="kpofunction(3)"/>
 <img id="kpo1" src="./img/KPO1.jpg" alt="Papír" onclick="kpofunction(1)"/>
 <img id="kpo2" src="./img/KPO2.jpg" alt="Olló" onclick="kpofunction(2)"/>
 </p>
 </div>
 
 <div id="result" style="visibility:hidden;">
  <table>
  	<tr>
	 <td>Játékos:<br />  <img id="userT" alt="Játékos" src="./img/KPO1.jpg" /></td>
	 <td style="width:70px;text-align:center;"><h1 id="winner"> </h1></td>
	 <td>Computer:<br /> <img id="compT" alt="Computer" src="./img/KPO1.jpg" /></td>
	</tr>
  </table>
 </div>
  
</body>
</html>

Gondoltad volna, hogy a timer bekapcsolását követően, akár egy négy soros függvénnyel már digitális órát lehet megjeleníteni? Ezt a belső időzítést a továbbiakban természetesen más rendszeresen ismétlődő tevékenységek elvégzéséhez is használhatjuk.

Beküldhető feladatok:

Készítsetek programot, amely a "Bakonyi Bitfaragó Bajnokság 2013" szöveget fényreklámszerűen a képernyő közepén mozgatja.
1000|₂ pont
Kódoljatok egy weblapon megjeleníthető képnézegetőt, amely előre-hátra funkciókkal mutat meg képeket!
1000|₂ pont
Hogyan oldanátok meg egy weboldal elején képek 3 másodpercenkénti váltását? Készítsetek egy egyszerűbb slider-t 4 képpel!
1 0000|₂ pont

« Előző | Lap eleje

A kockadobás feladat lehetséges megoldásai

A leckében tárgyaltak összefoglalásaként nézzük meg az eredeti feladat néhány lehetséges megoldását.

Kockadobás szelekció használatával

Kockadobás tömb használatával

Kockadobás iteráció használatával

Kedves Bakonyi Bitfaragók!

Elérkeztünk az első kirándulásunk végére. Nagy utat tettünk meg a bitek birodalmában, de reméljük a bemutatott minták felhasználásával már érdekes megoldásokat tudtok adni az első forduló feladványaira. Tökéletes program ugyan nem létezik, de nagyon jó megközelítéssel érhetünk el egy kifogástalannak tartott állapotot.

Beküldhető feladat:

Készítsünk egy kockapóker játékot, amely öt dobókockát és egy gombot jelenít meg. A dobás gombra kattintás után a program véletlenszámok segítségével dobókockánként beállít öt értéket, és az alábbi játékszabályok alapján kiértékeli az eredményt.
- pár = egyforma értékek összege
- 2 pár = egyforma értékek összege
- Drill (3 egyforma) = egyforma értékek összege
- Full (2 egyforma + 3 egyforma) = dobott értékek összege
- Póker (4 egyforma) = négy egyforma érték összege
- Kis sor (1,2,3,4,5) = 15 pont
- Nagy sor (2,3,4,5,6) = 20 pont
- Nagy póker (5 egyforma) = 50 pont
10 0000|₂ pont

« Előző | Lap eleje