HTML. Ismerkedés a JavaScripttel. A JavaScript lehet ségei. A JavaScript kód helye. Önálló JavaScript fájlok

Méret: px

Mutatás kezdődik a ... oldaltól:

Download "HTML. Ismerkedés a JavaScripttel. A JavaScript lehet ségei. A JavaScript kód helye. Önálló JavaScript fájlok"

Artúr Balla
8 évvel ezelőtt
Látták:

1 HTML Ismerkedés a JavaScripttel webprogramozó 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. 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 JavaScript elhelyezése a HTML dokumentumba <html> <head> <title>a weblap címe</title> </head> <h1>weblapom</h1> type="text/javascript"> document.write(document.lastmodified); </body> </html> 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 Ö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: type="text/javascript" src="filename.js"> 1

egyesíthetjük a programozás és a HTML el nyeit.

2 Események A JavaScript programok általában valamilyen felhasználói tevékenységre (eseményre) válaszolnak. Egyszer eseménykezel <html> <head> <title>eseménykezelés</title> </head> <input type="button" value="kattints!" onclick="alert('kattintottál')"> </body> </html> 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 ben terjed vírusok voltak..net keretrendszer Kliensoldali Java ActiveX VBScript Szerveroldali CGI PHP python Egyéb parancsnyelvek Mennyi az id? Készítsünk olyan alkalmazást, amely megjeleníti a pontos id t! type="text/javascript"> most = new Date(); helyiido = most.tostring(); utcido = most.togmtstring(); document.write("helyi id : "+helyiido+"<br>"); document.write("utc id : "+utcido); 2

" onclick="alert('kattintottál')"> </body> </html> A JavaScript egyéb alkalmazásai Flash Szerveroldali JavaScriptek Microsoft Windows Scripting Host, általános célú parancsnyelv A legéletképesebb

3 Pontos id Készítsünk olyan programot, amely nagy bet kkel csak a pontos id t írja ki! type="text/javascript"> most = new Date(); ora = most.gethours(); perc = most.getminutes(); mp = most.getseconds(); document.write("<h1>"+ora+" : "+perc+" : "+mp+"</h1>"); Pontos id 2 Készítsük el az el programot külön JavaScript fájl segítségével! most = new Date(); ido.js ora = most.gethours(); perc = most.getminutes(); mp = most.getseconds(); document.write("<h1>"+ora+" : "+perc+" : "+mp+"</h1>"); Ido.html <html> <head> <title>pontos id </title> </head> type="text/javascript" src="ido.js"> </body> </html> 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

gethours(); perc = most.getminutes(); mp = most.getseconds(); document.write("<h1>"+ora+" : "+perc+" : "+mp+"</h1>"); Ido.

4 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 Változók Olyan tárolók, amelyekben értékeket helyezhetünk el. Példa: x = 27; 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. Beépített objektumok A JavaScript nyelv részei Például: Date Array String Math DOM objektumok A böngész és a HTML dokumentum egyes részeit jelképezik window document status Egyedi objektumok Általunk készített objektumok 4

Példa: x = 27; 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.

5 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 Ismétlések, iterációk Ciklusok Olyan utasításcsoport, amely többször hajtódik végre. for while do while 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. <img src="kép neve" onmouseover="függvényhívás();"> Futási sorrend A <head> 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 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 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

<img src="kép neve" onmouseover="függvényhívás();"> Futási sorrend A <head> 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

6 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 */ 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! Feladat Készítsünk olyan alkalmazást, ahol egy linkre kattintva egy ablakban üzenetet közlünk! <a href=" onclick="alert('ez egy esemény');">kattints erre a linkre</a> DOM links[] Dokumentumobjektum-modell document anchors[] 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. window (parent, frames[], self, top history images[] forms[] rlapelemek location els szint DOM objektumok 6

Amikor csak lehet, használjunk külön JavaScript fájlokat! Kódunk legyen böngész független! Feladat Készítsünk olyan alkalmazást, ahol egy linkre kattintva egy ablakban üzenetet közlünk!

7 A document adatai URL: a weboldal URL-je (nem módosítható, ilyen célra a window.location használható) title: a <TITLE></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 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 Feladat Írjunk alkalmazást, amely kiírja a dokumentum utolsó módosításának dátumát! Az utolsó módosítás ideje: type="text/javascript"> document.write(document.lastmodified); 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 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

lastmodified: az utolsó módosítás dátuma, id pontja 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:

8 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! <input type="button" value="vissza" onclick="history.back();"> <input type="button" value="el re" onclick="history.forward();"> VÉGE 8

Feladat Készítsünk olyan weblapot, amelyre egy vissza és egy el re gombot helyezünk!

Hasonló dokumentumok

Az image objektum. Az image eseménykezel i. Képek el zetes betöltése. Feladat. Váltóképek készítése

Az image objektum. Az image eseménykezel i. Képek el zetes betöltése. Feladat. Váltóképek készítése Az image objektum Multimédiás alkalmazások készítése JavaScript segítségével webprogramozó a document leszármazottja az images tömbön keresztül érhet el complete : teljesen letölt dött-e? height, width