EvoComp - JavaScript Sprachelemente: Die JavaScript For Schleife (For-Statement)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>EvoComp - JavaScript Sprachelemente: Die JavaScript For Schleife (For-Statement)</title> <meta name="description" content="JavaScript For: Schleifen zur mehrfachen Ausführung von Anweisungen oder Anweisungsblöcken." /> <meta name="keywords" lang="de" content="javascript for,javascript,java script,javascripts,schleifen,schleife,for-statement,for,for-schleife,beispiele,beispiel" /> <meta name="language" content="de" /> <meta http-equiv="content-language" content="de" /> <meta name="robots" content="index,follow,noarchive" /> <meta name="date" content="2008-08-11"> <meta name="DC.Date" content="2008-08-11"> <base href="http://www.evocomp.de/beispiele/javascript/for.html"> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <meta name="author" content="Alexander Müller"> <meta name="DC.Creator" content="Alexander,Müller"> <meta name="DC.Publisher" content="Alexander,Müller"> <meta name="DC.Contributor" content="Alexander,Müller"> <meta name="DC.Type" content="Text"> <meta name="DC.Format" content="text/html"> <meta name="DC.Identifier" content="http://www.evocomp.de/"> <meta http-equiv="expires" content="0"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="icon" href="/favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"> <link rel="stylesheet" type="text/css" href="/portal.css"> <script src="/portal.js" type="text/javascript"></script> <meta name="revisit-after" content="15 days"> <meta http-equiv="pragma" content="no-cache"> <meta name="audience" content="Alle"> </head> <body> <a id="top" name="top"><img class="transparent" border="0" name="icount" src="/pic/transparent.gif" alt=""></a> <script language="javascript" type="text/javascript">  </script> <a href="/" title=""><img class="logo" border="0" src="/pic/logo_evocomp.jpg" alt=""></a> <p class="banner"> <a href="http://www.kunstundreisen.de" rel="nofollow" title="" target="_blank"><img border="0" src="http://www.kunstundreisen.de/mehr/verlinkung/grafiken/kunstundreisen_468_60.gif" width="468" height="60" alt=""></a> <img border="0" src="/pic/ad.gif" alt=""> </p> <div id="container"> <ul id="topmenu"> <li><a href="/index.html" title="Startseite">Home</a></li> <li><a href="/sitemap.html" title="Seitenstruktur">Sitemap</a></li> <li><a href="/contact.html" title="Kontakt">Kontakt</a></li> <li><a href="/imprint.html" title="Impressum">Impressum</a></li> </ul> <div id="contentcontainer"> <div id="breadcrumb">Sie sind hier: <a href="/index.html" title="Startseite">Home</a> :: <a href="/beispiele/beispiele.html" title="Beispiele Script">Beispiele</a> :: <a href="/beispiele/javascript/javascripts.html" title="JScript / JavaScripts / JavaScript Beispiele">JavaScript</a> :: <a href="/beispiele/javascript/for.html" title="for Java Script">For</a> </div> <div id="sample"> <ul> <li>Beispiele</li> <li>Methoden</li> <li><a href="/beispiele/javascript/alert.html" title="java script alert javascript">» alert</a></li> <li><a href="/beispiele/javascript/back.html" title="window back javascript">» back</a></li> <li><a href="/beispiele/javascript/clearinterval.html" title="clearinterval javascript">» clearInterval</a></li> <li><a href="/beispiele/javascript/cleartimeout.html" title="cleartimeout javascript">» clearTimeout</a></li> <li><a href="/beispiele/javascript/window-close.html" title="javascript window close javascript">» close</a></li> <li><a href="/beispiele/javascript/confirm.html" title="window confirm javascript">» confirm</a></li> <li><a href="/beispiele/javascript/getelementbyid.html" title="document getelementbyid javascript">» getElementById</a></li> <li><a href="/beispiele/javascript/indexof.html" title="indexof javascript">» indexOf</a></li> <li><a href="/beispiele/javascript/window-open.html" title="javascript window open javascript">» open</a></li> <li><a href="/beispiele/javascript/print.html" title="window print javascript">» print</a></li> <li><a href="/beispiele/javascript/prompt.html" title="window prompt javascript">» prompt</a></li> <li><a href="/beispiele/javascript/reload.html" title="java script reload javascript">» reload</a></li> <li><a href="/beispiele/javascript/location-replace.html" title="java script replace javascript">» replace (Location)</a></li> <li><a href="/beispiele/javascript/setinterval.html" title="window setinterval javascript">» setInterval</a></li> <li><a href="/beispiele/javascript/settimeout.html" title="window settimeout javascript">» setTimeout</a></li> <li><a href="/beispiele/javascript/split.html" title="split javascript">» split</a></li> <li><a href="/beispiele/javascript/substring.html" title="substring javascript">» substring</a></li> <li><a href="/beispiele/javascript/write.html" title="document write javascript">» write</a></li> <li>Eigenschaften</li> <li><a href="/beispiele/javascript/location-href.html" title="location href javascript">» href (Location)</a></li> <li><a href="/beispiele/javascript/document-url.html" title="url javascript">» url</a></li> <li>Objekte</li> <li><a href="/beispiele/javascript/array.html" title="java script array javascript">» Array</a></li> <li><a href="/beispiele/javascript/date.html" title="javascript datum,zeit / time,date javascript">» Date</a></li> <li><a href="/beispiele/javascript/document.html" title="java script document javascript">» Document</a></li> <li><a href="/beispiele/javascript/event.html" title="event javascript">» Event</a></li> <li><a href="/beispiele/javascript/history.html" title="java script history javascript">» History</a></li> <li><a href="/beispiele/javascript/location.html" title="java script location javascript">» Location</a></li> <li><a href="/beispiele/javascript/string.html" title="java script string javascript">» String</a></li> <li><a href="/beispiele/javascript/style.html" title="CSS Style javascript">» Style (CSS)</a></li> <li><a href="/beispiele/javascript/window.html" title="java script window javascript">» Window</a></li> <li>Ereignisse (Events)</li> <li><a href="/beispiele/javascript/event-onclick.html" title="onclick javascript">» onclick</a></li> <li><a href="/beispiele/javascript/event-onload.html" title="onload javascript">» onload</a></li> <li><a href="/beispiele/javascript/event-onchange.html" title="onchange javascript">» onchange</a></li> <li>Sprache</li> <li><a href="/beispiele/javascript/for.html" title="for javascript">» for</a></li> <li><a href="/beispiele/javascript/for-in.html" title="for in javascript">» for in</a></li> <li><a href="/beispiele/javascript/for-each.html" title="for each javascript">» for each</a></li> <li><a href="/beispiele/javascript/function.html" title="function javascript">» function</a></li> <li><a href="/beispiele/javascript/if.html" title="if javascript">» if</a></li> <li><a href="/beispiele/javascript/switch.html" title="switch javascript">» switch</a></li> <li><a href="/beispiele/javascript/while.html" title="while javascript">» while</a></li> <li><a href="/beispiele/javascript/do-while.html" title="do while javascript">» do ... while</a></li> <li><a href="/beispiele/javascript/variable.html" title="variable javascript">» Variable</a></li> <li><a href="/beispiele/javascript/try-catch.html" title="try javascript">» try (Exceptions)</a></li> <li>Ajax</li> <li><a href="/beispiele/javascript/ajax.html" title="ajax javascript">» Ajax</a></li> <li>Sonstiges</li> <li><a href="/beispiele/javascript/bilder.html" title="bilder javascript">» Bilder</a></li> <li><a href="/beispiele/javascript/browser.html" title="browser javascript">» Browser</a></li> <li><a href="/beispiele/javascript/checkbox.html" title="checkbox javascript">» Checkbox</a></li> <li><a href="/beispiele/javascript/cookies.html" title="cookies javascript">» Cookies</a></li> <li><a href="/beispiele/javascript/countdown.html" title="countdown javascript">» Countdown</a></li> <li><a href="/beispiele/javascript/cursor.html" title="cursor javascript">» Cursor</a></li> <li><a href="/beispiele/javascript/div.html" title="div javascript">» DIV</a></li> <li><a href="/beispiele/javascript/dom.html" title="dom javascript">» DOM</a></li> <li><a href="/beispiele/javascript/fenster.html" title="html fenster javascript">» Fenster</a></li> <li><a href="/beispiele/javascript/form.html" title="form javascript">» Form</a></li> <li><a href="/beispiele/javascript/html.html" title="html javascript">» HTML</a></li> <li><a href="/beispiele/javascript/popup.html" title="popup javascript">» PopUp</a></li> <li><a href="/beispiele/javascript/redirect.html" title="redirect javascript">» redirect</a></li> <li><a href="/beispiele/javascript/submit.html" title="submit javascript">» submit</a></li> <li><a href="/beispiele/javascript/textarea.html" title="textarea javascript">» Textarea</a></li> <li><a href="/beispiele/javascript/trim.html" title="string trim javascript">» trim String</a></li> <li><a href="/beispiele/javascript/void.html" title="void javascript">» void</a></li> <li><a href="/beispiele/javascript/xml.html" title="xml javascript">» XML</a></li> </ul> </div> <h1 class="notopmargin">JavaScript For</h1> <p class="norm"> Das <strong>JavaScript For-Statement</strong> dient der <strong>mehrfachen Ausführung von Anweisungen oder Anweisungsblöcken</strong> und gehört, zusammen mit der while und der do-while-Schleife, zu den Anweisungen, die zur <strong>Implementierung von Schleifen</strong> vorgesehen sind. Bei der <strong>For-Schleife</strong> wird schon vorher (vor Eintritt in die Schleife) festgelegt, wie oft eine <strong>Anweisung oder ein Anweisungsblock</strong> ausgeführt werden soll. </p> <p class="norm"> Dies geschieht, indem eine <strong>Zählervariable</strong> – im Normalfall handelt es sich dabei um eine Integer-Variable – eingeführt wird, die einen <strong>Startwert</strong>, eine <strong>Abbruchbedingung</strong> und einen Term zur Veränderung der <strong>Zählervariablen</strong> erhält. Nach jedem Durchlauf der Schleife wird die Zählervariable gemäß dieser Vorgabe verändert. Wenn die Abbruchbedingung erfüllt ist, wird mit den im Programmcode auf die For-Schleife folgenden Anweisungen fortgefahren. Eine For-Anweisung hat folgende Form: <pre> for (Variablenname = <span class="kursiv">Startwert</span>; <span class="kursiv">Abbruchbedingung(en)</span>; <span class="kursiv">Veränderung</span>) [{] <span class="kursiv">Anweisung(en)</span> [}] </pre> </p> <p class="norm"> Soll lediglich eine einzige <strong>Anweisung innerhalb der Schleife</strong> ausgeführt werden, so erübrigen sich die geschweiften Klammern. Diese werden nur benötigt, wenn bei jedem <strong>Schleifendurchgang</strong> ein Block mit mehreren Anweisungen ausgeführt werden soll. Eine weitere Variante der For-Schleife ist die <a href="/beispiele/javascript/for-in.html" title="for in java script">For-in-Schleife</a>. Im Gegensatz zur Standard-Variante der <strong>For-Anweisung</strong> werden die einzelnen Werte, welche die Zählervariable annehmen soll, aus den Objekt-Eigenschaften eines angegebenen Objekts extrahiert. Ab der JavaScript-Version 1.7 wird zudem ein <a href="/beispiele/javascript/for-each.html" title="for-each statement">For-each-Statement</a> unterstützt. Ein weiterer Artikel zeigt, auf welche Art Sie das <a href="/beispiele/php/for.html" title="PHP For-Schleife">For-Statement in PHP</a> nutzen können. </p> <h2>JavaScript For Beispiel 1: Einfache For-Schleifen mit Integer- und Realvariablen</h2> <p class="norm"> Das folgende <strong>Beispiel</strong> zeigt einige Möglichkeiten auf, wie die For-Anweisung verwendet werden kann. Im ersten Block des Beispiels wird die Variable i als Zählervariable verwendet. Als Startwert wird 0 und als <strong>Abbruchkriterium</strong> der Ausdruck i < 10 angesetzt. Dies bedeutet, dass i die Werte 0 bis 9 (da die Abbruchbedingung ja bei 10 erfüllt ist und die Verarbeitung dann abgebrochen wird) annimmt. Mit der Methode <a href="/beispiele/javascript/write.html" title="document.write java script">document.write()</a> werden die Werte von i ausgegeben, die diese Variable in den einzelnen Durchläufen annimmt. Nach jedem Durchlauf wird die Zählervariable i um <strong>eins erhöht</strong> (durch i++). Am Ende dieses Blocks wird, wie auch bei den beiden darauf folgenden, eine <a href="/beispiele/javascript/string.html" title="zeichenkette java script">Zeichenkette</a> ausgegeben, die das HTML-Tag zur Erzeugung eines Zeilenumbruchs ausgibt. </p> <p class="norm"> Der zweite <strong>Code-Abschnitt</strong> nutzt wiederum die Zählervariable j. Bei dieser For-Schleife wird der Startwert auf 10 gesetzt und die Abbruchbedingung ist erfüllt, wenn j kleiner als 0 ist – die Schleife wird so lange ausgeführt, wie j größer oder gleich 0 ist. Auch hier wird, wie beim vorherigen <strong>Code-Block</strong> der von j angenommene Wert über die <a href="/beispiele/javascript/document.html" title="document java script">Document</a>-Methode write ausgegeben. Im Unterschied zum vorherigen Block wird j allerdings nicht nach jedem Durchlauf um <strong>eins inkrementiert, sondern um eins dekrementiert</strong> (über j--). </p> <p class="norm"> In den beiden darauf folgenden Abschnitten wird zum Einen mit anderen <strong>Schrittweiten</strong> für die <strong>Veränderung der Zählervariablen</strong> nach jedem Durchlauf der Schliefe gearbeitet. Dabei gilt für die Variable m, dass diese nach jedem Durchlauf um zwei erhöht wird und für die Variable n wird je <strong>Schleifendurchgang</strong> 0.5 hinzuaddiert. Der letzte Code-Block zeigt zugleich, dass nicht allein ganze Zahlen (Variablen vom Typ Integer) als Zählervariable genutzt werden können, sondern auch Kommazahlen (Variablen vom Typ Float). </p> <div class="code2"> <pre><script language="javascript" type="text/javascript"> <span class="code_comment"></span> </script></pre> </div> <p class="sample2"> <script language="javascript" type="text/javascript">  </script> </p> <p class="navbottom"> <span class="next"><a href="/beispiele/javascript/for-2.html" title="for-anweisung java script for-anweisung">weiter zu Seite 2 »</a></span> </p> </div> <div id="left"> <div class="containerblock"> <p class="title">¬ Menu</p> <ul class="content"> <li><a href="/themen/evolutionsalgorithmen/evoalg.html" title="Evolutionäre Algorithmen">» Evolutionsalgorithmen</a></li> <li><a href="/softwareentwicklung/software-entwicklung.html" title="Software-Entwicklung">» Softwareentwicklung</a></li> <li><a href="/tutorials/tutorial.html" title="Tutorials / Tutorien">» Tutorials</a></li> <li><a href="/scripts/skripte.html" title="Free Scripts / Gratis Skripte Download">» Scriptarchiv</a></li> <li><a href="/beispiele/beispiele.html" title="Beispiele Scripts">» Beispiele</a></li> <li><a href="/beispiele/javascript/javascripts.html" title="JavaScripts / JavaScript Beispiel">    » JavaScript</a></li> <li><a href="/beispiele/php/php.html" title="PHP Script">    » PHP</a></li> <li><a href="http://forum.evocomp.de/" target="_blank" title="Forum Webentwicklung / Webprogrammierung">» Forum</a></li> <li><a href="/historie/historie.html" title="Historie">» Historie</a></li> <li><a href="/glossar/glossar.html" title="Glossar">» Glossar</a></li> <li><a href="/links/links.html" title="Links">» Links</a></li> <li><a href="/literatur/literatur.html" title="Literatur">» Literatur</a></li> <li><a href="/visitenkarte/index.html" title="Visitenkarte" target="_blank">» Visitenkarte</a></li> </ul> </div> <div class="containerblock"> <p class="title">¬ Gratis Download</p> <ul class="content"> <li><a href="/scripts/java-script-download/java-script-galerie/javascript-galerie.html" title="html bildergalerie">Web Galerie</a></li> <li><a href="/scripts/php-scripts-download/php-bilder-galerie/php-photo-galerie.html" title="dynamische bildergalerie">PHP Bildergalerie</a></li> <li><a href="/scripts/php-scripts-download/php-counter-class/php-counter-script.html" title="homepage counter">Besucherzähler</a></li> <li><a href="/scripts/java-script-download/java-script-fontsize/javascript-fontsize.html" title="schriftgröße html">Schriftgröße</a></li> </ul> </div> <div class="containerblock"> <p class="title">¬ Seminare</p> <ul class="content"> <li><a href="/beispiele/javascript/seminar-schulung-kurs-lernen.html" title="JavaScript lernen">JavaScript Kurs</a></li> <li><a href="/beispiele/php/lernen-kurs-schulung-seminar.html" title="PHP lernen">PHP Kurs</a></li> </ul> </div> <br/><br/> <div class="containerblock"> <p class="title">¬ Yoga</p> <ul class="content"> <li><a href="/yoga/deutschland/yoga-koeln.html" title="Yoga in Köln">Yoga Köln</a></li> <li><a href="/yoga/hatha-yoga.html" title="Hatha Yoga Köln">Hatha Yoga</a></li> <li><a href="/yoga/buecher/yoga-buch.html" title="Yoga Buch">Yoga Bücher</a></li> </ul> </div> <div class="containerblock"> <p class="title">¬ Insolvenzrecht</p> <ul class="content"> <li><a href="/insolvenz/insolvenzrecht-buch.html" title="Insolvenzrecht Buch">Literatur Insolvenzrecht</a></li> </ul> </div> </div> <div id="right"> <div class="containerblock"> <p class="title">¬ News</p> <p class="content"> <span class="latest_news_date">15.08.2008</span><span class="latest_news">Schleifen in PHP: Die While-Schleife <a href="/news/15_08_2008.html" title="Meldung vom 15.08.2008">» mehr</a></span> <span class="latest_news_date">13.08.2008</span><span class="latest_news">Nutzung von Variablen unter PHP: Definition, Sichtbarkeit und vordefinierte Variablen <a href="/news/13_08_2008.html" title="Meldung vom 13.08.2008">» mehr</a></span> <span class="latest_news_date">11.08.2008</span><span class="latest_news">Ausgabe von Datum und Zeit mit PHP nach Konvertierung in ein String <a href="/news/11_08_2008.html" title="Meldung vom 11.08.2008">» mehr</a></span> <span class="news_liste_hinweis">Eine vollständige News-Liste ist auf der <a href="/news/news.html" title="News Seite">News-Seite</a> zugänglich.</span> </p> </div> <div class="containerblock"> <p class="title">¬ Foren</p> <ul class="content"> <li> <div style="display:inline;float:right;width:130px;"> <a href="http://forum.evocomp.de/f7/" target="_blank" title="JavaScript Hilfe">JavaScript Forum</a><br> <a href="http://forum.evocomp.de/f8/" target="_blank" title="PHP Hilfe">PHP Forum</a><br> </div> <img width="48" height="48" src="/pic/forum_icon.gif" alt="Foren" /> </li> </ul> </div> <div class="containerblock"> <p class="title">¬ Buchtipp</p> <p class="content"> <span class="book"><a href="http://ad.zanox.com/ppc/?5685652C554664482T&ULP=[[20822957]]" rel="nofollow" title="" target="_blank"><img border="0" src="http://bilder.buecher.de/produkte/20/20822/20822957k.jpg" alt="" /><br />Ajax in action</a><br /></span> <span class="book"><hr /> Weitere JavaScript Literaturtipps finden Sie unter <a href="/beispiele/javascript/buecher.html" title="">JavaScript Bücher</a> </span> </p> </div> </div> </div> <div id="copyright"> <script language="javascript" type="text/javascript">  </script> <noscript> © 2004-2024 Alexander Müller<br> <a href="http://call-center.evocomp.de" title="">Call Center Central</a> </noscript> <br><a href="http://www.EvoComp.de" title="Homepage von www.EvoComp.de">www.EvoComp.de</a><br> Letzte Änderung: 11.08.2008 <p> <img border="0" src="/pic/valid-html4.01.png" width="80" height="15" alt="Valid HTML 4.01!" title="Valid HTML 4.01!">      <img border="0" src="/pic/valid-css.png" width="80" height="15" alt="Valid CSS!" title="Valid CSS!"> <br><br> <a href="http://www.gadgets4web.net/service/web-design.html" title="erstellen Internetseite, Köln">Webdesign</a> • <a href="http://www.gadgets4web.net/service/beratung.html" title="Internetseiten, Köln">Beratung Internetseite</a> • <a href="http://www.gadgets4web.net/service/web-entwicklung.html" title="Internetseite programmieren, Köln">Programmierung Internetseite</a> </p> </div> </body> </html>

CINXE.COM

EvoComp - JavaScript Sprachelemente: Die JavaScript For Schleife (For-Statement)