Az alert üzenet megjelenítése kattintásra
ALERT = üzenet, (event: eset, esemény)
Ha rákattintunk valamelyik lenti gombra, akkor a következő windows ablak jelenik meg, benne az általunk megírt szöveggel
Megjelenést bemutató kép
(Megjegyzés: Megjelenésí forma böngészők között, eltérő lehet, de minegyik egy OK gombot jelenít meg.)
Egy gomb, amire rá lehet kattintani.
<input type = button>
- button = Eseménygomb. Nyomógomb formátumot jelenít meg.
- value = a címkéje
- id="azonosito" Stíluslapon történő formázáshoz, meghatározhatjuk a gomb megjelenési formályát
- onclick = kattintás esetén, megjelenik az üzenet
- alert("üzenet") Megnyit egy Windows-os figyelmeztető ablakot, amit a felhasználó leokézhat
A következő példákban, kettő esemény gombot helyezünk el, melyek kattintásra egy üzenetet jelenítenek meg.
Első példa, melyet közvetlen az XHTML oldalon írunk meg
Megírása, közvetlen az XHTML-fájlban: (Ebben az esetben nem szükségeltetik JavaScript alkalmazás, így az input jelölőcímke és a value jelölőelem is elhagyható)
<body>
<button id="azonosito001" onclick="alert ( 'A gombra kattintottál. Megjelent a figyelmeztető vagy üzenő szöveg?')">Üzenet </button>
<button id="azonosito002" onclick="alert ( 'A másik gombra kattintottál. Megjelent a figyelmeztető vagy üzenő szöveg? Itt látható a legegyszerűbb üzenőablak, melyben tetszőleges szöveget írhatsz a felhasználó tájékoztatására')">Másik üzenet </button>
</body>
A fenti kódrészletek eredménye, a böngészőprogramban. Kattints a gombokra!
Üzenet a monítor közepén jelenik meg
Második példa, üzenet szövegét JavaScript fájlban írjuk meg
Buttongomb megjelenítése XHTML-fájlban, és az üzenet lekérése JavaScript fájlból:
<head>
<script language="JavaScript" type="text/javascript" src="uzeno.js"> </script>
</head>
<body>
<input type="button" id="buttongomb003" value="Üzenet" onclick="uzenet001()">
<input type="button" id="buttongomb004" value="Másik üzenet" onclick="uzenet002()">
</body>
Üzenetek megírása JavaScript, azaz, uzeno.js fájlban:
function uzenet001() {
alert ('Ez az üzenet, JavaScript fájlban íródik. Első üzenet. Ide írhatod, az általad szükségesnek tartott üzenetet.')
}
function uzenet002() {
alert ('Ez az üzenet is JavaScript fájlban íródik. Második üzenet. Ide is írhatsz, az általad szükségesnek tartott üzenetet. Az üzenő ablak mérete autómatikusan növekszik a beírt szövegnek megfelelően. \n \n HTML sorlezáró utasítást <br /> vagy <br> nem fogad el. \n De a visszaper és n beírását követően,\n új sortban folytatódik a szöveg.')
}
A fenti kódrészletek eredménye, a böngészőprogramban.
Kattints a gombokra!
Üzenet a monítor közepén jelenik meg
A fenti üzenőgombok formájának meghatározásai CSS, azaz stíluslapon:
#azonosito001{font-size: 18px; margin-right: 200px; background-color: yellow;}
#azonosito002{font-size: 18px; color: yellow; background-color: blue; border: 5px ridge yellow;}
#buttongomb003{font-size: 14px; margin-right: 200px; font-weight: bold; background-color: yellow; padding-right: 40px; padding-left: 40px;}
#buttongomb004{font-size: 14px; font-weight: bold; color: yellow; background-color: black; border: 5px ridge yellow;}
A hivatkozási sorban, webcímet is megadhatunk.
Hivatkozásra kattintás, és OK gombra kattintás után, ide visszatérni a böngészőablak visszalépés nyílra kattintással tudunk.
Példa:
<a href="https://www.wpaulina.hu/asztali" onClick="alert('Most, elhagyod ezt a weboldalt!');"> Weblapkészítés alapismeretei </a>
Weblapkészítés alapismeretei