Avaleht
uus teema   vasta Tarkvara »  Programmeerimine »  segadus id ga JavaScript märgi kõik teemad loetuks
märgi mitteloetuks
vaata eelmist teemat :: vaata järgmist teemat
Hinnavaatlus :: Foorum :: Uudised :: Ärifoorumid :: HV F1 ennustusvõistlus :: Pangalink :: Telekavad :: HV toote otsing
autor
sõnum Saada viide sõbrale.  :: Teata moderaatorile teata moderaatorile
otsing:  
andrusny
Kreisi kasutaja
andrusny

liitunud: 20.03.2006




sõnum 07.03.2009 21:05:53 segadus id ga JavaScript vasta tsitaadiga

Tahan teha mitmele divile onmouseover functioni. Aga on täiesti seletamatu jama. Kui on kood:


ox="s"+1;
ux="p"+1;
document.getElementById(ux).onmouseover = function(){document.getElementById(ox).style.display='block';}
document.getElementById(ux).onmouseout = function(){document.getElementById(ox).style.display='none';}

ox="s"+2;
ux="p"+2;
document.getElementById(ux).onmouseover = function(){document.getElementById(ox).style.display='block';}
document.getElementById(ux).onmouseout = function(){document.getElementById(ox).style.display='none';}

jääb nii esimese div over kui teise div over selline mis on teisel divil.

kui muudetavasse divi kirjutada sisse id siis asi töötab. Milles viga? Miks ta ei pirtsuta selle ux sedasi? Ei aita ka see, kui teen ox='s1' ja teisele ox='s2'


ox="s"+1;
ux="p"+1;
document.getElementById(ux).onmouseover = function(){document.getElementById('s1').style.display='block';}
document.getElementById(ux).onmouseout = function(){document.getElementById('s1').style.display='none';}

ox="s"+2;
ux="p"+2;
document.getElementById(ux).onmouseover = function(){document.getElementById('s2').style.display='block';}
document.getElementById(ux).onmouseout = function(){document.getElementById('s2').style.display='none';}


müstika icon_eek.gif

_________________
Kommentaarid: 7 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 7
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
Valdars
HV veteran
Valdars

liitunud: 22.02.2003




sõnum 07.03.2009 21:28:05 vasta tsitaadiga

Asi peaks olema selles, et funktsiooni käivitumise hetkel ei ole muutuja väärtus enam see, mis ta oli funktsiooni loomisel.
Kommentaarid: 47 loe/lisa Kasutajad arvavad:  :: 0 :: 1 :: 44
tagasi üles
vaata kasutaja infot saada privaatsõnum
andrusny
Kreisi kasutaja
andrusny

liitunud: 20.03.2006




sõnum 07.03.2009 22:31:17 vasta tsitaadiga

Jah võimalik, kuid kuidas ma seda probleemi lahendaks? Mul oleks vaja asi automatiseerida, neid dive tuleb suvaline arv. Ei saa nii seda id sisse kirjutada.
_________________
Kommentaarid: 7 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 7
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
Valdars
HV veteran
Valdars

liitunud: 22.02.2003




sõnum 07.03.2009 22:34:58 vasta tsitaadiga

Funktsiooni sees on võimalik kätte saada seda elementi, mille peal seda välja kutsuti. Loe lähemalt.
Kommentaarid: 47 loe/lisa Kasutajad arvavad:  :: 0 :: 1 :: 44
tagasi üles
vaata kasutaja infot saada privaatsõnum
inzinz
HV kasutaja

liitunud: 26.01.2005




sõnum 07.03.2009 22:39:21 vasta tsitaadiga

Kasuta spets namingut näiteks, et div millele mouse funcid külge paned, selle id'd pane hoverdiv_1, hoverdiv_2 jne ja siis teistele pane showdiv_1, showdiv_2 jne.
Siis teed 2 funci:

function div_over() {document.getElementById(this.id.replace('hoverdiv_', 'showdiv_')).style.display='block';}
function div_out() {document.getElementById(this.id.replace('hoverdiv_', 'showdiv_')).style.display='none';}

document.getElementById('hoverdiv_1').onmouseover = div_over;
document.getElementById('hoverdiv_1').onmouseout = div_out;

document.getElementById('hoverdiv_2').onmouseover = div_over;
document.getElementById('hoverdiv_2').onmouseout = div_out;

//jne jne, või võid ka for loopiga neid panna

_________________
Upload.ee - eestimaine failiupload


viimati muutis inzinz 08.03.2009 02:43:47, muudetud 1 kord
Kommentaarid: 4 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 4
tagasi üles
vaata kasutaja infot saada privaatsõnum
andrusny
Kreisi kasutaja
andrusny

liitunud: 20.03.2006




sõnum 07.03.2009 23:52:59 vasta tsitaadiga

Tänud inzinz sigakaval lahendus ja väga hästi töötab!
_________________
Kommentaarid: 7 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 7
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
nene
Kreisi kasutaja
nene

liitunud: 20.03.2004




sõnum 08.03.2009 17:41:12 vasta tsitaadiga

Valdars tabas märki et:

Valdars kirjutas:
funktsiooni käivitumise hetkel ei ole muutuja väärtus enam see, mis ta oli funktsiooni loomisel.


Kuid JavaScripti puhul on võimalik, et loodav funktsioon jätab meelde, millises keskkonnas ta loodi ning ühtlasi pääseb ka ligi selles keskkonnas eksisteerivatele muutujatele. Selleks tuleb vastav funktsioon luua teise funktsiooni sees. Näiteks antud juhul niiviisi:

function makeHover(showdivId, hoverdivId) {
  var showdiv = document.getElementById(showdivId);
  var hoverdiv = document.getElementById(hoverdivId);
 
  showdiv.onmouseover = function(){
    hoverdiv.style.display = 'block';
  };
 
  showdiv.onmouseout = function(){
    hoverdiv.style.display = 'none';
  };
}

makeHover("showdiv_1", "hoverdiv_1");
makeHover("showdiv_2", "hoverdiv_2");


Kui funktsioon makeHover() esimest korda käivitatakse, siis tekitab ta uue keskkonna kus eksisteerivad parameetrid showdivId, hoverdivId ning kohalikud muutujad showdiv ja hoverdiv. Ja selles keskkonnas on nendel muutujatel konkreetsed väärtused ("hoverdiv_1", "hoverdiv_2" ja vastavad HTML-i elemendid, mis saadud getElementById abil). Lisaks luuakse selles keskkonnas kaks uut funktsiooni, mis saavad seotuks selle keskkonnaga. Ja isegi peale seda kui makeHover() on oma töö lõpetanud jäävad need kaks funktsiooni ikkagi seotuks selle keskkonnaga ning pääsevad ligi seal keskkonnas olevale muutujale hoverdiv.

Kui funktsioon makeHover() teist korda käivitatakse, siis tekitatakse uus keskkond, kus muutujatel on juba järgmised väärtused ("showdiv_2" ja "hoverdiv_2") ning taas luuakse kaks funktsiooni, mis saavad seotuks tolle uue keskkonnaga - nende funktsioonide jaoks viitab muutuja hoverdiv DIV-ile id-ga "hoverdiv_2", kuigi samal ajal on eelnevalt loodud kahe funktsiooni jaoks muutuja hoverdiv väärtuseks hoopis DIV id-ga "hoverdiv_1".

Sellist asja nimetatakse programmeerimises sulundiks. Ning see on igati korrektne viis antud probleemi lahendamiseks. Otsi ka märksõnu "functional programming", "lexical scope", "closure".

inzinz-i lahendus, nagu sa isegi mõistad, on paras häkk, ning töötab vaid kindla nimetamisskeemi puhul.

_________________
Mõistus otsas? Pane pinusse...
Kommentaarid: 24 loe/lisa Kasutajad arvavad:  :: 0 :: 1 :: 23
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
inzinz
HV kasutaja

liitunud: 26.01.2005




sõnum 08.03.2009 18:24:19 vasta tsitaadiga

No, kui ta ise programmeerib seda asja, siis kindla nimetamisskeemi tegemine ei ole nüüd küll mingisugune ületamatu probleem.

Kui hakata veelgi täpsemini norima, siis divelement.onmouseover = function() {} stiili kasutamine on ka paha-paha, kuna siis ei saa sinna teisi onmouseover funktsioone lisada ja seega korrektsem oleks kasutada addEventListener (IE puhul attachEvent) funktsioone icon_razz.gif

Aga see kapsuldamise asi on muidu jah norm teema, kuid kui seda väga paljude elementide puhul kasutada nii nagu sul toodud näites nene, siis kipub mälu ju ära sööma, kui iga divipaari puhuks tekitatakse uus kapseldus/keskkond, selle asemel et ühte ja sama funktsiooni taaskasutada. Ühe ja sama kindla funktsiooni omistamine onmouseover/onmouseout eventidele annab palju väiksema mälukulu. Ja kuna hetkel on teada et divide arv võib minna suureks, siis pigem hoida mälukulu pisemana koos kindla nimetamisskeemina kui et üritada ideaalset kapsuldamise efekti saada...

_________________
Upload.ee - eestimaine failiupload
Kommentaarid: 4 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 4
tagasi üles
vaata kasutaja infot saada privaatsõnum
Valdars
HV veteran
Valdars

liitunud: 22.02.2003




sõnum 08.03.2009 18:47:17 vasta tsitaadiga

Muuseas, kas inzinz või andrusny seda lahendust IE all on proovinud? Kui ma õieti mäletan, siis oli IE all probleem sellele elemendile viitamisega, mille küljes funktsioon oli ja mille jaoks ma juba lingi andsin.
Kommentaarid: 47 loe/lisa Kasutajad arvavad:  :: 0 :: 1 :: 44
tagasi üles
vaata kasutaja infot saada privaatsõnum
nene
Kreisi kasutaja
nene

liitunud: 20.03.2004




sõnum 08.03.2009 19:00:28 vasta tsitaadiga

inzinz kirjutas:
Ja kuna hetkel on teada et divide arv võib minna suureks, siis pigem hoida mälukulu pisemana koos kindla nimetamisskeemina kui et üritada ideaalset kapsuldamise efekti saada...


Seni kuni pole kindlalt teada, et neid dive tõesti tuleb väga suur arv, tuleks siiski hoiduda ülemäärasest optimeerimisest ning vältida kõiksuguseid häkke. Ja kui neid dive ka tuleb väga-väga suur arv, siis tuleks ikkagi mõõta, kas üks lahendus annab teise ees mingi olulise eelise. Võibolla võtab iga DIV juba ise nii palju brauseri mälu, et lisatud funktsioonid on selle kõrval tühised. Aga võib olla ka vastupidi.

Ning kui neid div-e tõesti on väga palju, siis võib olla on optimaalsem hoopis selline lahendus, kus mouseover ja mouseout handlerid defineeritakse hoopis konteinerelemendil ning siis selle handleri sees tehakse kindlaks, millisest div-ist sündmus lähtus.

Ja lõpuks, kui Andrusny saab aru kuidas minu näide töötab ning saab aru kuidas sellist koodi ka ise kirjutada, siis saab temast märksa parem JavaScripti programmeerija - ma julgeks öelda märksa parem programmeerija ükskõik millises keeles - sest ta saab mõistma kontseptsiooni, milleni enamik JavaScripti programmeerijaid ei küüni. Kahjuks ei saa seda öelda selle kavala replace-i kasutava koodi kohta.

_________________
Mõistus otsas? Pane pinusse...
Kommentaarid: 24 loe/lisa Kasutajad arvavad:  :: 0 :: 1 :: 23
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
andrusny
Kreisi kasutaja
andrusny

liitunud: 20.03.2006




sõnum 08.03.2009 19:10:09 vasta tsitaadiga

tsitaat:
Muuseas, kas inzinz või andrusny seda lahendust IE all on proovinud?

IE ga inzinz koodil probleeme pole. Kood läks pildi albumile mis hetkel on sellises seisus. Mingi jama on seal hoopis Operaga, näidatakse ainult viimast pildirida.

_________________
Kommentaarid: 7 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 7
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
inzinz
HV kasutaja

liitunud: 26.01.2005




sõnum 08.03.2009 19:44:52 vasta tsitaadiga

Ma olen javascriptis OOP koodi küll kirjutanud, näiteks korralik reaalajas form editor framework hiirega elementide nihutamiseks jne (mis ei ole avalikult üleval kusagil, vaid spets lehel kasutuses edukalt, cross browser töötav), seega seda pole vaja karta et ma OOP lähenemist ei oska kasutada ja ei saa asjast aru icon_razz.gif
Kui IE's on divi this.id ligipääsemisega probleeme nagu Valdars ütleb (IE7's mul ok, IE6 kohta ei tea hetkel), siis igaljuhul kapseldusmeetod parem, kuna töötab kindlalt ühtemoodi igal pool.
EDIT:
Opera probleemi lahendab kui kasutad sedasama nene poolt näidatud kapseldamise meetodit, nimelt paned funktsiooni looAlbum esimesele reale: var top=1;
Opera miskipärast resolvis top muutuja top window objektiks mitte sinu deklareeritud muutujaks algse väärtusega 1.

_________________
Upload.ee - eestimaine failiupload
Kommentaarid: 4 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 4
tagasi üles
vaata kasutaja infot saada privaatsõnum
nene
Kreisi kasutaja
nene

liitunud: 20.03.2004




sõnum 08.03.2009 20:48:42 vasta tsitaadiga

inzinz kirjutas:
Ma olen javascriptis OOP koodi küll kirjutanud, näiteks korralik reaalajas form editor framework hiirega elementide nihutamiseks jne (mis ei ole avalikult üleval kusagil, vaid spets lehel kasutuses edukalt, cross browser töötav), seega seda pole vaja karta et ma OOP lähenemist ei oska kasutada ja ei saa asjast aru icon_razz.gif


Hmmm... ma õigupoolest ei sihtinudki sinna pihta, nagu sina ei saaks aru, aga peab ütlema, et ma ei rääkinud sõnagagi objekt-orienteeritud programmeerimisest, pigem kaldus jutt funktsionaalse programmeerimise valdkonda.

Aga Andrusny, oled sa kaalunud mõne JavaScripti library kasutamist? Oleks märksa vähem vaeva cross-browser probleemide lahendamisega.

Ja oled sa kaalunud, et sellise asja asemel:

bg=Array();
bg[0]="pildidV/animalpanor.jpg";
bg[1]="pildidV/animals.jpg";
bg[2]="pildidV/animalsmass.jpg";
bg[3]="pildidV/bear1.jpg";
bg[4]="pildidV/birds.jpg";
bg[5]="pildidV/clink&cows.jpg";
bg[6]="pildidV/deer.jpg";
bg[7]="pildidV/ele1.jpg";


oleks märksa lihtsam kirjutada nii:

bg = [
  "pildidV/animalpanor.jpg",
  "pildidV/animals.jpg",
  "pildidV/animalsmass.jpg",
  "pildidV/bear1.jpg",
  "pildidV/birds.jpg",
  "pildidV/clink&cows.jpg",
  "pildidV/deer.jpg",
  "pildidV/ele1.jpg"
];


Ja oled sa kaalunud, et koodi võiks ka normaalselt treppida?

_________________
Mõistus otsas? Pane pinusse...
Kommentaarid: 24 loe/lisa Kasutajad arvavad:  :: 0 :: 1 :: 23
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
andrusny
Kreisi kasutaja
andrusny

liitunud: 20.03.2006




sõnum 08.03.2009 21:06:33 vasta tsitaadiga

tsitaat:
Mingi jama on seal hoopis Operaga, näidatakse ainult viimast pildirida.


No see oli ikka täiesti oma lollusest. (nagu palju muudki) Divi tegemise function is oli sisestatud muutuja nimega top ja Opera võttis seda kui object Window , muutsin muutuja nime ära ja korras. Imelik, et samas funktsioonis olev muutuja left operas seda viga esile ei kutsu.

tsitaat:
oleks märksa lihtsam kirjutada nii:
Selle teen kindlasti ringi, on parem jah. Lõpp versioonis, tahaks teha, et loeb pildid ise sisse. Treppimisega on mul suht raskusi. Omal on ka teinekord koodi lugemisega jama.

Kas seda Array ei peagi siis deklareerima (bg=Array(); ), kui kirjutan sinu viisil selle massiivi?

_________________
Kommentaarid: 7 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 7
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
Valdars
HV veteran
Valdars

liitunud: 22.02.2003




sõnum 08.03.2009 22:02:38 vasta tsitaadiga

tsitaat:

Treppimisega on mul suht raskusi.

Hea IDE on pool treppimist.
tsitaat:

Kas seda Array ei peagi siis deklareerima (bg=Array(); ), kui kirjutan sinu viisil selle massiivi?

Sellisel viisil deklareeritakse array automaatselt ära.
Kommentaarid: 47 loe/lisa Kasutajad arvavad:  :: 0 :: 1 :: 44
tagasi üles
vaata kasutaja infot saada privaatsõnum
näita postitusi alates eelmisest:   
uus teema   vasta Tarkvara »  Programmeerimine »  segadus id ga JavaScript
[vaata eelmist teemat] [vaata järgmist teemat]
 lisa lemmikuks
näita foorumit:  
 ignoreeri teemat 
sa ei või postitada uusi teemasid siia foorumisse
sa ei või vastata selle foorumi teemadele
sa ei või muuta oma postitusi selles foorumis
sa ei või kustutada oma postitusi selles foorumis
sa ei või vastata küsitlustele selles foorumis
sa ei saa lisada manuseid selles foorumis
sa võid manuseid alla laadida selles foorumis



Hinnavaatlus ei vastuta foorumis tehtud postituste eest.