Nehany JavaScript pelda

JavaScript
és néhány példaprogram

Java Logo A JavaScript a Java programnyelv kistestvére. Mindkettõrõl tudok ajánlani olvasnivalót: a JavaScript-rõl (továbbiakban JS) és a Java-ról is magyarul. Ha bõvebben érdekel, esetleg angolul is a teljesség igénye nélkül (elindulásnak jó). Itt most nem térnék ki a nyelv körültekintõ leírására. Akik tanultak C nyelven programozni, fõleg objektumorientáltan, azoknak könnyû dolga lesz. Ezen az oldalon mindössze csak néhány példaprogramot szeretnék bemutatni, és idõvel remélhetõleg a gyûjteményt bõvíteni (ehhez elõre is köszönök minden segítséget). Tudok ajánlani még angol nyelvû példákat és hasznos tudnivalókat a JS-rõl:

K2 Monicho's JavaScript HomePage (demostrációs programok)
Morphic Molecules haladóknak szánt példái (mint pl. tömbkezelés)
és hát a Netscape 3.0-hoz szánt JS példák

No, lássuk csak...

Tartalomjegyzék

1) Ez egy egyszerû "write".

2) Itt már függvényt is használunk.

3) Néhány trükk egy programozható HTML oldalhoz.

4) Tömbök generálása.

5) A "while" ciklus használata.

6) A "for" ciklus egy jó trükkhöz.

7) Az "if" utasítás és egy kis ûrlap.

8) Státuszsor görgetés.

9) Egy interaktív háttérbeállító program.

Ha végül sikerült átjutnod a JS programok sokaságán, akkor
a következõ oldalt ajánlom a figyelmedbe.
Itt az objektumokkal való (el)bánásmód néhány
szép példájával ismerkedhetsz meg, mint például
ûrlapkészítés, ablakkezelés, stb.

Várom az észrevételeket: h330776@stud.u-szeged.hu

1) A "write" parancs használata. Ha ki szeretnénk iratni valamit:

Próbáld ki! | Tartalomjegyzék

<HTML> <HEAD> <TITLE>Pelda 1.</TITLE> <SCRIPT language="JavaScript"> //a language elhagyható document.write("<blink>Ezt a JavaScript iratta ki.</blink>") </SCRIPT> //eddig tart a JavaScript program </HEAD> <BODY> Ez pedig egy szokásos HTML szöveg. </BODY> </HTML>

2) A scriptet célszerû elrejteni az "értetlen" böngészõk elõl a <--! és a --> közé.

Próbáld ki! | Tartalomjegyzék

<HEAD>
<TITLE>Pelda 2.</TITLE>
<SCRIPT>
<!-- elrejtés eleje
  function dupla(n)
        { document.write(n,"+",n,"=")
          return n+n
        }
  document.write("Az összeadás: ")
  document.write(dupla(5))
  // vege -->
</SCRIPT>
</HEAD>
<BODY>
<BR> Tudunk még számolni.
</BODY>

3) Ez is egy példa arra, hogy lehet több programot írni egy HTML lapba. Itt az elõzõ példával ellentétben nem rejtettük el az utasításokat, így azok a böngészõk, amelyek nem ismerik a JavaScriptet (pl. Netscape 2.0-nél régebbiek) ki fogják írni a HTML dokumentum sorai közé szöveg gyanánt.

Próbáld ki! | Tartalomjegyzék

<HTML> <HEAD> <TITLE>Pelda 3.</TITLE> </HEAD> <BODY> A mai dátum: <b> <SCRIPT language="JavaScript"> document.write(Date()) </SCRIPT></b> A lap URL címe: <b><tt> <SCRIPT> document.write(document.location)</SCRIPT></b></tt><p>

<p>Itt egy futás közben létrehozott HTML táblázat: <SCRIPT language="JavaScript"> with(document) { //ezután nem kell külön kiírni, hogy: document write("<dl><dd><table border><tr><td>1. oszlop</td>"); write("<td>2. oszlop</td></tr>"); write("<tr rowspan=2><td>3. oszlop</td></tr>"); write("</table></dl><p>"); } </SCRIPT>

<SCRIPT>
write("Ha hétfõ van, akkor ");
if (Date().substring(0,3) == "Mon")
       write("<blink><font color=Red>ez</font></blink>");
  else write("ez");
write(" a szó vörösen fog villogni.");
</SCRIPT>
</BODY>
</HTML>

4) Tömböket így hozunk létre:

Próbáld ki! | Tartalomjegyzék

<HTML>
<HEAD>
<TITLE>Pelda 4.</TITLE>
<SCRIPT language="JavaScript">
<!--itt kezdodik
function TombGeneralas(n) {
  this.length=n //a létrehozandó tömb hossza
  for (var x=1; x<=n; x++) {
   this[x]=0;
  }
return this;
}
//itt vegzodik ez a script-->
</SCRIPT>
</HEAD>

<BODY>
A tömb elemei legyenek 1,3,5,7. <p>
<SCRIPT>
<!--eleje
Szamok= new TombGeneralas(4);
for (i=1; i<=4; i++) Szamok[i]=2*i-1;
dokument.write("Kiiratva: ");
for (i=1; i<=4; i++) dokument.write(Szamok[i],", ");
//vege-->
</SCRIPT>
<p> Ezt így is lehet csinálni.
</BODY>
</HTML>

5) Ciklusszervezés egy egyszerû szorzótábla megvalósításához.

Próbáld ki! | Tartalomjegyzék

<HTML>
<HEAD>
<TITLE>Pelda 5.</TITLE>
<SCRIPT language="JavaScript">
<!--elrejtes
function SzorzoTabla(szorzando) {
  document.write("Szorzótábla <b>" + szorzando + "értékre. </b><hr><pre><dl>");
  szorzo = 1;
  while (szorzo <= 12) {
    document.write("<dd>" + szorzo + " x " + szorzando + " = " + szorzo*szorzando);
    szorzo++;
  }
document.writeln("</dl></pre>");
}
Szorzotabla(7);  //7-es szorzótábla lesz
<!--vege a scriptnek-->
</SCRIPT>
</HEAD>
<BODY>
Ez már a BODY-ban van.
</BODY>
</HTML>

6) Ez vajon melyik piramis lehet?

Próbáld ki! | Tartalomjegyzék

<HTML>
<HEAD>
<TITLE>Pelda 6.</TITLE>
<SCRIPT language="JavaScript">
<!--csiribaa-csiribuu
function Vonal() {
  var String='<hr align="center" width=';
  for (size=5; size<=100; size+=5)
    document.writeln(String+size+'%>');
  }
<!--itt a vege, fuss el vele-->
</SCRIPT>
</HEAD>

<BODY>
Nos, ez a vonal csak nõl, nõl,nõl,nõl,nõl,nõl,nõl,nõl...
<SCRIPT>
<!--indul
Vonal()
<!--vege-->
</SCRIPT>
</BODY>
</HTML>

7) Az "if" utasítást is az adatok ellenõrzéséhez találták ki. Ezenkívül kapunk egy kis kóstolót az olyan sokat emlegetett ûrlapok világából is.

Próbáld ki! | Tartalomjegyzék

<HTML>
<HEAD>
<TITLE>Pelda 7.</TITLE>
<SCRIPT language="JavaScript">
<!--rejtozkodunk, tehat vagyunk
function Ellenorzes(urlap) {
if (urlap.value >= 50)
   alert("Sajnos On sem lesz mar 49 eves! De azert jol tartja magat."); //alert=figyelmezteto
  else alert("Nagyszeru! On meg nem mult el 50 eves. De azert tobbnek nez ki.");
}
<!--ebbol eleg-->
</SCRIPT>
</HEAD>

<BODY>
<FORM name="urlap">
Neve: <input type="text" size=30 name="nev">
Kora: <input type="text" size=5 name="eletkor"> (<=50 év!)<p><hr>
<input type="button" value="Az adatok ellenõrzése" onClick="Ellenorzes(this.form.eletkor)">
     //onClick=eseménykezelõ, ha a gombra kattintunk, akkor meghivja az "Ellenorzes" fuggvenyt
</FORM>
</BODY>
</HTML>

8) Egy kis fényreklám következik. No, meg a "radio"-gombokkal is ismerkedünk egy kicsit.

Próbáld ki! | Tartalomjegyzék

<HTML>
<HEAD>
<TITLE>Pelda 8.</TITLE>
<SCRIPT>
<!--itt kezdodik
var szoveg="Sziasztok mat-szamtechesek!"
var hossz=szoveg.length
var szele=100
var poz=1-szele
function scroll() {
    if (flag) {
         poz++
         var scrolled=""
         if (poz==hossz) poz=1-szele
         if (poz<0) {
         for (var i=1; i<=Math.abs(poz); i++)
             scrolled=scrolled+" "
         scrolled=scrolled+szoveg.substring(0, szele-i+1)
         }
         else scrolled=scrolled+szoveg.substring(poz, szele+poz)
         window.status=scrolled
         setTimeout("scroll()",150)
    }
}
<!--itt vegzodik-->
</SCRIPT>

<BODY>
<FORM>
<INPUT TYPE="radio" NAME="scrolling" VALUE="START"
onClick="flag=true; scroll(); return flag">
Bekapcsol<BR>
<INPUT TYPE="radio" NAME="scrolling" VALUE="STOP" onClick="flag=false">
Kikapcsol<p>
</FORM>
</BODY>
</HTML>

9) Napszaktól függõ háttérbeállítással is megtréfálhatjuk a Home Page-ünkre látogatókat.

Próbáld ki! | Tartalomjegyzék

<HTML>
<HEAD>
<TITLE>Pelda 9.</TITLE>
<SCRIPT language="JavaScript">
<!--a script kezdete
azIdo = new Date();
azOra=azIdo.getHours();
if (azOra>6 && azOra<18) //nincs meg ejjel
    document.write("<BODY background=nappal.jpg text=#FFFF54>");
  else
    document.write("<BODY background=ejjel.jpg text=#FFFFFF>");
  <!--script vege-->
</SCRIPT>
</HEAD>

<BODY>
<h3>A program 6 és 18 óra között nappali hátteret
állít be, különben éjszakait.</h3>
</BODY>
</HTML>