if statement

Status
Niet open voor verdere reacties.
J

jeel2008

Gebruiker
Lid geworden
30 okt 2008
Berichten
839
hallo, ik ben net in javascript gedoken en weet ff niet hoe ik dit moet aanpakken:

als een paragraaf bold is moet de tekst groen worden
als een paragraaf niet bold is , is de tekst blauw

hoe schrijf je dat nu netjes in een if statement?

ik kwam niet verder dan een klasse aanmaken 'pbold'.

maar hoe is de syntax verder?

Code: 
<script type="text/javascript">
 function bold {if (p= ........................)
 else (........................)
 </script>
 
[JS]function colorizeParagraphs()
{
var i,
pars = document.getElementsByTagName('p'),
len = pars.length;

for(i = 0; i < len; i++)
{
if(pars.style.fontWeight == 'bold')
{
pars.style.color = '#0f0'; // groen
}else{
pars.style.color = '#00f'; // blauw
}
}
}[/JS]
 
wow, bedankt,
maar...heb het ff geprobeerd, maar nadat ik mn paragraaf had bold (via een style, zie code) gemaakt, bleef de tekst mooi zwart.

is dit niet genoeg? :
Code: 
<p class="pbold">sjdflasjflkas fasf</p>

met in de header dit uiteraard:
Code: 
<style type="text/css">
<!--
.pbold {
	font-weight: bold;
}
-->
</style>

<script type="text/javascript">

function colorizeParagraphs()
{
   var i,
       pars = document.getElementsByTagName('p'),
       len = pars.length;
 
   for(i = 0; i < len; i++)
   {
      if(pars[i].style.fontWeight == 'bold')
      {
         pars[i].style.color = '#0f0';   // groen
      }else{
         pars[i].style.color = '#00f';   // blauw
      }
   }
}


  </script>

en pars.length...die lengte, wat heeft die ermee te maken?
 
Hier, ik zal de code uitleggen:

[JS]function colorizeParagraphs()
{
var i, /* de loop iterator variabele */
pars = document.getElementsByTagName('p'), /* een array met alle 'p' elementen */
len = pars.length; /* de lengte van de 'p' array */

for(i = 0; i < len; i++)
{
// voor elke paragraaf in de 'p' array,
if(pars.style.fontWeight == 'bold')
{
// als-ie bold is, maak dan de text groen
pars.style.color = '#0f0'; // groen
}else{
// anders: maak de text blauw
pars.style.color = '#00f'; // blauw
}
}
}[/JS]

Anyway, na heel even zoeken kwam ik er op uit dat het niet werkt; je zult iets van een custom getStyle functie moeten gebruiken. En dan heb je nog het probleem dat verschillende browsers verschillende waardes gebruiken: IE (9) en Firefox geven bijvoorbeeld 700 (bold) en 400 (normaal) terug, maar Chrome geeft bold en normal terug.

Zoiets werkt dus beter:
[JS]function colorizeParagraphs()
{
var i, s,
pars = document.getElementsByTagName('p'),
len = pars.length;


for(i = 0; i < len; i++)
{
s = getStyle(pars, 'font-weight');

if(s == 700 || s == 'bold')
{
pars.style.color = '#0f0';
}else{
pars.style.color = '#00f';
}
}
}[/JS]

hier m'n testpagina:
HTML: 
<!doctype html>


<html lang='en'>

   <head>

      <meta charset='utf-8' />

      <title>test</title>

      <style>

         .dikgedrukt
         {
            font-weight: bold;
         }

      </style>

   </head>

   <body>

      <p class='dikgedrukt'>

         deze zou groen moeten zijn!

      </p>

      <p>

         deze zou blauw moeten zijn!

      </p>

      <p class='dikgedrukt'>

         deze zou groen moeten zijn!

      </p>



       <script>



function getStyle(oElm, strCssRule){
	var strValue = "";
	if(document.defaultView && document.defaultView.getComputedStyle){
		strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
	}
	else if(oElm.currentStyle){
		strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
			return p1.toUpperCase();
		});
		strValue = oElm.currentStyle[strCssRule];
	}
	return strValue;
}


function colorizeParagraphs()
{
   var i, s,
       pars = document.getElementsByTagName('p'),
       len = pars.length;
 

   for(i = 0; i < len; i++)
   {
      s = getStyle(pars[i], 'font-weight');

      if(s == 700 || s == 'bold')
      {
         pars[i].style.color = '#0f0';
      }else{
         pars[i].style.color = '#00f';
      }
   }
}


colorizeParagraphs();

     </script>

   </body>

</html>
 
hallo That Guy,
van die 'lengte' ... hij loopt dus gewoon door die opdracht alle p's af, tot er geen meer zijn, als ik het goed begrijp.
in ieder geval bedankt. het werkt helemaal ok. heb het net ff gecheckt.
mvg jeel2008
 
van die 'lengte' ... hij loopt dus gewoon door die opdracht alle p's af, tot er geen meer zijn, als ik het goed begrijp.
Klik om te vergroten...

Ja, precies.


Over het algemeen (dit werkt precies hetzelfde in Java, C, C++, etcetera) werken if-statements zo:

[JS]for(initializer; condition; increment)
{
// block
}[/JS]

bijvoorbeeld:

[js]for(i = 0; i < 10; i++)
{
// block
}[/js]

waarbij eerst de initializer wordt aangeroepen, voor de lus begint. In dit geval wordt i op 0 gezet. Dan wordt elke keer voor het code-block is uitgevoerd, de condition bekeken. Als deze tot true wordt herleid wordt het block uitgevoerd, anders niet. In dit geval zolang de variabele i onder de 10 is. Het laatste, de increment, wordt elke keer na de loop uitgevoerd. In dit geval wordt i dus met 1 verhoogd.

Je kan if's ook gewoon in een while-lus zetten:

[JS]i = 0;

while(i < 10)
{
// block

i++;
}[/JS]

maar over het algemeen zijn for-lussen makkelijker.



In het geval van je vraag over de 'p's:

In een array worden alle paragraaf-elementen gezet. Zoiets:

[js]var pars = [paragraaf1, paragraaf2, paragraaf3];[/js]

je vraagt de lengte op van een array door de length property op te vragen. Dus:

[js]var len = pars.length; // geeft 3: er zitten 3 elementen in[/js]

nu, met de for-loop:

[js]for(i = 0; i < len; i++)[/js]

zeg je dus: loop door alle pars heen, vanaf 0, tot i < len. len is toevallig 3 in dit voorbeeld, dus hij zal van 0 tot en met 2 lopen (ofwel: van 0 tot 3). Arrays beginnen trouwens met element 0, dan 1, etcetera (mocht je dat nog niet door hebben).

Een element van een array kan je opvragen door het 'nummer' (de index) tussen rechten haken erachter te zetten:

[js]pars[1] // dat's dus 'paragraaf2'[/js]





:thumb:
 
Laatst bewerkt:
ok, klinkt allemaal logisch...
nu de praktijk nog :)
maar in ieder geval bedankt
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan