Javascript alapok 2

JS-mondattan: 

 A weboldalakba írandó JS-et a <script> tag tartalmazza:

<script type="text/javascript"> // Your code here </script>

 Hogy a kódot véletlenül se hajtsa végre a böngésző, a HTML comment tagbe kell foglalni:

<script type="text/javascript"> <!-- // Your code here --> </script>

 A HTML legújabb és legszigorúbb változata, az XHTML szerint a kommenteléshez a CDATA kommentelési mondattant kell alkalmaznunk:

<script type="text/javascript"><!--//--><![CDATA[//><!-- // Your code here //--><!]]></script>

Emellett az XHTML értelmében a JS-et csakis külön .js fájlban kellene tárolni!
 A // jel utáni sor-rész komment.
 A /* és */ jelek közötti szöveg komment.

Kód-végrehajtás: 

 A {} jelek közé írt kód egy tömbként kerül végrehajtásra.
 Az egyes rendelkezéseket pontosvesszőkkel (;) vagy sortörésekkel választhatjuk el.
 A kód (ill. kód-blokkok) végrehajtási sorrendje megegyezik a fentről-lefele – balról-jobbra olvasási iránnyal. Azaz az egyes script tagekben vagy a .js dokumentumban foglalt kódokat ilyen sorrendben olvassa be a böngésző.
 A screen.availWidth ill. screen.availHeight változók a felhasználó képernyőjének szélességét ill. magasságát szolgáltatják (pixelekben).

Függvények: 

 A függvények ismételt meghívásával sok manuális kódbeírást spórolhatunk meg. A függvények/módszerek tehát bizonyos feladatok, eljárások tárolására valók.
 Függvények definiálása: function függvény-név(paraméterek) {kód-blokk;}
 Függvények meghívása (a helyzettől függő paraméterekkel): függvény-név(paraméterek);

Objektumok 

 Az objektumoknak (objects, melyek a JS-nyelv „főnevei”) vannak jellemzői (properties, mint „melléknevek”), módszerei (methods, mint „igék”) és eseményei (events).
 Az Objektum-orientált Programozás (OOP) a JS és a webes programozás lényege.
 Az ún. mag (core) objektumok előre megadottak, implementációtól függetlenek. Sok programozást spórolhatunk meg a használatukkal.
 A saját objektumok megadásához az ún. class-t használjuk.

Adat-típusok: 

 Az adatok (data) a JS információi, melyeket a típusuknak (pl. String/Number/Boolean) megfelelően kezel a nyelv.
 A null adat-típus az adat hiányát, az undefined pedig az adat (pl. változó-érték) meghatározatlanságát jelzi.

Stringek: 

 A string-adatokat idézőjelekbe (vagyis ún. delimiterek közé) kell írni. Az idézőjel tetszőlegesen lehet egyszeres vagy kétszeres, a lényeg, hogy az adott elem elején és végén is ugyanolyan legyen. Idézetek vagy aposztrofok egymásba ágyazásakor a bennfoglaló idézőjel és a bent lévő eltérő legyen! Jó megoldás az is, hogyha ún. escape sentence-eket használunk (kódolt karaktereket) az idézőjelek helyett, pl. \’ ill. \”.
 Az ASCII-betűk kódja: \xff, ahol ff hexadecimális szám.
 Az Unicode-betűk kódja \uffff, ahol az utolsó négy karakter két hexadecimális számnak felel meg.

Műveletek: 

 A műveletekkel (operators) módosíthatjuk az adatokat. Az alkalmazott műveletek rendűsége és zárójelekkel való csoportosításuk a matematika szabályainak megfelelően történik.

Változók: 

 A kód áttekinthetősége érdekében a változókat lehetőleg a program elején definiáljuk, ill. esetleges (újra)definiálásokat a függvényeken belül végezhetünk.

 A JS esetfüggő; a változó-nevek pedig számmal nem kezdődhetnek.

Adat-típusok és átalakításuk: 

 A prompt módszer/függvény a window objektumra vonatkozik. Két paramétere a megjelenítendő szövegre és a szövegmező alapértelmezett értékére utal:

window.prompt(”szöveg”,”érték”);

 A prompt-ként bevitt adatokat a program string-ként kezeli, így a + művelet nem összeadást, hanem hozzáfűzést jelent akkor is, ha a bevitt adat szám. A többi művelet azonban nem kétértelmű, így azokat szám-tartalmú stringre is matematikai műveletként hajtja végre a program; felismerve, hogy a string számként is értelmezhető.
 (Ellenkező esetben a művelet értéke NaN!)

 A typeof(); módszer stringként visszaadja a paraméterébe írt változó értékének típusmegnevezését (number/string/boolean/array stb.).

 A JS-et rákészszeríthetjük, hogy a bevitt adatot számként értelmezze. Ennek módjai: o A Number() függvény paraméterébe írt értéket megpróbálja számmá alakítani. o A parseFloat() függvény elkezdi beolvasni a stringet, egészen addig, míg egy nem-szám karakterhez ér.

 Az eddig beolvasott számokat értelmezi és visszaadja. Fontos, hogy a string számmal, vagy + ill. – jellel kezdődjön! o A parseInt() függvény a parseFloat()-hoz hasonlóan működik, de a képezhető számnak csak az egészértékét veszi fel (a tizedeseket elhagyja).

Összetett adat-típusok: az array-k és objektumok. 

 Az összetett adat-típusok: o Az objektumok, melyet lehetnek alapértelmezettek vagy a felhasználó által készítettek. o Arrray-k, melyek egy vagy többféle más típusú adatot tartalmaznak.
 Alapértelmezett JS-objektumok pl.: String, Date, Math.

A string objektum: 

 Stringek deifiniálási módszerei: o Implicit (=járulékos) módszer: egy változóhoz szöveges értéket rendelünk; pl. var változónév = ”érték”; o Explicit (=direkt) módszer: a String konstruktorral ténylegesen létrehozzuk a stringet, mint objektumot: var változónév = new String (”érték”); Az explicit meghatározás szabatosabb, általánosabb érvényű.

 A string objektumokra vonatkozó módszerek közül kettő: indexOf() és substring().
 A változó-név.indexOf(”keresett szöveg”); paranccsal a keresett szöveg karakterének helyszámát adja vissza a módszer (függvény). A string első karakterének helyszáma 0. A szóközök is karakternek számítanak.

 A változó-név.substring(kezdő-index,vég-index); módszer a kezdő-indexű karaktertől a végindexű előttiig terjedő al-stringet veszi fel értékként.

A Date objektum: 

 A JS-ben nincs primitív (implicit) dátumadat-típus, ezért a dátum-adatok csak expliciten, azaz objektumként definiálhatók [new Date() objektum].
 Hogyha pl. a dátumnév.setDate(100) módszerrel egy dátumhoz túl nagy értéket rendelünk, a JS a dátum többi elemét is megváltoztatja, az eredeti dátum és a megadott érték által kifejezett időtartamnak megfelelően.

A Math objektum: 

 A Math objektumot csak implicit módon, azaz a használatával „definiálható”, s a string és Date objektummal ellentétben nem tárol adatot.

Az Array objektum: 

 Az array-elemeket névvel is elnevezhetjük, pl.: var array-név = new Array(); array-név [”elem_neve”] = ”érték”;

Feltétel-vizsgálatok és feltételes rendelkezések: 

 Az array-k elemeinek ABC-sorrendbe állítása, valamint a stringek közötti egyenlőtlenségi relációk során a JS az őket alkotó karakterek ASCII-számait veszi alapul!

 A feltétel-vizsgálatokkor szöveges értékek esetén az ASCII-számok alapján dönt a program. Ha az ABC-sorrendnek megfelelő, esetfügetlen összehasonlításra van szükségünk, akkor az értékeket célszerű a toUpperCase() vagy toLowerCase() függvényekkel egységes betű-esetűvé alakítani.

 Hogyha objektumok (pl. explicit módon definiált stringek) közt állíptunk meg relációkat, azok magukra az objektumokra, s nem azok értékére vonatkozólag kerülnek kiértékelésre.

Ezért ha a változókat ovjektumként definiáltuk, akkor értékeik összehasonlításához a változó.valueOf() módszert kell rájuk alkalmazni.

 Logikai műveletek a feltétel-vizsgálatokban: a feltételek teljesülésének egymás közötti, logikai viszonyának megfelelően megállípíthatjuk, hogy a felhasználótól kapott adat értelmes-e,m illetve a korábbi választásoknak megfelelően csökkenthetjük a további alternatívák számát.

 Az értékek nem-szám (NaN) jellegének ellenőrzésére az isNaN(érték) függvény szolgál, melynek értéke true, ha az érték NaN, és false az ellenkező esetben. Objektumok értékeinek vizsgálatához ne felejtsük el használni a valueOf() módszert!

 A break; parancs az adott (pl. if else) feltételes rendelkezés kód-blokkjának végrehajtását leállítja, és a következő kód-blokkra téríti át a programot.

 Akkor, hogyha egy feltétel után az ÉS (&&) logikai művelet áll, a vizsgálat csak akkor folytatódik, hogyha az ÉS-feltétel teljesült. Egyébként a program nem lép be a ciklusba.

 A switch feltételes rendelkezés olyan, mint a tirisztor. Hogyha az egyik case teljesül, akkor az összes következő parancsot végrehajtja a program; vagyis a case kulcsszavakat többé nem veszi
figyelembe. Ezért kell a break; paranccsal kilépni a ciklusból az adott esetben végrehajtásra kerülhető összes parancssor végén.

 A for ciklust alkalmazzuk, ha a kód-részletet bizonyos számú alkalommal kell futtatni.

 A while ciklust alkalmazzuk, hogyha egy feltétel teljesülése esetén akarjuk futtatni.

 A do while ciklust, hogyha a feltétel teljesülésének ellenőrzése előtt egyszer mindenképpen le akarjuk futtatni a kódot.

 A break; utasítással a teljes cillusból kilépünk, úgy, hogy az többé nem indul el. A continue; parancs a ciklust az adott helyen leállítja majd elölről újraindítja.

Ciklusok: 

 A változó-név.length() módszer segítségével megállapíthatjuk egy array elem-számát vagy egy egyszerű változó karaktereinek számát.

 A while ciklus a kód végrehajtása előtt ellenőrzi a feltétel teljesülését (és true esetén végrehajtja azt), míg a do while ciklus a kódot először lefuttatja, majd a végén ellenőrzi a feltételt, és míg azt érvényesnek találja, megismétli a kód futtatását.

Gyorsírás terner operátorokkal 

• A függvény által kezelt objektumok stb. kapcsán túl sok if il. switch rendelkezést kéne írni. Ezt a terner operátorokkal küszöbölhetjük ki.
• A terner operátorok egy if else feltételes rendelkezés-párosnak felelnek meg. Mondattanuk:

 var változó-név = feltétel ? igaz-érték:hamis-érték;

      pl.: var direction = x < 200 ? -1 : 1;

• A terner operátorok egymásba ágyazhatók,
      pl.: var direction = x < 200 ? (x > 100 ? 0 : -1) : 1;

Változók és függvények érvényessége 

     • A függvényeken kívül definiált (globális) változók az egész script-re vonatkoznak. Használatukat kerüljük, inkább a függvényeken belül definiáljuk a változókat.

    • A függvényeken belül létrehozott (lokális) var objektumok (implicit módon definiált változók) csak az adott függvényen belülre érvényesek. (Pl.: var változó-név = ”érték”;.) Azaz az esetleg már meglévő globális változók értékét csak a függvényen belülre nézv változtathatják meg. Használatuk a többi függvény zavartalan működése érdekében előnyös.

    • A függvényekben explicitmódon definiált változók (pl.: változó-név = ”érték”;) a teljes további scriptben érvényesek; azaz mind a függvényen belül, mind a további scriptre nézve felülírják azok esetleges korábbi értékeit.

Objektum-gyorsírás (object literal)  

    • Mint látjuk, az egymást követő scriptek azonos nevű függvényei felülírhatják egymást. Ennek kiküszöbölésére a függvényeket egy-egy objektumhoz rendelt módszerekként hozhatjuk létre.

    • A függvények objektumokba szervezése más programozási nyelvek (pl. C++, Java) ún. programozási osztályaira (programming classes) emlékeztet.

    • Az objektumok definiálását az objektum-gyorsírással lerövidíthetjük. Az egyes rendelkezéseket itt sorvégi vesszők választják el. Mondattana:

var objektum-név= { függvény1:function() {kód1;}, függvény2:function() {kód2;}, függvény3:function() {kód3;} }

A második függvény meghívása az oldalbetöltési eseménykor (ahogy az adott objektumra vonatkozó módszerek meghívásánál már megszoktuk):
 window.onload=objektum-név.függvény2;

• Az gyorsírásos objektumon belüli változók ill. array-k mondattana:
 változó-név1:’érték1’, változó-név2:’érték2’, array-név1:[’első_érték’,’második_érték’,’stb’], array-név1:[’első_érték’,’második_érték’,’stb’]

Régi és modern JS-módszerek 

  • Elavult, kerülendő eljárások:
       o A document.write() parancs túlzott használata. o Az objektumok létezése/elérhetősége helyett böngésző-verziók ellenőrzése. o Sok új HTML tartalom kiíratása a már meglévő kezelése helyett.

       o „Cégszerű” DOM-objektumok használata (pl. document.all a MSIE ill. document.layers a Netscape Navigator esetében).

       o A <head> rész ill. a <script src=”xxx.js” type=”text/javascript” />   taggel beidézett JStömbök helyett a dokumentumtestbe írt JS-darabkák. o javascript: linkek események helyett.

• Modern, követendő eljárások: 

  o Elkülönített .js dokumentumokra hivatkozás.
  o A felhasználandó objektumok ellenőrzése a böngésző verziók helyett.
  o A kliensoldali programok nélkül is jól működő oldalt lássuk el aktív bővítményekkel, és ne a szkriptek megírása után készítsük el a statikus tartalmat tartalék-képpen!
  o Rövid, zárt kódot írjunk, jellemző és egyedi elnevezésekkel, mellőzve a globális változókat.
  o A kód legyen jól áttekinthető, karbantartható („szellős”).
  o A kód tartalmazza az értelmezéséhez szükséges kommenteket.

Kódolási javaslatok: 

 szellős kód
 változókat ott definiálni, ahol először használjuk,
 csak a szükséges mennyiségű, helyi változó,
 rendszeres ellenőrző kód-részletek [„Trükkös Iván”: rendszeresen iktassunk be ellenőrző-feltételeket (pl. objektumok támogatásának vagy változók létezésének ellenőrzésére), hogy a kód hibás futására idejekorán fény derüljön, ill. ennek megakadályozására.]
 console.log(); parancs és Firebug konzol alkalmazása [alert(); helyett]!
 cca. 50 sornál hosszabb kód esetén elkülönítés új dokumentumba!

 Feltétlenül közöljük a felhasználóval, hogyha egy link vagy eseménykezelő új ablakra vagy lapra lép, az esetleges félreértések elkerülésére!

 Ne továbbítsunk formokat, irányítsunk át oldalakat a felhasználó tudta nélkül (automatikusan)!
 Kerüljük az olyan funkciók programozását, melyek a böngészőkben eleve megtalálhatók, mert azok általában többféle beviteli eszközzel, könnyebben használhatók! (Pl. „Vissza” gomb.)
 Ne „animáljuk” túl az oldalt, a statikusan vagy CSS-oldalról elérhető hatásokat ill. a böngésző alapértelmezett funkcióit használjuk inkább!
 Rendszeresen ellenőrizzük a böngészőben (a JS kikapcsolásával), hogy az oldal JS-támogatás nélkül is használható-e!

 Az elrejtett tartalmat is le kell töltenie a felhasználónak; takarékoskodjunk a letöltendő adatmennyiséggel!
 Inkább meglévő adatstruktúrákat dinamizáljunk, és ne magával a JS-tel generáljuk a tartalmat, menüket, egyéb passzív vagy aktív elemeket!

 A .focus(); ill. .blur(); módszereket csak a legszükségesebb esetben alkalmazzuk, mert megbontájk a formok tabulálásának alapértelmezett hieracrhiáját, ami a kitöltést nehezíti!