JavaScript szöveg és adat megjelenítése, illetve, ezek elrejtése
Nem minden böngésző támogatja a szkriptek programjainak belső használatát.
Azok számára, akik ilyen böngészőt használnak, alternatív megoldást nyújt a következő elem:
<noscript> Szöveges megjegyzés </noscript>
A noscript elem nyitó- és záró jelölőeleme közé tehát szöveges megjegyzést tehetünk.
Ez a szöveg akkor jelenik meg, ha a böngésző nem tudja futtatni a szkriptet.
A document.write() kiíratást akkor alkalmazzuk, ha a script közvetlen a html dokumentumban helyezkedik el, és a szövegfolyam azon részén van, melynél a kiíratásnak teljesülni kell.
A script-ben megírt utasítások közé, megjegyzést is írhatunk, melyeket egysoros ( // ) vagy többsoros ( /* . */ ) utasítási jelekkel el kell rejteni, hogy program működését ne befolyásolja.
A script-ben, egysoros ( // ) vagy többsoros ( /* . */ ) utasítási jeleket, programrészek letiltására is alkalmazhatjuk, azaz, az így letiltott részeket, program nem dolgozza fel.
Egysoros megjegyzés elrejtése. (Letiltása)
<script type="text/javascript">
// Program szempontjából, egysoros megjegyzés az is, ha a szöveg megírása több sorban fér el, de a szöveg írása közben, azaz annak végéig, nem ütjük le az ENTER billentyűt.
</script>
Példák.
Szöveg megjelenítése: document.write("szövegünk");
<body>
<script type="text/javascript">
document.write("Hello World!");
</script>
</body>
Tetszőleges szöveg írható a p címkék közé, illetve, címsor címkékkel is helyettesíthető a p címke
<script type="text/javascript">
document.write("<h1>Ez egy címsor</h1>");
</script>
Szövegsorok megjelenítése
<script type="text/javascript">
document.write("<h1>Ez egy címsor</h1>");
document.write("<p>Ez egy bekezdés</p>");
document.write("<p>Ez egy újabb bekezdés</p>");
</script>
JavaScript megjegyzések alkalmazása ( // )
Egysoros megjegyzéseknél alkalmazzuk. Igy programrészeinknél megjegyzéseket helyezhetünk el. A program figyelmen kívül hagyja, ezérta program müködését nem befolyásolja.
<script type="text/javascript">
// Kiíratunk, egy címsort:
document.write("<h1>Ez egy címsor</h1>");
// Kiíratunk, kettő bekezdést:
document.write("<p>Ez egy bekezdés</p>");
document.write("<p>Ez egy újabb bekezdés</p>");
</script>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Többsoros megjegyzések alkalmazása.
Mint a CSS, azaz stíluslapon ( /*.......*/ )
<script type="text/javascript">
/*
Ezen szövegsorok nem jelennek meg,
és a program müködését sem befolyásolják.
Még akkor sem, ha a szöveg írása közben többször is leütöttük az ENTER billentyűt,
mert többsoros megjegyzés kódja között helyezkedik el.
*/
document.write("<h1>Ez egy címsor.</h1>");
document.write("<p>Ez egy bekezdés.</p>");
document.write("<p>Ez egy újabb bekezdés.</p>");
</script>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Egy adott programsor elrejtése, azaz ki iktatása.
( // előjelekkel)
<script type="text/javascript">
document.write("<h1>Ez egy címsor.</h1>");
document.write("<p>Ez egy bekezdés.</p>");
// document.write("<p>Ez egy újabb bekezdés.</p>");
</script>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Többsoros programrész elrejtése, azaz ki iktatása.
a per-csillag /* --- */ jelekkel
Jelen esetben, minden kiíratás el van rejtve, ezért nem jelenik meg semmi.
<script type="text/javascript">
/*
document.write("<h1>Ez egy címsor.</h1>");
document.write("<p>Első bekezdés.</p>");
document.write("<p>Második bekezdés.</p>");
*/
document.write("<p>Harmadik bekezdés.</p>");
</script>
Fenti program eredménye:
Változóhoz rendelt szöveg kiíratása, Weboldalra.
Első lépésként a javascript programunkban el kell helyezni egy változót.
( Tetszőleges ékezet nélküli nevet, azaz azonosítót adhatunk változónak.)
Elhelyezés azt jelenti, hogy a változót be kell vezetni (deklarálni) a var kulcsszóval.
A kiírandó szöveget változóhoz rendeljük, majd ezen, változót hívjuk meg a document.write utasítással és a szövegeket display formátumban, azaz egymás alá iratjuk ki
A szövegsorok egymás alatti megjelenítéséhez, el kell helyezni egy sorlezáró utasítást.
( <br /> vagy <br> )
JavaScript megírása, közvetlen az XHTML-fájlban:
<body>
<script type="text/javascript">
var szovegsor="Első sor: A vakond átszaladt a telkem alatt";
document.write(szovegsor);
document.write("<br>");
var szovegsor="Második sor: Sas elkapta a rókát";
document.write(szovegsor);
</script>
</body>
Megjelenése weboldalon
Javascript szöveg meghívása
Szöveg csak akkor jelenik meg, ha a kapcsológombra kattintunk.
A kapcsológombon milyen szöveg jelenjen meg, azt mi írjuk meg.
Jelen esetben = Üzenet. Katt ide!
Szöveg kikapcsolása, azaz elrejtése, az oldal frissítésével lehetséges.
JavaScript megírása:
- Közvetlen az XHTML-fájlban, <head> vagy <body> területén.
- De, megírhatjuk külön js fájlban is.
<body>
<script language="JavaScript" type="text/javascript">
function uzenet() {
var temakor=document.getElementById('szoveg');
temakor.innerHTML='<div id="szoveg"><p class="szoveg001">Első sor: A vakond átszaladt a telkem alatt <br /> Második sor: Sas elkapta a rókát <br /> Szöveg balra </p> <p class="szoveg002">Harmadik sor: A vakond átszaladt a telkem alatt. <br /> Nenyedik sor: Sas elkapta a rókát <br />Szöveg középre</p> <pre class="szoveg003">A <pre> címkét is alkalmazhatod <br /> szöveg szöveg szöveg<br /> Szöveg jobbra </pre><p class="szoveg004">A beírt szöveget tetszőlegesen formázhatjuk, azaz ugyan úgy mint az xhtml - fájlt, CSS, azaz stíluslapon írjuk meg a meghatározásokat. A szövegsorok között nem használhatjuk az ENTER billentyűt, helyette sorlezáró utasítással <br /> kezdhetünk új sorba írni.</p></div> ';
}
</script>
<!-- A "button gomb" elhelyezése és megírása: -->
<p class="gomb_igazitasa">
<button id="szoveg" onclick="uzenet ()">Üzenet. Katt ide! </button>
</p>
</body>
CSS, azaz, stílus megírása.
#szoveg {width: 600px; font-size: 18px; background-color: yellow;}
.szoveg001 {font-size: 18px; text-align: left; color: yellow; background-color: blue; margin: 15px; padding: 5px;}
.szoveg002 {font-size: 18px; text-align: center; color: yellow; background-color: black; margin: 15px; padding: 5px;}
.szoveg003 {font-size: 18px; font-weight: bold; text-align: right; color: yellow; background-color: green; padding: 5px;}
.szoveg004 {font-size: 18px; text-align: left; font-weight: bold; background-color: #fff; padding: 5px;}
.gomb_igazitasa {text-align: center;}