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="/8003135-only-child" title=": Einzelkind - CSS-Tricks" rel="bookmark"><img src="https://cdn.css-code.org/8761863/_only-child_css-tricks.png.webp" loading="lazy" alt=": Einzelkind - CSS-Tricks" title=": Einzelkind - 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="/8003135-only-child" title=": Einzelkind - CSS-Tricks" rel="bookmark">: Einzelkind - 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="/8003137-nth-last-child" title=": n-tes letztes Kind - CSS-Tricks" rel="bookmark"><img src="https://cdn.css-code.org/6410100/_nth-last-child_css-tricks.png.webp" loading="lazy" alt=": n-tes letztes Kind - CSS-Tricks" title=": n-tes letztes Kind - 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="/8003137-nth-last-child" title=": n-tes letztes Kind - CSS-Tricks" rel="bookmark">: n-tes letztes Kind - 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="/8003138-optional" title=": optional - CSS-Tricks" rel="bookmark"><img src="https://cdn.css-code.org/5330193/_optional_css-tricks.png.webp" loading="lazy" alt=": optional - CSS-Tricks" title=": optional - 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="/8003138-optional" title=": optional - CSS-Tricks" rel="bookmark">: optional - 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="/8223710-overview-of-sap-bi-architecture" title="Übersicht über die SAP BI-Architektur" rel="bookmark">Übersicht über die SAP BI-Architektur</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="/8223711-sap-infoobject-infoarea-infoobject-catalog-tutorial" title="Tutorial zu SAP Infoobject, Infoarea, Infoobject Catalog" rel="bookmark">Tutorial zu SAP Infoobject, Infoarea, Infoobject Catalog</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="/8223712-what-is-dso-in-sap-bw-why-use-it" title="Was ist DSO im SAP BW? Warum es benutzen?" rel="bookmark">Was ist DSO im SAP BW? Warum es benutzen?</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="/8223713-how-to-create-an-infoobject-catalog-in-sap-bibw" title="So erstellen Sie einen InfoObject-Katalog in SAP BI / BW" rel="bookmark">So erstellen Sie einen InfoObject-Katalog in SAP BI / BW</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="/8223715-how-to-create-infoobjects-with-key-figures-in-sap-bibw" title="So erstellen Sie InfoObjects mit Kennzahlen in SAP BI / BW" rel="bookmark">So erstellen Sie InfoObjects mit Kennzahlen in SAP BI / BW</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="/8223716-how-to-create-an-infoobject-with-characteristics-in-sap-bibw" title="So erstellen Sie ein InfoObject mit Merkmalen in SAP BI / BW" rel="bookmark">So erstellen Sie ein InfoObject mit Merkmalen in SAP BI / BW</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="/8223734-what-is-standard-dso-in-sap-how-to-create-one" title="Was ist Standard-DSO in SAP? Wie erstelle ich eine?" rel="bookmark">Was ist Standard-DSO in SAP? Wie erstelle ich eine?</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="/8223745-what-is-direct-update-dso-in-sap-how-to-create-one" title="Was ist Direct Update DSO in SAP? Wie erstelle ich eine?" rel="bookmark">Was ist Direct Update DSO in SAP? Wie erstelle ich eine?</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="/8223754-sap-infoset-tutorial-what-is-create-joins" title="SAP InfoSet Tutorial: Was ist, Erstellen, Verbinden" rel="bookmark">SAP InfoSet Tutorial: Was ist, Erstellen, Verbinden</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="/8223768-how-to-load-master-data-from-ecc-in-sap-bibw" title="Laden von Stammdaten aus ECC in SAP BI / BW" rel="bookmark">Laden von Stammdaten aus ECC in SAP BI / BW</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="/8223769-how-to-load-transaction-data-from-flat-file-in-sap-bibw" title="Laden von Transaktionsdaten aus einer Flatfile in SAP BI / BW" rel="bookmark">Laden von Transaktionsdaten aus einer Flatfile in SAP BI / BW</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="/8223770-how-to-load-transaction-data-from-ecc-sap-rsa5" title="Laden von Transaktionsdaten aus ECC: SAP RSA5" rel="bookmark">Laden von Transaktionsdaten aus ECC: SAP RSA5</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="/8223771-all-about-star-schema-and-extended-star-schema-in-sap-bibw" title="Alles über Star Schema & Erweitertes Sternschema in SAP BI / BW" rel="bookmark">Alles über Star Schema & Erweitertes Sternschema in SAP BI / BW</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="/8223772-sap-bi-content-installation-activation" title="SAP BI-Inhalt: Installation, Aktivierung" rel="bookmark">SAP BI-Inhalt: Installation, Aktivierung</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="/8223775-how-to-load-master-data-from-flat-file-in-sap-bibw" title="So laden Sie Stammdaten aus einer Flatfile in SAP BI / BW" rel="bookmark">So laden Sie Stammdaten aus einer Flatfile in SAP BI / BW</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="/8224276-how-to-define-calculation-schema-in-sap" title="So definieren Sie das Berechnungsschema in SAP" rel="bookmark"><img src="https://cdn.css-code.org/7854792/how_to_define_calculation_schema_in_sap.png.webp" loading="lazy" alt="So definieren Sie das Berechnungsschema in SAP" title="So definieren Sie das Berechnungsschema in SAP" 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="/8224276-how-to-define-calculation-schema-in-sap" title="So definieren Sie das Berechnungsschema in SAP" rel="bookmark">So definieren Sie das Berechnungsschema in SAP 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="/8224277-how-to-define-condition-types-in-sap" title="So definieren Sie Konditionsarten in SAP" rel="bookmark"><img src="https://cdn.css-code.org/2267624/how_to_define_condition_types_in_sap.png.webp" loading="lazy" alt="So definieren Sie Konditionsarten in SAP" title="So definieren Sie Konditionsarten in SAP" 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="/8224277-how-to-define-condition-types-in-sap" title="So definieren Sie Konditionsarten in SAP" rel="bookmark">So definieren Sie Konditionsarten in SAP 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="/8224278-how-to-define-access-sequence-and-condition-table-in-sap-v05-m03" title="So definieren Sie die Zugriffssequenz & Konditionstabelle in SAP V / 05, M / 03" rel="bookmark"><img src="https://cdn.css-code.org/6498639/how_to_define_access_sequence_ampamp_condition_table_in_sap_v05-_m03.png.webp" loading="lazy" alt="So definieren Sie die Zugriffssequenz & Konditionstabelle in SAP V / 05, M / 03" title="So definieren Sie die Zugriffssequenz & Konditionstabelle in SAP V / 05, M / 03" 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="/8224278-how-to-define-access-sequence-and-condition-table-in-sap-v05-m03" title="So definieren Sie die Zugriffssequenz & Konditionstabelle in SAP V / 05, M / 03" rel="bookmark">So definieren Sie die Zugriffssequenz & Konditionstabelle in SAP V / 05, M / 03 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="/8004348-99-overview-of-html5-forms-types-attributes-and-elements" title="# 99: Übersicht über HTML5-Formulartypen, -attribute und -elemente - CSS-Tricks" rel="bookmark"># 99: Übersicht über HTML5-Formulartypen, -attribute und -elemente - CSS-Tricks</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8004350-134-a-tour-of-a-site-in-progress-built-with-jekyll-grunt-sass-an-svg-system-and-more" title="# 134: Eine Tour durch eine laufende Site, die mit Jekyll, Grunt, Sass, einem SVG-System und mehr erstellt wurde - CSS-Tricks" rel="bookmark"># 134: Eine Tour durch eine laufende Site, die mit Jekyll, Grunt, Sass, einem SVG-System und mehr erstellt wurde - CSS-Tricks</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8004351-156-lets-talk-about-webpack" title="# 156: Reden wir über Webpack - CSS-Tricks" rel="bookmark"># 156: Reden wir über Webpack - CSS-Tricks</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8222441-jira-tutorial-how-to-use-jira-software-tool-for-beginners" title="JIRA Tutorial: Verwendung des Jira Software Tools für Anfänger" rel="bookmark">JIRA Tutorial: Verwendung des Jira Software Tools für Anfänger</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8222442-learn-sap-testing-create-your-first-sap-test-case" title="Lernen Sie SAP-Tests kennen: Erstellen Sie Ihren ersten SAP-Testfall" rel="bookmark">Lernen Sie SAP-Tests kennen: Erstellen Sie Ihren ersten SAP-Testfall</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="/8003689-xhtml-1-0-strict-page-structure" title="XHTML 1.0 STRICT Seitenstruktur - CSS-Tricks" rel="bookmark">XHTML 1.0 STRICT Seitenstruktur - CSS-Tricks</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8003690-addclass-function" title="AddClass Funktion - CSS-Tricks" rel="bookmark">AddClass Funktion - CSS-Tricks</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8003691-1024768-bookmarklet" title="1024x768 Lesezeichen - CSS-Tricks" rel="bookmark">1024x768 Lesezeichen - CSS-Tricks</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8003692-addeventlistener-polyfill" title="AddEventListener Polyfill - CSS-Tricks" rel="bookmark">AddEventListener Polyfill - CSS-Tricks</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8003693-add-data-attribute-of-user-agent" title="Datenattribut des Benutzeragenten hinzufügen - CSS-Tricks" rel="bookmark">Datenattribut des Benutzeragenten hinzufügen - 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="/8226044-multithreading-vs-multiprocessing-whats-the-difference" title="Multithreading vs Multiprocessing: Was ist der Unterschied?" rel="bookmark">Multithreading vs Multiprocessing: Was ist der Unterschied?</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8226045-paging-vs-segmentation-key-differences" title="Paging vs. Segmentierung: Hauptunterschiede" rel="bookmark">Paging vs. Segmentierung: Hauptunterschiede</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8226046-preemptive-vs-non-preemptive-scheduling-key-differences" title="Preemptive vs Non-Preemptive Scheduling: Hauptunterschiede" rel="bookmark">Preemptive vs Non-Preemptive Scheduling: Hauptunterschiede</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8226054-what-is-project-management-objectives-methodologies" title="Was ist Projektmanagement? Ziele, Methoden" rel="bookmark">Was ist Projektmanagement? Ziele, Methoden</a></h3>
									</div>
								</div>
							</li><li class="post-list-small__item">
								<div>
									<div>
										<h3 class="post-list-small__entry-title"><a href="/8226056-project-integration-management-tutorial-definition-process-and-plan" title="Tutorial zum Projektintegrationsmanagement: Definition, Prozess & Planen" rel="bookmark">Tutorial zum Projektintegrationsmanagement: Definition, Prozess & Planen</a></h3>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<p>© Copyright de.css-code.org, 2025 September | 
				<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>