Šiais laikais vartotojui nebeužtenka HTML. Sakydamas nebeužtenka turiu omeny, kad jam nebetiks baltas lapas su truputėliu teksto, keliais paveiksliukais bei nuorodom. Puslapiui reikia suteikti savotiško jaukumo, patogumo, dinamiškumo, o tai galima pasiekti CSS ir pagalba. Kodėl pridėjau dar ? Nes ją skirtingai nuo CSS ar to pačio HTML galima pavadinti skriptų programavimo kalba, tiksliau ne galima bet taip ir yra. “Drop-down” meniu, patvirtinimo lentelės (angl. confirm box), minimalios animacijos, viską galima pasiekti būtent šios kalbos pagalba, taip suteikiant vartotojui didesnį patogumą. Tad bent minimaliai ją mokėti reikia.

Taigi kuo (toliau “JS”) skiriasi nuo mums visiems taip gerai žinomo PHP? Technine prasme skiriasi tuo, kad JS atliekama kliento pusėje, kaip ir HTML, o PHP, kaip žinia, atliekama serveryje. Sintaksiškai JS ir PHP - labai panašios, jei ne skirtingas OOP modelis (apie kurį šiek tiek vėliau), jas būtų galima laikyti 90% identiškomis. Yra nemažai naudingų pamokų apie tai, tad čia aptarsiu tik PHP ir JS skirtumus konkrečiais atvejais. Straipsnis remsis tuo, kad skaitytojas orientuojasi PHP, išmano CSS pagrindus bei (x)HTML struktūrą.

Visų pirma reikia suprasti, kad pilnai remiasi objektiniu programavimu (toliau OOP). Tai reiškia, kad visi globalūs kintamieji ir metodai (ar funkcijos) yra prieinami per kažkokius kitus modelius.
Įsivaizduokime, kad turime PHP objektą $masina. Norėdami “nudažyti” priekines kairiasias dureles raudonai mums užtenka $masina->priekines_kairiasias=”raudona”, o norint tą patį su JS, masina.priekines.priekines_kairiasias=”raudona”, t.y. norint prieiti prie galinio metodo ar kintamojo reikia praeiti pro visus “tėvus” (angl. parents). Kaip matote tai pasiekiama panaudojus operatorių “.”, kuris taip pat naudojamas Delphi. Aplamai nemažai dalykų bus Delphi (iš tiesų Java, manau, tik kad pasakius Delphi/Pascal bus lengviau įsivaizduoti) ir C mišiniu.
Dabar praktinis pavyzdys. Norime iššaukti parent window alert metodą. Tai padarysime tik prie jo priėję, t.y. window.parent.alert(”kazkas”);
Javascript Object Layout
(Šaltinis: MollyPages.org)

Kintamieji
Kintamuosius deklaravus (raktažodis var) funkcijos išorėje jie tampa globalūs, o (re)deklaravus viduj, tai funkcijai lokalūs. Nereikia “$” ženklo. JS svarbus kintamųjų tipas. String’as negali būti sudedamas kaip integer. Prieš tai būtina panaudoti parseInt().

Operatoriai
Operatorius “.” JS yra naudojamas OOP.
Operatorius “+” - sujungti simbolių eilutes.

Ciklai
Nėra foreach.

Masyvai
arr = new Array(); - kiekvienas masyvas turi savo ilgį tarp savybių - arr.length, praktinis panaudojimas for(var i=0; i<arr.length; i++)

(x)HTML aprodojimas
Pasiekti kažkokį unikalų elementą (unikalumą suteikia id) galima document.getElementById() metodu, kelis elementus turinčius tą patį vardą - document.getElementsByName(). Kiekvienas gautas HTML elementas gauną krūvą savybių atsižvelgiant į jo tipą. Beveik visada jis gauna “style“, t.y. gaunamas priėjimas prie CSS manipuliavimo konkrečiai tam elementui. Pavyzdžiui, elemento dingimas/atsiradimas kas 1 sekndę:

var id = "kazkas";
function keisk(){
var el = document.getElementById(id);
el.style.display = el.style.display=="none" ? "block" : "none";
setTimeout("keisk("+el.id+")", 1000);
}
window.onload = keisk;

var id = “kazkas”; - nurodom elemento id
function keisk(){ - pradedam funkcijos keisk deklaravimą
var el = document.getElementById(id); - kintamajam el priskiriam rodyklę kuri nurodo dokumente esantį elementą pagal id. Kodėl tai atliekama funkcijoj? Tuoj bus aišku.
el.style.display = el.style.display==”none” ? “block” : “none”; - įprastinis C sąlygos sakinys veikiantis ir PHP. Jeigu el.style.display yra “none“, pakeičiam į “block” ir atvirkščiai.
setTimeout(”keisk()”, 1000); - tai tarsi ciklas su 1000ms (1s) pertraukimais, nurodom funkciją bei reikalingus kintamuosius jei reikia.
} - užbaigiam funkcijos deklaravimą
window.onload = keisk; - nurodom vykdyti keisk() funkciją tik pasikrovus puslapiui. To reikia tam kad užtikrintume, jog tarp <head> aprašytas kodas neieškotų dar neaprašytų elementų <body> sekcijoje. Tam ir reikėjo elementą el deklaruoti viduj, paprasčiausiai JS viską vykdo iš eilės, o tuo metu kol ieškoma elemento pagal id jis juk dar neįkeltas.

Atrodo lengva, tiesa? O kaip su animacija? Viskas vėlgi pasiekiama su CSS. Visų pirma nurodom position:relative; ir atitinkamą z-index bei overflow, vėliau su JS keičiam “top” bei “left” pasitelkiant setTimeout arba setInterval.

Ieškoti klaidų (angl. debug) JS ne taip lengva kaip PHP. Kartais klaidos tikrai būna labai gerai pasislėpusios ir nurodoma net ne ta bloga eilutė. Mėgstu naudoti hidden iframe metodą, tad tokias klaidas dar sunkiau aptikti. Iš tiesų būtų neįmanoma, jei ne Firefox naršyklės priedas firebug, tikrai rekomenduoju jį įsigyti testuojant JS scenarijus. Taip pat turėkit omeny, kad skirtingos naršyklės skirtingai suvokia JS. Kurdami paprastus scenarijus to nepastebėsite, bet iškart bandant prieiti prie daugiau globalių kintamųjų, teks rašyti atskiras kodo dalis skirtingoms naršyklėms.

Nepaisant visų kančių, JS mokėti reikia. Pasaulis nenumaldomai artėja prie tos akimirkos kai ne vien “geek`ai” žiniatinklį suvoks kaip platformą, kai tinklalapis be AJAX atrodys kaip seniena, o viską valdys, kaip tikimasi, vis tobulėjantis , kuris jau turi pakankamai galios realaus laiko 3D paveikslėlių generavimui (http://www.uselesspickles.com/triangles/demo.html). naudojamas tiek naršyklių prieduose, tiek įvairioje programinėje įrangoje. Taip pat yra kalbų, kurios turi nemažai panašumų su šia kalba (pvz., ActionScript).

Pabaigai štai keletas naudingų patarimų. Jei gražintumėm žymėms (angl. tags) prierašą (angl. anchor) - <a> bei formą - <form> false, jie neatliktų savo paskirties. Pvz.: <a href=”logout.php” onclick=”return confirm(’tikrai norite atsjungti?’);”>atsijungti</a> aktyvus onclick (DHTML savybė) bus iššaukta lentelė su parašytu tekstu ir ok/cancel, priklausomai nuo varianto pasirinkimo grąžinamas true arba false, jei true - tęsiam toliau, jei false, vartotojas nepalieka puslapio. Tas pats ir su forma, surenkam visus input’us, patikrinam, jei randam klaidų, pranešam vartotojui bei grąžinam formai false (su onsumbit()). Tiesa, niekada negalima pasikliauti tik JS, nes tai yra client side kalba, vartotojas gana nesunkiai gali apeiti visus tikrinimus bei AJAX atveju netgi duoti netikras užklausas.

Verta paskaityti:
http://ajaxian.com/by/topic/javascript/
JavaScript Bible, Gold Edition

Panašūs straipsniai


“JavaScript - būtinybė, o ne privalumas” komentarų: 3

  1. Dalius

    1. Taigi taip ir neatsakei kodėl JavaScript būtinybė.
    2. Didelis riebus minusas už tai, kad nepaminėjai, kad naršyklių nesuderinamumus reikia spręsti naudojant kažkokias bibliotekas (kad ir jQuery). Tada ir foreach atsiras ir kiti reikalingi dalykai ;)
    3. Javascript gal ir turi galios, bet kompiuteris tai ūžia :)

    Šiaip neblogas straipsniukas.

  2. ziogas

    Dėkui už komentarus, šiaip rašyti straipsnius blogui pradėjau ne taip ir senai, tad kartais sunkoka sugalvot tinkamus pavadinimus ar gerai dėstyt mintis, stengsiuos tobulėt :D

  3. neytema

    Straipsnio pavadinimas klaidinantis ir neatitinkantis turinio visiskai. Plius HTML ir CSS pilnai uzhtenka vartotojo poreikiams patenkinti (jei tai nera video ir kita multimedia…).

Rašyti komentarą

Jūs privalote prisijungti jeigu norite rašyti komentarą.