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="/8223634-introduction-to-abap-datatypes-operators-and-editor-tutorial" title="Einführung in ABAP: Datentypen, Operatoren & Editor - Tutorial" rel="bookmark"><img src="https://cdn.css-code.org/6591439/introduction_to_abap_datatypes-_operators_ampamp_editor_-_tutorial.png.webp" loading="lazy" alt="Einführung in ABAP: Datentypen, Operatoren & Editor - Tutorial" title="Einführung in ABAP: Datentypen, Operatoren & Editor - Tutorial" 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="/8223634-introduction-to-abap-datatypes-operators-and-editor-tutorial" title="Einführung in ABAP: Datentypen, Operatoren & Editor - Tutorial" rel="bookmark">Einführung in ABAP: Datentypen, Operatoren & Editor - Tutorial 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="/8223635-sap-abap-internal-table-create-read-populate-copy-and-delete" title="Interne SAP ABAP-Tabelle: Erstellen, Lesen, Auffüllen, Kopieren & Löschen" rel="bookmark"><img src="https://cdn.css-code.org/4488949/sap_abap_internal_table_create-_read-_populate-_copy_ampamp_delete.png.webp" loading="lazy" alt="Interne SAP ABAP-Tabelle: Erstellen, Lesen, Auffüllen, Kopieren & Löschen" title="Interne SAP ABAP-Tabelle: Erstellen, Lesen, Auffüllen, Kopieren & Löschen" 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="/8223635-sap-abap-internal-table-create-read-populate-copy-and-delete" title="Interne SAP ABAP-Tabelle: Erstellen, Lesen, Auffüllen, Kopieren & Löschen" rel="bookmark">Interne SAP ABAP-Tabelle: Erstellen, Lesen, Auffüllen, Kopieren & Löschen 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="/8223638-40-best-free-project-management-software-tools-app-2021" title="40 Beste KOSTENLOSE Projektmanagement-Software, Tools, APP (2021)" rel="bookmark"><img src="https://cdn.css-code.org/2259179/40_best_free_project_management_software-_tools-_app_2021.png.webp" loading="lazy" alt="40 Beste KOSTENLOSE Projektmanagement-Software, Tools, APP (2021)" title="40 Beste KOSTENLOSE Projektmanagement-Software, Tools, APP (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="/8223638-40-best-free-project-management-software-tools-app-2021" title="40 Beste KOSTENLOSE Projektmanagement-Software, Tools, APP (2021)" rel="bookmark">40 Beste KOSTENLOSE Projektmanagement-Software, Tools, APP (2021) 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="/8004164-126-using-modernizr" title="# 126: Verwenden von Modernizr - CSS-Tricks" rel="bookmark"># 126: Verwenden von Modernizr - 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="/8004165-12-converting-a-photoshop-mockup-part-two-episode-one" title="# 12: Konvertieren eines Photoshop-Modells: Teil Zwei, Episode Eins - CSS-Tricks" rel="bookmark"># 12: Konvertieren eines Photoshop-Modells: Teil Zwei, Episode Eins - 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="/8004166-129-emmet-is-awesome" title="# 129: Emmet (ist fantastisch) - CSS-Tricks" rel="bookmark"># 129: Emmet (ist fantastisch) - 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="/8004167-125-how-to-stay-up-to-date-with-web-technology" title="# 125: So bleiben Sie mit der Web-Technologie auf dem neuesten Stand - CSS-Tricks" rel="bookmark"># 125: So bleiben Sie mit der Web-Technologie auf dem neuesten Stand - 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="/8004168-128-effeckt-css-local-setup-with-grunt-and-contributing-on-github" title="# 128: Effeckt.css, lokales Setup mit Grunzen und Beiträge auf GitHub - CSS-Tricks" rel="bookmark"># 128: Effeckt.css, lokales Setup mit Grunzen und Beiträge auf GitHub - 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="/8004169-127-basics-of-javascript-templating" title="# 127: Grundlagen der JavaScript-Vorlage - CSS-Tricks" rel="bookmark"># 127: Grundlagen der JavaScript-Vorlage - 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="/8004171-130-first-moments-with-grunt" title="# 130: Erste Momente mit Grunzen - CSS-Tricks" rel="bookmark"># 130: Erste Momente mit Grunzen - 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="/8004172-131-tinkering-with-flexbox" title="# 131: Basteln mit Flexbox - CSS-Tricks" rel="bookmark"># 131: Basteln mit Flexbox - 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="/8004173-132-a-quick-useful-case-for-sass-math-and-mixins" title="# 132: Ein schneller nützlicher Fall für Sass Math und Mixins - CSS-Tricks" rel="bookmark"># 132: Ein schneller nützlicher Fall für Sass Math und Mixins - 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="/8004174-139-explaining-the-server-side-mustard-cut" title="# 139: Erklären des serverseitigen Senfschnitts - CSS-Tricks" rel="bookmark"># 139: Erklären des serverseitigen Senfschnitts - 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="/8004175-13-converting-a-photoshop-mockup-part-two-episode-two" title="# 13: Konvertieren eines Photoshop-Modells: Teil Zwei, Episode Zwei - CSS-Tricks" rel="bookmark"># 13: Konvertieren eines Photoshop-Modells: Teil Zwei, Episode Zwei - 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="/8004176-138-walking-through-an-https-conversion-on-wordpress" title="# 138: Eine HTTPS-Konvertierung unter WordPress - durchlaufen CSS-Tricks" rel="bookmark"># 138: Eine HTTPS-Konvertierung unter WordPress - durchlaufen 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="/8004178-137-svg-is-for-everybody" title="# 137: SVG ist für alle - CSS-Tricks" rel="bookmark"># 137: SVG ist für alle - 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="/8004180-136-moving-things-to-a-cms-as-needed" title="# 136: Verschieben von Dingen auf ein CMS nach Bedarf - CSS-Tricks" rel="bookmark"># 136: Verschieben von Dingen auf ein CMS nach Bedarf - 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="/8004181-142-hiding-things-with-css" title="# 142: Dinge mit CSS verstecken - CSS-Tricks" rel="bookmark"># 142: Dinge mit CSS verstecken - 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="/8003572-retina-display-media-query" title="Retina Display Media Query - CSS-Tricks" rel="bookmark"><img src="https://cdn.css-code.org/1720908/retina_display_media_query_css-tricks.png.webp" loading="lazy" alt="Retina Display Media Query - CSS-Tricks" title="Retina Display Media Query - CSS-Tricks" 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="/8003572-retina-display-media-query" title="Retina Display Media Query - CSS-Tricks" rel="bookmark">Retina Display Media Query - CSS-Tricks 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="/8003573-ribbon" title="Farbband - CSS-Tricks" rel="bookmark"><img src="https://cdn.css-code.org/4056346/ribbon_css-tricks.png.webp" loading="lazy" alt="Farbband - CSS-Tricks" title="Farbband - CSS-Tricks" 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="/8003573-ribbon" title="Farbband - CSS-Tricks" rel="bookmark">Farbband - CSS-Tricks 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="/8003574-scale-on-hover-with-transition" title="Schwebeflug mit Übergang - CSS-Tricks" rel="bookmark"><img src="https://cdn.css-code.org/8846664/scale_on_hover_with_transition_css-tricks.png.webp" loading="lazy" alt="Schwebeflug mit Übergang - CSS-Tricks" title="Schwebeflug mit Übergang - CSS-Tricks" 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="/8003574-scale-on-hover-with-transition" title="Schwebeflug mit Übergang - CSS-Tricks" rel="bookmark">Schwebeflug mit Übergang - CSS-Tricks 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="/8226027-40-best-free-network-monitoring-tools-and-software-2021" title="40 besten KOSTENLOSEN Netzwerküberwachungstools & Software (2021)" rel="bookmark">40 besten KOSTENLOSEN Netzwerküberwachungstools & Software (2021)</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8226028-components-of-operating-systems" title="Komponenten von Betriebssystemen" rel="bookmark">Komponenten von Betriebssystemen</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8226029-cpu-scheduling-algorithms-in-operating-systems" title="CPU-Planungsalgorithmen in Betriebssystemen" rel="bookmark">CPU-Planungsalgorithmen in Betriebssystemen</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8226030-fcfs-scheduling-algorithm-what-is-example-program" title="FCFS-Planungsalgorithmus: Was ist ein Beispielprogramm?" rel="bookmark">FCFS-Planungsalgorithmus: Was ist ein Beispielprogramm?</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8226031-livelock-what-is-example-difference-with-deadlock" title="Livelock: Was ist zum Beispiel der Unterschied zum Deadlock?" rel="bookmark">Livelock: Was ist zum Beispiel der Unterschied zum Deadlock?</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="/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</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<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.</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8225957-top-12-jenkins-interview-questions-and-answers" title="Top 12 JENKINS Interview Fragen & Antworten" rel="bookmark">Top 12 JENKINS Interview Fragen & Antworten</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8225958-20-best-internet-of-things-iot-companies-in-2021" title="20+ BESTE Internet of Things (IoT) -Unternehmen im Jahr 2021" rel="bookmark">20+ BESTE Internet of Things (IoT) -Unternehmen 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="/8225959-top-53-itil-interview-questions-and-answers" title="Top 53 ITIL Interview Fragen & Antworten" rel="bookmark">Top 53 ITIL Interview Fragen & Antworten</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="/8224971-top-40-computer-science-interview-questions-and-answers" title="Top 40 Fragen und Antworten zum Vorstellungsgespräch in der Informatik" rel="bookmark">Top 40 Fragen und Antworten zum Vorstellungsgespräch in der Informatik</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8224972-difference-between-call-by-value-and-call-by-reference" title="Unterschied zwischen Call by Value und Call by Reference" rel="bookmark">Unterschied zwischen Call by Value und Call by Reference</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8224973-r-select-filter-arrange-pipeline-with-example" title="R Wählen Sie (), Filter (), Arrange (), Pipeline mit Beispiel" rel="bookmark">R Wählen Sie (), Filter (), Arrange (), Pipeline mit Beispiel</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8224974-linux-tutorial-pdf-for-beginners-basics-guide-free-download" title="Linux Tutorial PDF für Anfänger: Grundlagenhandbuch (KOSTENLOSER Download)" rel="bookmark">Linux Tutorial PDF für Anfänger: Grundlagenhandbuch (KOSTENLOSER Download)</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8224975-55-best-microsoft-access-training-courses-and-classes-online" title="55 Beste Microsoft Access-Schulungskurse & Online-Unterricht" rel="bookmark">55 Beste Microsoft Access-Schulungskurse & Online-Unterricht</a></h3>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<p>© Copyright de.css-code.org, 2025 August | 
				<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>