Bedingte JavaScript-Anweisungen: IF, Else, Else IF (Beispiel)

Inhaltsverzeichnis:

Anonim

In diesem Tutorial lernen Sie:

  • Verwendung von bedingten Anweisungen
  • Verschiedene Arten von bedingten Anweisungen
  • If-Anweisung
  • Wenn ... Sonst Aussage
  • If… Else If… Else Aussage

Verwendung von bedingten Anweisungen

Bedingte Anweisungen werden verwendet, um den Ausführungsfluss basierend auf verschiedenen Bedingungen zu bestimmen. Wenn eine Bedingung wahr ist, können Sie eine Aktion ausführen, und wenn die Bedingung falsch ist, können Sie eine andere Aktion ausführen.

Verschiedene Arten von bedingten Anweisungen

In JavaScript gibt es hauptsächlich drei Arten von bedingten Anweisungen.

  1. If-Anweisung
  2. Wenn ... Sonst Aussage
  3. If… Else If… Else Aussage

If-Anweisung

Syntax:

if (condition){lines of code to be executed if condition is true}

Sie können die If-Anweisung verwenden, wenn Sie nur eine bestimmte Bedingung überprüfen möchten.

Versuchen Sie dies selbst:

 IF-Anweisungen !!! </ title><script type = "text />var age = prompt ("Bitte geben Sie Ihr Alter ein");if (Alter> = 18)document.write ("Sie sind ein Erwachsener<br />");if (Alter <18)document.write ("Sie sind KEIN Erwachsener<br />");</ script></ head><body></ body></ html></pre> <a id="menu-2"></a>
<h2>Wenn ... Sonst Aussage</h2>
<p>Syntax:</p>

<div id="container-5533149ee6411a5f99b370c693e87966"></div>
<pre translate="no">if (condition){lines of code to be executed if the condition is true}else{lines of code to be executed if the condition is false}</pre>
<p>Sie können If verwenden</p>
… .Else-Anweisung, wenn Sie zwei Bedingungen überprüfen und einen anderen Satz von Codes ausführen müssen.
<p>Versuchen Sie dies selbst:</p>
<pre translate="no" class="codeguru"><html><head><title> If… Else Statments !!! </ title><script type = "text />// Aktuelle Stunden abrufenvar Stunden = neues Datum (). getHours ();if (Stunden <12)document.write ("Guten Morgen !!!<br />");sonstdocument.write ("Guten Tag !!!<br />");</ script></ head><body></ body></ html></pre> <a id="menu-3"></a>
<h2>If… Else If… Else Aussage</h2>
<p>Syntax:</p>
<pre translate="no">if (condition1){lines of code to be executed if condition1 is true}else if(condition2){lines of code to be executed if condition2 is true}else{lines of code to be executed if condition1 is false and condition2 is false}</pre>
<p>Sie können If verwenden</p>
… .Else If… .Else-Anweisung, wenn Sie mehr als zwei Bedingungen überprüfen möchten.
<p>Versuchen Sie dies selbst:</p>
<pre translate="no" class="codeguru"><html><head><script type = "text />var one = prompt ("Geben Sie die erste Nummer ein");var two = prompt ("Geben Sie die zweite Nummer ein");eins = parseInt (eins);zwei = parseInt (zwei);if (eins == zwei)document.write (eins + "ist gleich" + zwei + ".");sonst wenn (eins <zwei)document.write (eins + "ist kleiner als" + zwei + ".");sonstdocument.write (eins + "ist größer als" + zwei + ".");</ script></ head><body></ body></ html></pre> <form class="hidden" code-box" name="sample"> Dieser Code kann bearbeitet werden. Klicken Sie zum Ausführen auf Ausführen<textarea name="codeguru"> </textarea>
<p><input type="submit" value="Lauf" style="background-color:#df5035;" color:#ffffff;"></p>


										</div>
									</article>
									
<div id="container-5533149ee6411a5f99b370c693e87966"></div>								</div>
							</div>
						</div>
					</div>
				</div>
				
<aside class="col-lg-4 sidebar sidebar--right">
	<div class="widget widget-popular-posts">
		<h2 class="widget-title">Beliebte Beiträge</h2>
		<ul class="post-list-small">
			<li class="post-list-small__item">
				<div class="post-list-small__entry clearfix">
					<div class="post-list-small__img-holder">
						<div class="thumb-container thumb-100"><a href="/8225954-scatter-plot-in-r-using-ggplot2-with-example" title="Streudiagramm in R mit ggplot2 (mit Beispiel)" rel="bookmark"><img src="https://cdn.css-code.org/1715684/scatter_plot_in_r_using_ggplot2_with_example.png.webp" loading="lazy" alt="Streudiagramm in R mit ggplot2 (mit Beispiel)" title="Streudiagramm in R mit ggplot2 (mit Beispiel)" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div>
					</div>
					<div class="post-list-small__body">
						<h3 class="post-list-small__entry-title"><a href="/8225954-scatter-plot-in-r-using-ggplot2-with-example" title="Streudiagramm in R mit ggplot2 (mit Beispiel)" rel="bookmark">Streudiagramm in R mit ggplot2 (mit Beispiel) 2025</a></h3>
					</div>
				</div>
			</li><li class="post-list-small__item">
				<div class="post-list-small__entry clearfix">
					<div class="post-list-small__img-holder">
						<div class="thumb-container thumb-100"><a href="/8225955-12-best-free-virtual-machine-vm-software-in-2021" title="12 Beste KOSTENLOSE VM-Software (Virtual Machine) im Jahr 2021" rel="bookmark"><img src="https://cdn.css-code.org/6180611/12_best_free_virtual_machine_vm_software_in_2021.png.webp" loading="lazy" alt="12 Beste KOSTENLOSE VM-Software (Virtual Machine) im Jahr 2021" title="12 Beste KOSTENLOSE VM-Software (Virtual Machine) im Jahr 2021" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div>
					</div>
					<div class="post-list-small__body">
						<h3 class="post-list-small__entry-title"><a href="/8225955-12-best-free-virtual-machine-vm-software-in-2021" title="12 Beste KOSTENLOSE VM-Software (Virtual Machine) im Jahr 2021" rel="bookmark">12 Beste KOSTENLOSE VM-Software (Virtual Machine) im Jahr 2021 2025</a></h3>
					</div>
				</div>
			</li><li class="post-list-small__item">
				<div class="post-list-small__entry clearfix">
					<div class="post-list-small__img-holder">
						<div class="thumb-container thumb-100"><a href="/8225956-what-is-r-programming-language-introduction-and-basics-of-r" title="Was ist die Programmiersprache R? Einführung & Grundlagen von R." rel="bookmark"><img src="https://cdn.css-code.org/2248080/what_is_r_programming_language_introduction_ampamp_basics_of_r.png.webp" loading="lazy" alt="Was ist die Programmiersprache R? Einführung & Grundlagen von R." title="Was ist die Programmiersprache R? Einführung & Grundlagen von R." class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div>
					</div>
					<div class="post-list-small__body">
						<h3 class="post-list-small__entry-title"><a href="/8225956-what-is-r-programming-language-introduction-and-basics-of-r" title="Was ist die Programmiersprache R? Einführung & Grundlagen von R." rel="bookmark">Was ist die Programmiersprache R? Einführung & Grundlagen von R. 2025</a></h3>
					</div>
				</div>
			</li>
		</ul>
	</div>

	<div class="widget widget-popular-posts">
		<h2 class="widget-title">Die besten Bewertungen für den Monat</h2>
		<ul class="post-list-small">
			<li class="post-list-small__item">
				<div class="post-list-small__entry clearfix">
					<div class="post-list-small__body">
						<h3 class="post-list-small__entry-title"><a href="/8002951-image-rendering" title="Bildwiedergabe - CSS-Tricks" rel="bookmark">Bildwiedergabe - CSS-Tricks</a></h3>
					</div>
				</div>
			</li><li class="post-list-small__item">
				<div class="post-list-small__entry clearfix">
					<div class="post-list-small__body">
						<h3 class="post-list-small__entry-title"><a href="/8002952-font-synthesis" title="Schriftsynthese - CSS-Tricks" rel="bookmark">Schriftsynthese - CSS-Tricks</a></h3>
					</div>
				</div>
			</li><li class="post-list-small__item">
				<div class="post-list-small__entry clearfix">
					<div class="post-list-small__body">
						<h3 class="post-list-small__entry-title"><a href="/8002953-inset-block-end" title="Inset-Block-Ende - CSS-Tricks" rel="bookmark">Inset-Block-Ende - CSS-Tricks</a></h3>
					</div>
				</div>
			</li><li class="post-list-small__item">
				<div class="post-list-small__entry clearfix">
					<div class="post-list-small__body">
						<h3 class="post-list-small__entry-title"><a href="/8002955-inline-size" title="Inline-Größe - CSS-Tricks" rel="bookmark">Inline-Größe - CSS-Tricks</a></h3>
					</div>
				</div>
			</li><li class="post-list-small__item">
				<div class="post-list-small__entry clearfix">
					<div class="post-list-small__body">
						<h3 class="post-list-small__entry-title"><a href="/8002956-inset-block" title="Einschubblock - CSS-Tricks" rel="bookmark">Einschubblock - CSS-Tricks</a></h3>
					</div>
				</div>
			</li><li class="post-list-small__item">
				<div class="post-list-small__entry clearfix">
					<div class="post-list-small__body">
						<h3 class="post-list-small__entry-title"><a href="/8002957-inset-block-start" title="Inset-Block-Start - CSS-Tricks" rel="bookmark">Inset-Block-Start - CSS-Tricks</a></h3>
					</div>
				</div>
			</li><li class="post-list-small__item">
				<div class="post-list-small__entry clearfix">
					<div class="post-list-small__body">
						<h3 class="post-list-small__entry-title"><a href="/8002958-inset-inline" title="Inset-Inline - CSS-Tricks" rel="bookmark">Inset-Inline - CSS-Tricks</a></h3>
					</div>
				</div>
			</li><li class="post-list-small__item">
				<div class="post-list-small__entry clearfix">
					<div class="post-list-small__body">
						<h3 class="post-list-small__entry-title"><a href="/8002959-inset" title="Einschub - CSS-Tricks" rel="bookmark">Einschub - CSS-Tricks</a></h3>
					</div>
				</div>
			</li><li class="post-list-small__item">
				<div class="post-list-small__entry clearfix">
					<div class="post-list-small__body">
						<h3 class="post-list-small__entry-title"><a href="/8002960-inset-inline-start" title="Inset-Inline-Start - CSS-Tricks" rel="bookmark">Inset-Inline-Start - CSS-Tricks</a></h3>
					</div>
				</div>
			</li><li class="post-list-small__item">
				<div class="post-list-small__entry clearfix">
					<div class="post-list-small__body">
						<h3 class="post-list-small__entry-title"><a href="/8002961-inset-inline-end" title="Inset-Inline-Ende - CSS-Tricks" rel="bookmark">Inset-Inline-Ende - CSS-Tricks</a></h3>
					</div>
				</div>
			</li><li class="post-list-small__item">
				<div class="post-list-small__entry clearfix">
					<div class="post-list-small__body">
						<h3 class="post-list-small__entry-title"><a href="/8002963-initial-letter" title="Anfangsbuchstabe - CSS-Tricks" rel="bookmark">Anfangsbuchstabe - CSS-Tricks</a></h3>
					</div>
				</div>
			</li><li class="post-list-small__item">
				<div class="post-list-small__entry clearfix">
					<div class="post-list-small__body">
						<h3 class="post-list-small__entry-title"><a href="/8002964-letter-spacing" title="Buchstabenabstand - CSS-Tricks" rel="bookmark">Buchstabenabstand - CSS-Tricks</a></h3>
					</div>
				</div>
			</li><li class="post-list-small__item">
				<div class="post-list-small__entry clearfix">
					<div class="post-list-small__body">
						<h3 class="post-list-small__entry-title"><a href="/8002965-justify-items" title="Artikel rechtfertigen - CSS-Tricks" rel="bookmark">Artikel rechtfertigen - CSS-Tricks</a></h3>
					</div>
				</div>
			</li><li class="post-list-small__item">
				<div class="post-list-small__entry clearfix">
					<div class="post-list-small__body">
						<h3 class="post-list-small__entry-title"><a href="/8002966-isolation" title="Isolation - CSS-Tricks" rel="bookmark">Isolation - CSS-Tricks</a></h3>
					</div>
				</div>
			</li><li class="post-list-small__item">
				<div class="post-list-small__entry clearfix">
					<div class="post-list-small__body">
						<h3 class="post-list-small__entry-title"><a href="/8002967-line-clamp" title="Schnurklemme - CSS-Tricks" rel="bookmark">Schnurklemme - CSS-Tricks</a></h3>
					</div>
				</div>
			</li>
		</ul>
	</div>
	
<div id="container-5533149ee6411a5f99b370c693e87966"></div>	<div class="widget widget-popular-posts">
		<h2 class="widget-title">Top Artikel</h2>
		<ul class="post-list-small">
			<li class="post-list-small__item">
				<div class="post-list-small__entry clearfix">
					<div class="post-list-small__img-holder">
						<div class="thumb-container thumb-100"><a href="/8222700-10-best-exploratory-testing-tools-in-2021" title="10 BEST Exploratory Testing Tools im Jahr 2021" rel="bookmark"><img src="https://cdn.css-code.org/7200043/10_best_exploratory_testing_tools_in_2021.png.webp" loading="lazy" alt="10 BEST Exploratory Testing Tools im Jahr 2021" title="10 BEST Exploratory Testing Tools im Jahr 2021" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div>
					</div>
					<div class="post-list-small__body">
						<h3 class="post-list-small__entry-title"><a href="/8222700-10-best-exploratory-testing-tools-in-2021" title="10 BEST Exploratory Testing Tools im Jahr 2021" rel="bookmark">10 BEST Exploratory Testing Tools im Jahr 2021 2025</a></h3>
					</div>
				</div>
			</li><li class="post-list-small__item">
				<div class="post-list-small__entry clearfix">
					<div class="post-list-small__img-holder">
						<div class="thumb-container thumb-100"><a href="/8222701-15-best-open-source-testing-tools-2021" title="15+ BEST Open Source Testing Tools (2021)" rel="bookmark"><img src="https://cdn.css-code.org/9907843/15_best_open_source_testing_tools_2021.jpg.webp" loading="lazy" alt="15+ BEST Open Source Testing Tools (2021)" title="15+ BEST Open Source Testing Tools (2021)" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div>
					</div>
					<div class="post-list-small__body">
						<h3 class="post-list-small__entry-title"><a href="/8222701-15-best-open-source-testing-tools-2021" title="15+ BEST Open Source Testing Tools (2021)" rel="bookmark">15+ BEST Open Source Testing Tools (2021) 2025</a></h3>
					</div>
				</div>
			</li><li class="post-list-small__item">
				<div class="post-list-small__entry clearfix">
					<div class="post-list-small__img-holder">
						<div class="thumb-container thumb-100"><a href="/8222702-20-best-software-testing-services-in-2021" title="20 BEST Software Testing Services im Jahr 2021" rel="bookmark"><img src="https://cdn.css-code.org/9938616/20_best_software_testing_services_in_2021.png.webp" loading="lazy" alt="20 BEST Software Testing Services im Jahr 2021" title="20 BEST Software Testing Services im Jahr 2021" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div>
					</div>
					<div class="post-list-small__body">
						<h3 class="post-list-small__entry-title"><a href="/8222702-20-best-software-testing-services-in-2021" title="20 BEST Software Testing Services im Jahr 2021" rel="bookmark">20 BEST Software Testing Services im Jahr 2021 2025</a></h3>
					</div>
				</div>
			</li>
		</ul>
	</div>
</aside>			</div>
		</div>
		
<footer class="footer footer--dark">
	<div class="container">
		<div class="footer__widgets">
			<div class="row">
				<div class="col-lg-4">
					<div class="widget">
						<h2 class="widget-title">Beliebte Beiträge</h2>
						<ul class="post-list-small">
							<li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8004190-148-laying-things-out-html-and-flexbox-with-dee-gill" title="# 148: Layouten (HTML & Flexbox) mit Dee Gill - CSS-Tricks" rel="bookmark"># 148: Layouten (HTML & Flexbox) mit Dee Gill - CSS-Tricks</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8004192-147-starting-a-react-powered-comment-form" title="# 147: Starten eines reaktionsbasierten Kommentarformulars - CSS-Tricks" rel="bookmark"># 147: Starten eines reaktionsbasierten Kommentarformulars - CSS-Tricks</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8004193-149-a-quick-intro-to-pattern-lab-node-with-brian-muenzenmeyer" title="# 149: Eine kurze Einführung in Pattern Lab Node mit Brian Muenzenmeyer - CSS-Tricks" rel="bookmark"># 149: Eine kurze Einführung in Pattern Lab Node mit Brian Muenzenmeyer - CSS-Tricks</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8004194-14-converting-a-photoshop-mockup-part-two-episode-three" title="# 14: Konvertieren eines Photoshop-Modells: Teil Zwei, Episode Drei - CSS-Tricks" rel="bookmark"># 14: Konvertieren eines Photoshop-Modells: Teil Zwei, Episode Drei - CSS-Tricks</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8004195-152-font-loading-with-zach-leatherman" title="# 152: Schrift wird mit Zach Leatherman geladen - CSS-Tricks" rel="bookmark"># 152: Schrift wird mit Zach Leatherman geladen - CSS-Tricks</a></h3>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
				<div class="col-lg-4">
					<div class="widget">
						<h2 class="widget-title">Tipp Der Redaktion</h2>
						<ul class="post-list-small">
						<li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8004312-6-tools-of-the-trade" title="# 6: Werkzeuge des Handels - CSS-Tricks" rel="bookmark"># 6: Werkzeuge des Handels - CSS-Tricks</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8004314-68-think-geek-background-fade-technique" title="# 68: Think Geek Background Fade-Technik - CSS-Tricks" rel="bookmark"># 68: Think Geek Background Fade-Technik - CSS-Tricks</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8004315-70-random-pet-peeves" title="# 70: Zufällige Pet Peeves - CSS-Tricks" rel="bookmark"># 70: Zufällige Pet Peeves - CSS-Tricks</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8004316-69-first-ten-minutes-with-typekit" title="# 69: Die ersten zehn Minuten mit TypeKit - CSS-Tricks" rel="bookmark"># 69: Die ersten zehn Minuten mit TypeKit - CSS-Tricks</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8004317-71-building-a-website-1-of-3-photoshop-mockup" title="# 71: Erstellen einer Website (1 von 3): Photoshop Mockup - CSS-Tricks" rel="bookmark"># 71: Erstellen einer Website (1 von 3): Photoshop Mockup - CSS-Tricks</a></h3>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
				<div class="col-lg-4">
					<div class="widget">
						<h2 class="widget-title">Top Artikel</h2>
						<ul class="post-list-small">
						<li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8226198-15-best-github-alternatives-in-2021" title="15 besten Github-Alternativen im Jahr 2021" rel="bookmark">15 besten Github-Alternativen im Jahr 2021</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8226200-20-best-front-end-web-development-tools-and-software-in-2021" title="20 besten Front-End-Webentwicklungstools & Software im Jahr 2021" rel="bookmark">20 besten Front-End-Webentwicklungstools & Software im Jahr 2021</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8226201-21-best-ccleaner-alternatives-in-2021-freepaid" title="21 besten CCleaner-Alternativen im Jahr 2021 (kostenlos / bezahlt)" rel="bookmark">21 besten CCleaner-Alternativen im Jahr 2021 (kostenlos / bezahlt)</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8226202-12-best-free-pc-cleaner-tuneup-utility-pc-optimizer-software" title="12 BEST Free PC Cleaner - Dienstprogramm TuneUp - PC Optimizer Software" rel="bookmark">12 BEST Free PC Cleaner - Dienstprogramm TuneUp - PC Optimizer Software</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8226203-20-best-mp3-music-downloader-app-free-songs-download" title="20 BEST MP3 Music Downloader App - KOSTENLOSER Download von Songs" rel="bookmark">20 BEST MP3 Music Downloader App - KOSTENLOSER Download von Songs</a></h3>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<p>© Copyright de.css-code.org, 2025 Juni | 
				<a href="https://de.css-code.org/about-site" title="Über Site">Über Site</a> | 
				<a href="https://de.css-code.org/contacts" title="Kontakte">Kontakte</a> | 
				<a href="https://de.css-code.org/privacy-policy" title="Datenschutz-Bestimmungen">Datenschutz-Bestimmungen</a>.
			</p>
			
		</div>
	</div>
</footer>		
<link href="https://css-code.org/template/css/style.min.css" rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'" />	</body>
</html>