probelm in a loop

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
panosru
WebDev Moderator
Δημοσιεύσεις: 1885
Εγγραφή: 13 Σεπ 2005 16:13
Τοποθεσία: Camp

probelm in a loop

Δημοσίευση από panosru » 16 Ιαν 2006 01:57

re paidia ores ores ayth h javascript mou spaei ta neyra!!
to parakato script den einai logiko na mhn paizei!!

Κώδικας: Επιλογή όλων

window.onload = menuLoadClassName ;

function menuLoadClassName ()
{
	for &#40;i = 0; i < 6; i ++ &#41; &#123;
		document.getElementById&#40;"p" + i&#41;.onmouseover = function &#40;&#41;
		&#123;
			document.getElementById&#40;"p" + i&#41;.className = "menu_txt_over";
		&#125;
		
		document.getElementById&#40;"p" + i&#41;.onmouseout = function &#40;&#41;
		&#123;
			document.getElementById&#40;"p" + i&#41;.className = "menu_txt";
		&#125;
	&#125;
&#125;
otan pao to mouse pano sto antikimeno me to sigkerimeno id mou bgazei to error:

Error: 'document.getElementById(...)' is null or not an object

alla sto loop tou for prosthesa ena alert gia na do an ontos einai null h den einai object kai ola htan object

Κώδικας: Επιλογή όλων

&#91;...&#93;
	for &#40;i = 0; i < 6; i ++ &#41; &#123;
		alert&#40;document.getElementById&#40;"p" + i&#41;&#41;;
&#91;...&#93;

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

probelm in a loop

Δημοσίευση από skeftomilos » 16 Ιαν 2006 04:25

Όταν κάνεις mouseover τρέχει ο εξής κώδικας:

Κώδικας: Επιλογή όλων

document.getElementById&#40;"p" + i&#41;.className = "menu_txt_over";
Ερώτηση: Τι τιμή έχει η i;
Απάντηση: 7!

Ας τα πάρουμε από την αρχή.

Μόλις φορτωθεί η σελίδα τρέχει η ρουτίνα menuLoadClassName(). Αυτή η ρουτίνα προκαλεί την παγίδευση των συμβάντων onmouseover και onmouseout για 7 elements της σελίδας (p0, p1, p2, p3, p4, p5, p6). Ο κώδικας μέσα στα συμβάντα δεν τρέχει ακόμα, μπορεί μάλιστα να μην τρέξει ποτέ. Όταν και αν περάσει το ποντίκι πάνω από τα παγιδευμένα elements, τότε θα τρέξει ο κώδικας των συμβάντων. Επομένως δε μπορείς να βασίζεσαι στην τιμή της i για να βρεις το σχετικό element. Ευτυχώς υπάρχει άλλος τρόπος να το βρεις και μάλιστα πολύ απλός, η ειδική τιμή this. Αυτό το keyword χρησιμοποιείται κυρίως μέσα στα συμβάντα και αναφέρεται στο τρέχον element που δέχτηκε το συμβάν.

Κώδικας: Επιλογή όλων

this.className = "menu_txt_over";
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

panosru
WebDev Moderator
Δημοσιεύσεις: 1885
Εγγραφή: 13 Σεπ 2005 16:13
Τοποθεσία: Camp

probelm in a loop

Δημοσίευση από panosru » 16 Ιαν 2006 14:35

nai ksero to this alla den ksero pos na to kano s' ayth thn periptosh :/

paratheto edo ton html kodika opou afora h parapano function

Κώδικας: Επιλογή όλων

<TABLE width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
	<TR>
		<TD class="menu_txt" id="p0" onClick="document.location.href='?act=0'">
			<IMG src="images/news_arrow.gif">&nbsp;Home
		</TD>
    </TR>                      
	<TR>
      <TD class="dot_3">
		 	<IMG src="images/spacer.gif" height="1">
		</TD>
	</TR>
    <TR>
		<TD class="menu_txt" id="p1" onClick="document.location.href='?act=1'">
			<IMG src="images/news_arrow.gif">&nbsp;Company
		</TD>
    </TR>                      
	<TR>
        <TD class="dot_3">
			<IMG src="images/spacer.gif" height="1">
		</TD>
    </TR>
    <TR>
		<TD class="menu_txt" id="p2" onClick="document.location.href='?act=2'">
			<IMG src="images/news_arrow.gif">&nbsp;Solutions
		</TD>
    </TR>                      
	<TR>
        <TD class="dot_3">
			<IMG src="images/spacer.gif" height="1">
		</TD>
    </TR>
    <TR>
		<TD class="menu_txt" id="p3" onClick="document.location.href='?act=3'">
			<IMG src="images/news_arrow.gif">&nbsp;Services
		</TD>
    </TR>                      
	<TR>
		<TD class="dot_3">
			<IMG src="images/spacer.gif" height="1">
		</TD>
    </TR>
    <TR>
		<TD class="menu_txt" id="p4" onClick="document.location.href='?act=4'">
			<IMG src="images/news_arrow.gif">&nbsp;Support
		</TD>
    </TR>                      
	<TR>
        <TD class="dot_3">
			<IMG src="images/spacer.gif" height="1">
		</TD>
    </TR>
    <TR>
		<TD class="menu_txt" id="p5" onClick="document.location.href='?act=5'">
			<IMG src="images/news_arrow.gif">&nbsp;Show Case
		</TD>
    </TR>                  
</TABLE>
den mporo na katalabo pos tha kano mia function me ena loop opou tha tha kanei change to class kathe menu xoris omos na balo sthn gtml onMouseOver kai onMouseOut

panosru
WebDev Moderator
Δημοσιεύσεις: 1885
Εγγραφή: 13 Σεπ 2005 16:13
Τοποθεσία: Camp

probelm in a loop

Δημοσίευση από panosru » 16 Ιαν 2006 14:47

me basi ayto pou les omos to i prepei na exei thn timi 6 giati sto for mou exo i <6 oxi i <= 6 me to this omos pos mporei na ginei ayto? :/ pos tha kserei se poio element tha prepei n' allaksei o className? :/

panosru
WebDev Moderator
Δημοσιεύσεις: 1885
Εγγραφή: 13 Σεπ 2005 16:13
Τοποθεσία: Camp

probelm in a loop

Δημοσίευση από panosru » 16 Ιαν 2006 16:16

edosa gia id se kathe menu to "p" anti gia to "p0","p2",..,"p5" pou eixa kai egrapsa ayth thn function:

Κώδικας: Επιλογή όλων

function menuLoadClassName &#40;&#41;
&#123;
	document.getElementById&#40;"p"&#41;.onmouseover = function &#40;&#41;
	&#123;
		this.className = "menu_txt_over";
	&#125;
	
	document.getElementById&#40;"p"&#41;.onmouseout = function &#40;&#41;
	&#123;
		this.className = "menu_txt";
	&#125;	
&#125;
me ayto omos (opos kai einai fysiko) mou allazei mono to 1o menu giati ola exoun idio id, exei kapoios kapoia idea? :/

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

probelm in a loop

Δημοσίευση από skeftomilos » 16 Ιαν 2006 21:32

Έτσι το δοκίμασες; Πρέπει να τρέχει λογικά.

Κώδικας: Επιλογή όλων

window.onload = menuLoadClassName ;

function menuLoadClassName &#40;&#41;
&#123;
   for &#40;i = 0; i < 6; i ++ &#41; &#123;
      document.getElementById&#40;"p" + i&#41;.onmouseover = function &#40;&#41;
      &#123;
         this.className = "menu_txt_over";
      &#125;
      
      document.getElementById&#40;"p" + i&#41;.onmouseout = function &#40;&#41;
      &#123;
         this.className = "menu_txt";
      &#125;
   &#125;
&#125;
Μια άσχετη παρατήρηση. Καλό είναι να μη χρησιμοποιούμε για navigation τα διάφορα συμβάντα onclick, αλλά το γνωστό και καλό <a>. Υπάρχουν πολλοί λόγοι και θα αναφέρω τρεις. Ο ένας είναι ότι χωρίς ενεργοποιημένη JavaScript οι υπόλοιπες σελίδες του site γίνονται μη προσβάσιμες. Ο δεύτερος είναι ότι ένας επισκέπτης δε μπορεί να μετακινηθεί εντός του site με το keyboard, πρέπει να χρησιμοποιήσει mouse. Ο τρίτος είναι ότι οι search engines δε θα βρουν τις σελίδες μας για να τις αρχειοθετήσουν.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

panosru
WebDev Moderator
Δημοσιεύσεις: 1885
Εγγραφή: 13 Σεπ 2005 16:13
Τοποθεσία: Camp

probelm in a loop

Δημοσίευση από panosru » 16 Ιαν 2006 22:53

paizei!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

$skeytomilos++;

respect @ skeytomilos!

btw :P :P :P :P

pos mporo na exo parapano apo ena function sto window.onload ? :D :D

episei!!!!
ayto:
Ο ένας είναι ότι χωρίς ενεργοποιημένη JavaScript οι υπόλοιπες σελίδες του site γίνονται μη προσβάσιμες.
kai ayto:
Ο τρίτος είναι ότι οι search engines δε θα βρουν τις σελίδες μας για να τις αρχειοθετήσουν.

den ta skeytika!!!
thanks! tha t' allakso!

PS: javascript = ponokefalos!!!

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

probelm in a loop

Δημοσίευση από skeftomilos » 17 Ιαν 2006 04:54

Η αλήθεια είναι μάλλον αυτή που λες, τελικά δεν είναι και τόσο εύκολη σαν γλώσσα. Όποιος ασχοληθεί μαζί της πρέπει κατ' ανάγκη να μαθαίνει παράλληλα και άλλα πράγματα, λίγη HTML, λίγο CSS και λίγο DOM. Από την άλλη έχει τη δική της γοητεία. Κάνοντας ένα πρόγραμμα π.χ. σε VB θα το δουν άλλοι πέντε γνωστοί και συγγενείς, ενώ κάνοντας ένα ωραίο σκριπτάκι σε JS μπορεί να το δουν εκατοντάδες άνθρωποι σε όλο τον κόσμο. Και κανείς από αυτούς δε θα φοβηθεί μήπως το πρόγραμμα κουβαλάει κάποιον ιό στον υπολογιστή του. Ενώ με τα exe υπάρχει πάντα η καχυποψία.

Για mouseover effects συνήθως δε χρειάζεται JavaScript, το CSS αρκεί.

Κώδικας: Επιλογή όλων

a&#58;link &#123; background-color &#58; pink &#125;
a&#58;hover &#123; background-color &#58; yellow &#125;
Μετά μπορείς να αυξήσεις το padding στα links ώστε να μεγαλώσει η επιφάνεια που προκαλεί το εφέ:

Κώδικας: Επιλογή όλων

a&#58;link &#123; padding &#58; 10px &#125;
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
cherouvim
Script Master
Δημοσιεύσεις: 3137
Εγγραφή: 13 Ιούλ 2005 22:56
Τοποθεσία: Athens, Greece
Επικοινωνία:

probelm in a loop

Δημοσίευση από cherouvim » 17 Ιαν 2006 08:21

client side code (javascript) = user experience enchancements
server side code (php/jsp/asp/perl) = core functionality

Κώδικας: Επιλογή όλων

window.onload = init;

function init&#40;&#41; &#123;
  applyFormsBehaviour&#40;&#41;;
  applyHoveringBehaviour&#40;&#41;;
  focusOnFirstInput&#40;&#41;;
&#125;

panosru
WebDev Moderator
Δημοσιεύσεις: 1885
Εγγραφή: 13 Σεπ 2005 16:13
Τοποθεσία: Camp

probelm in a loop

Δημοσίευση από panosru » 17 Ιαν 2006 14:38

thanks skeftomile kai cherouvim! :D

episeis..

to DOM den einai komath ths javascript? :/

Άβαταρ μέλους
cherouvim
Script Master
Δημοσιεύσεις: 3137
Εγγραφή: 13 Ιούλ 2005 22:56
Τοποθεσία: Athens, Greece
Επικοινωνία:

probelm in a loop

Δημοσίευση από cherouvim » 17 Ιαν 2006 15:04

To DOM (Document Object Model) einai to modelo enos XML symvatou keimenou.
H JavaScript einai mia glossa programatismou pou sinithos trexei stous browsers kai hrisimopoiei to DOM otan thes na epeksergasteis ena html document. Kai afto giati to HTML document einai (shedon) ena XML compliant document. To parakato javascript programa den hrisimopoiei katholou to DOM.

Κώδικας: Επιλογή όλων

var foo=5;
var bar=foo+10;
alert&#40;bar&#41;;
Opote den einai akrivos komati tis Javascript. Mporeis na miliseis se afto mesa apo vivliothikes me tis opies tha epeksergasteis XML documents mesa apo Java, Python, PHP, C++, Ruby ktl. Apla sti Javascript me to pou trexei to programa sou yparxei idi sti mnimi to DOM tou trehontos html keimenou kai exei reference sti metafliti document.

panosru
WebDev Moderator
Δημοσιεύσεις: 1885
Εγγραφή: 13 Σεπ 2005 16:13
Τοποθεσία: Camp

probelm in a loop

Δημοσίευση από panosru » 17 Ιαν 2006 15:25

xm... i c...

agorasa to javascript bible 5th edition kai to diabazo tora! :D

ntaksi na leme tou logou to alhthes einai ponokefalos h javascript re gmt :S

to problhma omos me thn javascript bible einai pos apla sou eksigei ta functions tis syntakseis ta properties sou ta analyei ktl ola oraia ola kala alla den sou leei texnikes kai methodous :/

Άβαταρ μέλους
cherouvim
Script Master
Δημοσιεύσεις: 3137
Εγγραφή: 13 Ιούλ 2005 22:56
Τοποθεσία: Athens, Greece
Επικοινωνία:

probelm in a loop

Δημοσίευση από cherouvim » 17 Ιαν 2006 16:37

Otan piaseis to noima tha deis oti me 5 entoles mporeis na kaneis oti theleis.

Keep it up

panosru
WebDev Moderator
Δημοσιεύσεις: 1885
Εγγραφή: 13 Σεπ 2005 16:13
Τοποθεσία: Camp

probelm in a loop

Δημοσίευση από panosru » 17 Ιαν 2006 16:50

mexri na poiaso to nohma sthn javascript ... :P :P :P

pantos exo thn entyposh (tha me skisei o rapid!!) pos poio eykola matheneis php para javascript :/

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

probelm in a loop

Δημοσίευση από skeftomilos » 18 Ιαν 2006 01:36

Υπάρχει κι άλλος ένας τρόπος για να εκτελεστούν πολλές ρουτίνες στο onload που είναι θεωρητικά προτιμότερος, αλλά στην πράξη υπάρχουν κάποιες δυσκολίες:

Κώδικας: Επιλογή όλων

window.addEventListener&#40;'load', menuLoadClassName&#41;
window.addEventListener&#40;'load', katiAllo&#41;
Το πλεονέκτημά του είναι ότι μπορείς να προσθέτεις ρουτίνες για το onload ακόμα και όταν δεν έχεις τον απόλυτο έλεγχο της σελίδας. Σκέψου για παράδειγμα την περίπτωση που δύο scripters γράφουν παράλληλα κώδικα για την ίδια σελίδα, και θέλουν και οι δύο να γράψουν στον κώδικά τους window.onload = kati. Πρόβλημα.

Η δυσκολία είναι ότι δεν τρέχει στον IE. Αυτός προτιμάει να ονομάζει τη σχετική μέθοδο αλλιώς:

Κώδικας: Επιλογή όλων

window.attachEvent&#40;'onload', menuLoadClassName&#41;
window.attachEvent&#40;'onload', katiAllo&#41;
Επομένως ο μόνος τρόπος να χρησιμοποιηθεί αυτή η μέθοδος είναι με συνδυασμό των δύο μεθόδων:

Κώδικας: Επιλογή όλων

function addEvent&#40;obj, evType, fn&#41;&#123;
  if &#40;obj.addEventListener&#41;&#123;
    obj.addEventListener&#40;evType, fn&#41; //Firefox, Opera
  &#125; else if &#40;obj.attachEvent&#41;&#123;
    obj.attachEvent&#40;'on' + evType, fn&#41; //IE, Opera
  &#125;
&#125;

addEvent&#40;window, 'load', menuLoadClassName&#41;
addEvent&#40;window, 'load', katiAllo&#41;
Τώρα το συμβάν θα τρέξει σε όλους τους browsers, εκτός από τον IE5/Macintosh. Μικρό το κακό. Υπάρχει άλλη μια πολύ πιο ενδόμυχη δυσκολία, σχετική με το keyword this. Είναι μάλλον απίθανο να τη βρεις μπροστά σου στο κοντινό μέλλον οπότε μην ανησυχείς. Αν θέλεις να μάθεις όλη την ιστορία δες εδώ: addEvent() considered harmful.

Σχετικά με τη σχέση JavaScript και DOM, είναι δύο διαφορετικά πράγματα. Το DOM είναι ένα σύνολο αντικειμένων που επιδέχονται προγραμματιστικού χειρισμού. Για παράδειγμα όταν γράφεις:

Κώδικας: Επιλογή όλων

document.location.href = '?act=5'
...έχεις προκαλέσει μία ενέργεια στο αντικείμενο location, το οποίο έχει σχέση γονέας-παιδί με το αντικείμενο document.

Από την άλλη μεριά η JavaScript είναι μία γλώσσα που μπορεί να χειρίζεται software αντικείμενα. Από μόνη της είναι εντελώς ανίκανη να κάνει οτιδήποτε, ακόμα και να εμφανίσει ένα οποιοδήποτε μήνυμα. Ούτε αυτή η απλή εντολή δεν είναι καθαρή JavaScript:

Κώδικας: Επιλογή όλων

alert&#40;'Hello!'&#41;
Η alert() είναι μέθοδος του αντικειμένου window, που είναι το κορυφαίο αντικείμενο στο DOM μιας HTML σελίδας. Αν γράφεις κώδικα JavaScript εκτός Web, π.χ. μία windows utility, η alert δεν είναι διαθέσιμη. Εκεί υπάρχει άλλο διαφορετικό Object Model, π.χ. στον WSH τα μηνύματα βγαίνουν με...

Κώδικας: Επιλογή όλων

WScript.Echo&#40;'Hello!'&#41;
Η JavaScript είναι μια embedded γλώσσα, πολύ κατάλληλη για scripting εφαρμογών. Αν για παράδειγμα έφτιαχνες ένα πρόγραμμα που τυπώνει φακέλους θα μπορούσες να δώσεις στο χρήστη αρκετές επιλογές για τον τρόπο εκτύπωσης των φακέλων. Αν ήθελες όμως να του δώσεις απόλυτη ευελιξία θα μπορούσες να ενσωματώσεις μία scripting γλώσσα στην εφαρμογή σου, ώστε να μπορεί ο χρήστης να αυτοματοποιήσει τις διάφορες εργασίες κατά την εκτύπωση γράφοντας scripts. Σε αυτή την περίπτωση θα προμήθευες ο ίδιος το DOM το οποίο θα χειριζόταν η JavaScript. Δε θα χρειαζόταν να φτιάξεις ο ίδιος τον parser των scripts γιατί υπάρχουν πολλοί που είναι διαθέσιμοι δωρεάν, Π.χ. : SpiderMonkey (JavaScript-C) Engine, Rhino (JavaScript-Java) Engine.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης