JavaScript & Funktionen mit Beispiel aufrufen

Anonim

Was ist Funktion in JavaScript?

Funktionen sind in jeder Programmiersprache sehr wichtig und nützlich, da sie den Code wiederverwendbar machen. Eine Funktion ist ein Codeblock, der nur ausgeführt wird, wenn er aufgerufen wird. Wenn Sie einige Codezeilen haben, die mehrmals verwendet werden müssen, können Sie eine Funktion einschließlich der sich wiederholenden Codezeilen erstellen und die Funktion dann aufrufen, wo immer Sie möchten.

In diesem Tutorial lernen Sie:

  • So erstellen Sie eine Funktion in JavaScript
  • Funktion mit Argumenten
  • JavaScript-Rückgabewert

So erstellen Sie eine Funktion in JavaScript

  1. Benutze das Stichwort - Funktion mit dem Namen der Funktion folgt.
  2. Öffnen und schließen Sie nach dem Funktionsnamen Klammern.
  3. Öffnen und schließen Sie nach der Klammer die geschweiften Klammern.
  4. Schreiben Sie in geschweiften Klammern Ihre Codezeilen.

Syntax:

function functionname(){lines of code to be executed}

Versuchen Sie dies selbst:

 Funktionen !!! </ title><script type = "text />Funktion myFunction (){document.write ("Dies ist eine einfache Funktion.<br />");}}myFunction ();</ script></ head><body></ body></ html> </pre>
<h3>Funktion mit Argumenten</h3>
<p>Sie können auch Funktionen mit Argumenten erstellen. Argumente sollten in Klammern angegeben werden</p>
<p>Syntax:</p>
<pre translate="no">function functionname(arg1, arg2){lines of code to be executed}</pre>
<p>Versuchen Sie dies selbst:</p>
<pre translate="no" class="codeguru"><html><head><script type = "text />var count = 0;Funktion countVowels (Name){für (var i = 0; i <name.length; i ++){if (name [i] == "a" || name [i] == "e" || name [i] == "i" || name [i] == "o" || name [i] == "u")count = count + 1;}}document.write ("Hallo" + Name + "!!! Ihr Name hat" + Anzahl + "Vokale.");}}var myName = prompt ("Bitte geben Sie Ihren Namen ein");countVowels (myName);</ script></ head><body></ body></ html> </pre>
<h3>JavaScript-Rückgabewert</h3>
<p>Sie können auch JS-Funktionen erstellen, die Werte zurückgeben. Innerhalb der Funktion müssen Sie das Schlüsselwort <strong>return</strong> gefolgt vom zurückzugebenden Wert verwenden.</p>

<div id="container-5533149ee6411a5f99b370c693e87966"></div>
<p>Syntax:</p>
<pre translate="no">function functionname(arg1, arg2){lines of code to be executedreturn val1;}</pre>
<p>Versuchen Sie dies selbst:</p>
<pre translate="no" class="codeguru"><html><head><script type = "text />Funktion returnSum (erste, zweite){var sum = first + second;Rückgabesumme;}}var firstNo = 78;var secondNo = 22;document.write (firstNo + "+" + secondNo + + returnSum (firstNo, secondNo));</ 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="/8003210-036-large-screen-single-blog-page" title="# 036 - Großbild-Einzelblog-Seite - CSS-Tricks" rel="bookmark"><img src="https://cdn.css-code.org/1043099/036_-_large_screen_single_blog_page_css-tricks.png.webp" loading="lazy" alt="# 036 - Großbild-Einzelblog-Seite - CSS-Tricks" title="# 036 - Großbild-Einzelblog-Seite - 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="/8003210-036-large-screen-single-blog-page" title="# 036 - Großbild-Einzelblog-Seite - CSS-Tricks" rel="bookmark"># 036 - Großbild-Einzelblog-Seite - 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="/8003211-035-desktop-hover-states" title="# 035 - Desktop-Schwebezustände - CSS-Tricks" rel="bookmark"><img src="https://cdn.css-code.org/8436269/035_-_desktop_hover_states_css-tricks.png.webp" loading="lazy" alt="# 035 - Desktop-Schwebezustände - CSS-Tricks" title="# 035 - Desktop-Schwebezustände - 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="/8003211-035-desktop-hover-states" title="# 035 - Desktop-Schwebezustände - CSS-Tricks" rel="bookmark"># 035 - Desktop-Schwebezustände - 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="/8003212-037-color-manipulation" title="# 037 - Farbmanipulation - CSS-Tricks" rel="bookmark"><img src="https://cdn.css-code.org/2449559/037_-_color_manipulation_css-tricks.png.webp" loading="lazy" alt="# 037 - Farbmanipulation - CSS-Tricks" title="# 037 - Farbmanipulation - 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="/8003212-037-color-manipulation" title="# 037 - Farbmanipulation - CSS-Tricks" rel="bookmark"># 037 - Farbmanipulation - CSS-Tricks 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="/8226401-cassandra-architecture-and-replication-factor-strategy" title="Cassandra Architektur & Replikationsfaktor-Strategie" rel="bookmark">Cassandra Architektur & Replikationsfaktor-Strategie</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="/8226402-cassandra-data-model-with-simple-example" title="Cassandra-Datenmodell mit einfachem Beispiel" rel="bookmark">Cassandra-Datenmodell mit einfachem Beispiel</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="/8226403-10-best-data-analytics-tools-for-big-data-analysis-2021" title="10 besten Datenanalyse-Tools für die Big Data-Analyse (2021)" rel="bookmark">10 besten Datenanalyse-Tools für die Big Data-Analyse (2021)</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="/8226404-create-alter-and-drop-keyspace-in-cassandra-with-example" title="Erstellen, ändern & Legen Sie Keyspace in Cassandra mit Beispiel ab" rel="bookmark">Erstellen, ändern & Legen Sie Keyspace in Cassandra mit Beispiel ab</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="/8226405-cassandra-table-create-alter-drop-and-truncate-with-example" title="Cassandra-Tabelle: Erstellen, Ändern, Löschen & Abschneiden (mit Beispiel)" rel="bookmark">Cassandra-Tabelle: Erstellen, Ändern, Löschen & Abschneiden (mit Beispiel)</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="/8226406-top-15-big-data-tools-open-source-software-for-data-analytics" title="Top 15 Big Data Tools - Open Source Software für Data Analytics" rel="bookmark">Top 15 Big Data Tools - Open Source Software für Data Analytics</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="/8226407-cassandra-collection-set-list-map-with-example" title="Cassandra Collection: Set, Liste, Karte mit Beispiel" rel="bookmark">Cassandra Collection: Set, Liste, Karte mit Beispiel</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="/8226408-cassandra-query-languagecql-insert-into-update-delete-example" title="Cassandra Query Language (CQL): Einfügen in, Aktualisieren, Löschen (Beispiel)" rel="bookmark">Cassandra Query Language (CQL): Einfügen in, Aktualisieren, Löschen (Beispiel)</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="/8226409-cassandra-cluster-setup-on-multiple-nodes-machines" title="Cassandra-Cluster-Setup auf mehreren Knoten (Maschinen)" rel="bookmark">Cassandra-Cluster-Setup auf mehreren Knoten (Maschinen)</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="/8226410-datastax-devcenter-and-opscenter-installation-guide" title="DataStax DevCenter & OpsCenter Installationshandbuch" rel="bookmark">DataStax DevCenter & OpsCenter Installationshandbuch</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="/8226411-cassandra-security-create-user-and-authentication-with-jmx" title="Cassandra-Sicherheit: Benutzer erstellen & Authentifizierung mit JMX" rel="bookmark">Cassandra-Sicherheit: Benutzer erstellen & Authentifizierung mit JMX</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="/8226412-top-23-cassandra-interview-questions-and-answers" title="Top 23 Fragen zum Cassandra-Interview & Antworten" rel="bookmark">Top 23 Fragen zum Cassandra-Interview & Antworten</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="/8226413-what-is-business-intelligence-definition-and-example" title="Was ist Business Intelligence? Definition & Beispiel" rel="bookmark">Was ist Business Intelligence? Definition & Beispiel</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="/8226414-database-vs-data-warehouse-key-differences" title="Datenbank vs Data Warehouse: Hauptunterschiede" rel="bookmark">Datenbank vs Data Warehouse: Hauptunterschiede</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="/8226415-20-best-it-asset-management-software-2021-reviews" title="20+ BESTE IT-Asset-Management-Software (2021 Bewertungen)" rel="bookmark">20+ BESTE IT-Asset-Management-Software (2021 Bewertungen)</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="/8004271-33-ecommerce-product-page-makeover" title="# 33: Überarbeitung der E-Commerce-Produktseite - CSS-Tricks" rel="bookmark"><img src="https://cdn.css-code.org/2582731/33_ecommerce_product_page_makeover_css-tricks.png.webp" loading="lazy" alt="# 33: Überarbeitung der E-Commerce-Produktseite - CSS-Tricks" title="# 33: Überarbeitung der E-Commerce-Produktseite - 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="/8004271-33-ecommerce-product-page-makeover" title="# 33: Überarbeitung der E-Commerce-Produktseite - CSS-Tricks" rel="bookmark"># 33: Überarbeitung der E-Commerce-Produktseite - 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="/8004272-35-intro-to-jquery-2" title="# 35: Einführung in jQuery 2 - CSS-Tricks" rel="bookmark"><img src="https://cdn.css-code.org/3326379/35_intro_to_jquery_2_css-tricks.png.webp" loading="lazy" alt="# 35: Einführung in jQuery 2 - CSS-Tricks" title="# 35: Einführung in jQuery 2 - 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="/8004272-35-intro-to-jquery-2" title="# 35: Einführung in jQuery 2 - CSS-Tricks" rel="bookmark"># 35: Einführung in jQuery 2 - 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="/8004273-37-status-fluid-and-menu-bar-apps" title="# 37: Status-, Flüssigkeits- und Menüleisten-Apps - CSS-Tricks" rel="bookmark"><img src="https://cdn.css-code.org/4531478/37_status-_fluid_and_menu_bar_apps_css-tricks.png.webp" loading="lazy" alt="# 37: Status-, Flüssigkeits- und Menüleisten-Apps - CSS-Tricks" title="# 37: Status-, Flüssigkeits- und Menüleisten-Apps - 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="/8004273-37-status-fluid-and-menu-bar-apps" title="# 37: Status-, Flüssigkeits- und Menüleisten-Apps - CSS-Tricks" rel="bookmark"># 37: Status-, Flüssigkeits- und Menüleisten-Apps - 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="/8003504-css-triangle" title="CSS-Dreieck - CSS-Tricks" rel="bookmark">CSS-Dreieck - CSS-Tricks</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8003505-diagonal-graph-paper-gradient" title="Diagonaler Millimeterpapierverlauf - CSS-Tricks" rel="bookmark">Diagonaler Millimeterpapierverlauf - CSS-Tricks</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8003507-end-articles-with-ivy-leaf" title="Artikel mit Efeublatt beenden - CSS-Tricks" rel="bookmark">Artikel mit Efeublatt beenden - CSS-Tricks</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8003508-exactly-center-an-imagediv-horizontally-and-vertically" title="Zentrieren Sie ein Bild / Div genau horizontal und vertikal CSS-Tricks" rel="bookmark">Zentrieren Sie ein Bild / Div genau horizontal und vertikal CSS-Tricks</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8003509-drop-caps" title="Drop Caps - CSS-Tricks" rel="bookmark">Drop Caps - 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="/8224721-fibonacci-series-program-in-java-using-loops-and-recursion" title="Programm der Fibonacci-Serie in Java mit Loops & Rekursion" rel="bookmark">Programm der Fibonacci-Serie in Java mit Loops & Rekursion</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8224722-palindrome-program-in-java-check-number-is-palindrome-or-not" title="Palindrome-Programm in Java: Überprüfen Sie, ob die Nummer Palindrome ist oder nicht" rel="bookmark">Palindrome-Programm in Java: Überprüfen Sie, ob die Nummer Palindrome ist oder nicht</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8224723-bubble-sort-program-in-java-sorting-algorithm-example" title="Blasensortierungsprogramm in Java: Sortieralgorithmus BEISPIEL" rel="bookmark">Blasensortierungsprogramm in Java: Sortieralgorithmus BEISPIEL</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8224724-how-to-reverse-a-string-in-java-using-recursion" title="So kehren Sie einen String in Java mithilfe der Rekursion um" rel="bookmark">So kehren Sie einen String in Java mithilfe der Rekursion um</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8224725-selection-sorting-in-java-program-with-example" title="Auswahlsortierung im Java-Programm mit Beispiel" rel="bookmark">Auswahlsortierung im Java-Programm mit Beispiel</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="/8002993-min-width" title="Min-width - CSS-Tricks" rel="bookmark">Min-width - CSS-Tricks</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8002994-mask-image" title="Maskenbild - CSS-Tricks" rel="bookmark">Maskenbild - CSS-Tricks</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8002996-max-inline-size" title="Max-inline-size - CSS-Tricks" rel="bookmark">Max-inline-size - CSS-Tricks</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8002997-offset-rotate" title="Offset-Rotation - CSS-Tricks" rel="bookmark">Offset-Rotation - CSS-Tricks</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8002998-offset-distance" title="Versatzabstand - CSS-Tricks" rel="bookmark">Versatzabstand - CSS-Tricks</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>