Skip to content

Commit

Permalink
js function with parameters
Browse files Browse the repository at this point in the history
  • Loading branch information
@hamzalodhi2023
hamzalodhi2023 committed Oct 21, 2023
1 parent 982e898 commit bfacf39
Show file tree
Hide file tree
Showing 2 changed files with 329 additions and 0 deletions.
324 changes: 324 additions & 0 deletions JS-Functions-with-Parameters.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,324 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JS Functions with Parameters</title>
<style>
* {
font-family: Arial, Helvetica, sans-serif;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 70%;
}

td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}

tr:nth-child(even) {
background-color: #dddddd;
}

code[class*="language-"],
pre[class*="language-"] {
color: black;
background: none;
background-color: rgba(0, 0, 0, 0);
font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
font-size: 1em;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}

:not(pre) > code[class*="language-"]::after,
pre[class*="language-"]::after {
right: 0.75em;

left: auto;

-webkit-transform: rotate(2deg);

-moz-transform: rotate(2deg);

-ms-transform: rotate(2deg);

-o-transform: rotate(2deg);

transform: rotate(2deg);
}
pre[class*="language-"]::before,
pre[class*="language-"]::after {
content: "";

z-index: -2;

display: block;

position: absolute;

bottom: 0.75em;

left: 0.18em;

width: 40%;

height: 20%;

max-height: 13em;

-webkit-transform: rotate(-2deg);

-moz-transform: rotate(-2deg);

-ms-transform: rotate(-2deg);

-o-transform: rotate(-2deg);

transform: rotate(-2deg);
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background-color: #fdfdfd;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

margin-bottom: 1em;
}
pre[class*="language-"] {
position: relative;

margin: 0.5em 0;

margin-bottom: 0.5em;

overflow: visible;

padding: 0;
}
code[class*="language-"],
pre[class*="language-"] {
color: black;

background: none;

background-color: rgba(0, 0, 0, 0);

font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;

font-size: 1em;

text-align: left;

white-space: pre;

word-spacing: normal;

word-break: normal;

word-wrap: normal;

line-height: 1.5;

-moz-tab-size: 4;

-o-tab-size: 4;

tab-size: 4;

-webkit-hyphens: none;

-moz-hyphens: none;

-ms-hyphens: none;

hyphens: none;
}
pre {
display: block;

font-size: 87.5%;

color: #212529;
}
pre {
margin-top: 0;

margin-bottom: 1rem;

overflow: auto;

-ms-overflow-style: scrollbar;
}
code,
kbd,
pre,
samp {
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
"Courier New", monospace;

font-size: 1em;
}

pre[class*="language-"] > code {
position: relative;
border-left: 10px solid #358ccb;
box-shadow: -1px 0px 0px 0px #358ccb, 0px 0px 0px 1px #dfdfdf;
background-color: #fdfdfd;
background-image: linear-gradient(
transparent 50%,
rgba(69, 142, 209, 0.04) 50%
);
background-size: 3em 3em;
background-origin: content-box;
background-attachment: local;
}

code[class*="language"] {
max-height: inherit;
height: inherit;
padding: 0 1em;
display: block;
overflow: auto;
}

code[class*="language-"],
pre[class*="language-"] {
color: black;
background: none;
background-color: rgba(0, 0, 0, 0);
background-attachment: scroll;
background-image: none;
background-size: auto;
background-origin: padding-box;
font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
font-size: 1em;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}

pre code {
font-size: inherit;
color: inherit;
word-break: normal;
}

code {
font-size: 87.5%;
color: #e83e8c;
word-wrap: break-word;
}
code,
kbd,
pre,
samp {
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
"Courier New", monospace;
font-size: 1em;
}
*,
::after,
::before {
box-sizing: border-box;
}
</style>
</head>
<body>
<h1>JS Functions with Parameters</h1>
<p>
The Javascript Function Parameters are the names that are defined in the
function definition and real values passed to the function in the function
definition are known as arguments.
</p>
<h1>Syntax:</h1>
<pre
class="language-javascript"
tabindex="0"
><code class="language-javascript"><span class="token keyword">function</span> <span class="token function">Name</span><span class="token punctuation">(</span><span class="token parameter">paramet1<span class="token punctuation">,</span> paramet2<span class="token punctuation">,</span> paramet3<span class="token punctuation">,</span><span class="token operator">...</span></span><span class="token punctuation">)</span>
<span class="token punctuation">{</span>
<span class="token comment">// Statements</span>
<span class="token punctuation">}</span></code></pre>
<h1>Parameter Rules:</h1>
<ul>
<li>
There is no need to specify the data type for parameters in JavaScript
function definitions.
</li>
<li>
It does not perform type-checking based on the passed-in JavaScript
functions.
</li>
<li>It does not check the number of received arguments.</li>
</ul>
<h1>Parameters:</h1>
<ul>
<li>Name: It is used to specify the name of the function.</li>
<li>Arguments: It is provided in the argument field of the function.</li>
</ul>
<h1>Default Parameter:</h1>
<p>
The default parameters are used to initialize the named parameters with
default values in case, when no value or undefined is passed.
</p>
<h1>Syntax:</h1>
<pre
class="language-javascript"
tabindex="0"
><code class="language-javascript"><span class="token keyword">function</span> <span class="token function">Name</span><span class="token punctuation">(</span><span class="token parameter">paramet1 <span class="token operator">=</span> value1<span class="token punctuation">,</span> paramet2 <span class="token operator">=</span> value2 <span class="token punctuation">.</span><span class="token punctuation">.</span> <span class="token punctuation">.</span></span><span class="token punctuation">)</span>
<span class="token punctuation">{</span>
<span class="token comment">// statements</span>
<span class="token punctuation">}</span></code></pre>
<pre
class="language-markup"
tabindex="0"
><code class="language-markup"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>JavaScript<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token comment">/* Functions With Parameters*/</span>
<span class="token keyword">function</span> <span class="token function">hello</span><span class="token punctuation">(</span>fname<span class="token operator">=</span> <span class="token string">"Yahoo"</span><span class="token punctuation">,</span>lname<span class="token operator">=</span> <span class="token string">"Baba"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token string">"Hello"</span> <span class="token operator">+</span> fname <span class="token operator">+</span> <span class="token string">" "</span> <span class="token operator">+</span> lname <span class="token operator">+</span> <span class="token string">"&lt;br&gt;"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token function">hello</span><span class="token punctuation">(</span><span class="token string">"Ram"</span><span class="token punctuation">,</span><span class="token string">"Singh"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">hello</span><span class="token punctuation">(</span><span class="token string">"Salman"</span><span class="token punctuation">,</span> <span class="token string">"Khan"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span></code></pre>
</body>
</html>
5 changes: 5 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,11 @@ <h1>JS NOTES</h1>
<li><a href="JS-Confirm-Box.html">JS Confirm Box</a></li>
<li><a href="JS-Prompt-Box.html">JS Prompt Box</a></li>
<li><a href="JS-Functions.html">JS Functions</a></li>
<li>
<a href="JS-Functions-with-Parameters.html"
>JS Functions with Parameters</a
>
</li>
</ol>
</body>
</html>

0 comments on commit bfacf39

Please sign in to comment.