A JavaScript lehet ségei • Üzenetek megjelenítése a felhasználó számára rlapok tartalmának ellen rzése, azokkal számítások végzése • Mozgóképek készítése • Hirdetések elhelyezése • B vítmények érzékelése • A weblap tartalmának böngészés közben történ módosítása
A JavaScript kód helye • A weboldal törzsében – A program kimenete a HTML dokumentum része
• Az oldal fejrészében – Általában függvények elhelyezése
• HTML elemen belül – Eseménykezel k
• Önálló fájlban
• A weblapokat HTML nyelven készíthetjük el. • A HTML egyszer leírónyelv, nem alkalmas válaszolni a felhasználóknak, nem tud döntéseket hozni, nem tud végrehajtani különböz feladatokat • Ehhez egy parancsnyelvre van szükség • Ennek a segítségével egyesíthetjük a programozás és a HTML el nyeit.
JavaScript elhelyezése a HTML dokumentumba A weblap címe
Önálló JavaScript fájlok • Összetett programok esetén a HTML dokumentum könnyen áttekinthetetlenné válhat. • Ennek elkerülésére készíthetünk JavaScript fájlokat. • Kiterjesztésük: .js • Hivatkozás: <script language="JavaScript" type="text/javascript" src="filename.js">
1
Események • A JavaScript programok általában valamilyen felhasználói tevékenységre (eseményre) válaszolnak.
A JavaScript egyéb alkalmazásai • Flash • Szerveroldali JavaScriptek • Microsoft Windows Scripting Host, általános célú parancsnyelv – A legéletképesebb ilyen alkalmazások eddig e-mailben terjed vírusok voltak.
• .NET keretrendszer
Mennyi az id ? • Készítsünk olyan alkalmazást, amely megjeleníti a pontos id t!
<script language="JavaScript" type="text/javascript"> most = new Date(); helyiido = most.toString(); utcido = most.toGMTString(); document.write("Helyi id : "+helyiido+" "); document.write("UTC id : "+utcido);
2
Pontos id • Készítsünk olyan programot, amely nagy bet kkel csak a pontos id t írja ki!
Pontos id 2 • Készítsük el az el programot külön JavaScript fájl segítségével!
Ido.html Pontos id <script language="JavaScript" type="text/javascript" src="ido.js">
<script language="JavaScript" type="text/javascript"> most = new Date(); ora = most.getHours(); perc = most.getMinutes(); mp = most.getSeconds(); document.write("
"+ora+" : "+perc+" : "+mp+"
");
ido.js most = new Date(); ora = most.getHours(); perc = most.getMinutes(); mp = most.getSeconds(); document.write("
"+ora+" : "+perc+" : "+mp+"
");
Utasítások • Alapvet egységek • Egyetlen m veletet hajtanak végre • Az utasítások végét pontosvessz jelzi. • Példák: ora = most.getHours(); perc = most.getMinutes();
3
Függvények • A zárójelr l ismerhet fel • Példa: document.write("Teszt."); • Segítségükkel könnyebben elvégezhetünk bizonyos feladatokat • Lehetnek beépített, illetve saját készítés függvények
Objektumok • Az objektum egyszerre több adatot tartalmaz • Ezeket az adatokat az objektum tulajdonságainak nevezzük. • Az objektum neve és a tulajdonság neve közé pontot teszünk. • Az objektum metódusokat is tartalmazhat, amelyek az objektum adataival dolgoznak. • Példa: document.write(); • A document objektum write metódusa.
DOM objektumok • A böngész és a HTML dokumentum egyes részeit jelképezik • window • document • status
Változók • Olyan tárolók, amelyekben értékeket helyezhetünk el. • Példa: x = 27;
Beépített objektumok • A JavaScript nyelv részei • Például: – Date – Array – String – Math
Egyedi objektumok • Általunk készített objektumok
4
Feltételes utasítások • Elágazások, szelekciók • A program futása valamilyen feltétel teljesülését l függ en más és más irányban folytatódhat tovább • if else • switch case
Eseménykezel k • Megmondják a böngész nek, hogy mit kell tenni, amikor egy adott esemény (felhasználói tevékenység) bekövetkezik.
Nyelvtani szabályok • Kis- és nagybet k – A kis- és nagybet ket mindenhol megkülönböztetjük – A kulcsszavak kisbet sek – Az objektumok nagy bet vel kezd dnek – A metódusok neve kisbet vel kezd dik, az összetételek kezd bet je lehet nagy: toLowerCase
Ciklusok • Ismétlések, iterációk • Olyan utasításcsoport, amely többször hajtódik végre. • for • while • do while
Futási sorrend • A részben lév <script> tag-ben elhelyezked utasítások futnak le el ször • A részben lév <script> tag-ben elhelyezked utasítások futnak le ezután. • Az egyes eseménykezel k csak az esemény bekövetkeztekor futnak le.
Nyelvtani szabályok • Változó-, objektum- és függvénynevek – Az angol abc kis- és nagybet it, számokat, valamint az aláhúzásjelet tartalmazhatják. – Nem kezd dhetnek számmal – valtozo, Valtozo, VALTOZO, valtoZo négy különböz változó neve.
• Foglalt szavak – A JavaScript nyelvet alkotó szavak nem alkalmazhatók változónévként.
5
Nyelvtani szabályok • Szóközök és tabulátorok, üres sorok tetsz leges számban beiktathatók a kódba • Megjegyzések: //megjegyzés a sor végéig /* A megjegyzés a kezd szimbólumoktól a záró szimbólumokig tart */
Feladat • Készítsünk olyan alkalmazást, ahol egy linkre kattintva egy ablakban üzenetet közlünk!
Javasolt programozási eljárások • Lássuk el a kódot b ségesen megjegyzésekkel! • Minden utasítást zárjunk le pontosvessz vel, és egy sorba csak egy utasítást írjunk! • Amikor csak lehet, használjunk külön JavaScript fájlokat! • Kódunk legyen böngész független!
DOM • Dokumentumobjektum-modell • Nem része a JavaScript nyelvnek • Egy programozási felület (API), amelyet a böngész be építenek • Más nyelvekb l (VBScripr, Java) is elérhet .
document
anchors[]
images[] window (parent, frames[], self, top
history forms[]
rlapelemek location els szint DOM objektumok
6
A document adatai • URL: a weboldal URL-je (nem módosítható, ilyen célra a window.location használható) • title: a <TITLE> közötti szöveg • referrer: annak az oldalnak a címe, ahol a felhasználó megel leg tartózkodott. • lastModified: az utolsó módosítás dátuma, id pontja
Feladat • Írjunk alkalmazást, amely kiírja a dokumentum utolsó módosításának dátumát!
A history objektum adatai • length: az el zménylista hossza • go(szám): attól függ en, hogy negatív, vagy pozitív, ugrik az el zménylista megfelel elemére • back(): el URL betöltése • forward(): a következ URL betöltése
A document adatai • • • • • •
bgColor: háttérszín fgColor: szövegszín linkColor: linkszín alinkColor: linkszín, ha az egér fölötte van vlinkColor: meglátogatott linkek színe cookie: süti
Az utolsó módosítás ideje: <script language="JavaScript" type="text/javascript"> document.write(document.lastModified);
A location objektum adatai • href: az ablakban lév dokumentum teljes URL-je • protocol: az URL protokollrésze • hostname: az URL gépnevet tartalmazó része • port: az URL portszámot tartalmazó része • pathname: az URL elérési utat tartalmazó része • search: az URL lekérdezési része • hash: az URL-ben lév horgony neve
7
A location objektum metódusai • reload(): a dokumentum újratöltése • replace(): a jelenlegi hely lecserélése egy másik webhelyre.
Feladat • Készítsünk olyan weblapot, amelyre egy vissza és egy el re gombot helyezünk!
