JavaScript fájlból adatok megjelenítése

Adatok megjelenítéséhez leggyakrabban, a következő meghatározásokat alkalmazzuk.

  1. dokument.write( );
    • Ezzel mindig ott íratjuk ki a szöveget, vagy tetszőleges adatot, ahol a JavaScript programunkat elhelyeztük a dokumentumban, vagy ahol meghívtuk a külső JavaScript fájlunkat.

  2. Kiíratás tetszőleges kijelölt területre, a meglévő tartalom helyére: id.innerHTML =
    vagy
    Kiíratás tetszőleges kijelölt területre, a meglévő tartalom után: id.innerHTML +=

  3. jQuery szelektorral. ( jQuery a JavaScript továbbfejlesztett változata. )
    Kiíratás tetszőleges kijelölt területre, meglévő tartalom helyére: $("#id").html()
    vagy
    Kiíratás tetszőleges kijelölt területre, meglévő tartalom után: $("#id").append()

Az id helyére kell beírni a html oldal azon jelölőelemhez tartozó id azonosító elnevezést, melynél a JavaScript adatot ki akarjuk íratni.

Példák:

JavaScript esetén:
Jelölőelemhez tartozó id azonosítót a scriptben is be kell azonosítani, majd egy tetszőleges változóhoz rendelni.

jQuery alkalmazás esetén:
A head szakaszban, meg kell hívni valamelyik jQuery alkalmazást.
Nem kell előzetesen id azonosítót a scriptben bazonosítani, csak a szelektorba beírjuk az id azonosító nevet.

<body>
<!--  Elhelyezünk egy HTML elemet, id azonosítóval -->
<p> A span elemnél jelenik meg, az új adat: <span id="adat"></span>  </p>

   <!--  Saját, külső JavaScript fájlunk meghívása. -->
<script language="JavaScript" type="text/javascript" src="minta.js"></script>
</body>
JavaScript, minta.js fájl tartalma:
  id = document.getElementById ("adat");
  
          var szoveg=' Új szöveg ';
		  
              id.innerHTML = szoveg;

<head>
   <!--  Valamelyik jquery verzió meghívása. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
   <!--  Saját, külső JavaScript fájlunk meghívása. -->
<script language="JavaScript" type="text/javascript" src="minta.js"></script>
</head>
<body>
<!--  Elhelyezünk egy HTML elemet, id azonosítóval -->
<p> A span elemnél jelenik meg, az új adat: <span id="adat"></span>  </p>
</body>
JavaScript jQuery változata, minta.js fájl tartalma:
$(document).ready(function(){
      var szoveg=' Új szöveg ';     $("#adat").append(szoveg);
});


Ha egy program tartalmát akarjuk kiíratni úgy, hogy JavaScript meghatározások és html jelölőelemek is megjelenjenek.

JavaScript-ben megírni olyan szöveget, mely egyben script meghatározás is, de a program ne vegye figyelembe és html oldalon olvasható legyen, html kóddal kell megírni.
Azon html elemeket, melyeket nem szeretnénk, hogy a program figyelembe vegyen, szintén kódolva kell beírni.

Példák:
JavaScript-ben, document.write(" "); kiíratással, nem tudjuk kiíratni a document.write(" "); meghatározás formátumát,
így : document.write(" document.write(" "); "); 

HTML elemet sem írathatunk ki jelölőelemmel együtt, olvasható formátumba így:
példa 1:  document.write(" <h1> Tájékoztató szöveg. </h1> ");
példa 2:  var szoveg=' <h1> Tájékoztató szöveg. </h1> ';        id.innerHTML += szoveg;
példa 3:  var szoveg=' <h1> Tájékoztató szöveg. </h1> ';        $("#adat").append(szoveg);

A fenti példák kódolt formátumban történő megírása:
A document.write(" "); kiíratáshoz, a pontot és az idézőjeleket html kóddal kell helyettesíteni.
Idézőjel ( " ) html kódja: &#0034;
Pont ( . ) html kódja: &#46;
JavaScript-ből html oldalra a kiíratást, így írjuk meg: document.write(" document&#46;write(&#0034; &#0034;); ");

A document.write(" <h1> Tájékoztató szöveg. </h1> "); <h1> Tájékoztató szöveg. </h1> kiíratásához a kisebb mint és nagyobb mint html jelölőelemeket, kóddal kell helyettesíteni:
Kisebb mint ( < ) html kódja: &lt;
Nagyobb mint ( > ) html kódja: &gt;
JavaScript-ből html oldalra a kiíratást, így írjuk meg: document.write("&lt;h1&gt; Tájékoztató szöveg. &lt;/h1&gt;");

Itt van három link, melyek a html elemek kódolásában segítenek!:
1. Html szimbólumok és betűkódok beazonosítása.
2. ASCII kódra. Jelölőelemek kivételével minden string, html formátumra kódolása.
3. A billentyűzeten leütött karakter, ASCII kódszáma.







Szöveg kiíratása dokument.write(" "); meghatározással.

Javascript fájl meghívása szövegfolyamban ott, ahol a szöveget meg akarjuk jeleníteni:
<script language="JavaScript" type="text/javascript" src="minta.js"></script>

Következő szövegsorok, külső JavaScript fájl-ban (minta.js) vannak megírva,
és a dokument.write(); meghatározással vannak kiíratva.

Vissza a lap elejére