Functions help organize the various parts of a script into different tasks that must be accomplished.
A function contains code that will be executed by an event or by a call to the function.
A functions can be used more than once within a script to perform its task. Rather than rewriting the entire block of code, you can simply call the function again.
The most basic way to define a function is using the word function, the name of the function followed by two parentheses (where we can add the parameters) and a pair of curly brackets that contain the code of the function.
function functionName(){
alert('Love yourself; love everyone.');
}
The parameters var1, var2, etc. (optionals) are variables for values passed to the function. The brackets { ... } defines the start and end of the function.
var fun1 = function(){
alert('Love yourself; love everyone.');
}
Function names are case sensitive, be sure you use the identical name when you call the function.
The word function must be written in lowercase letters.
var nameVar = function(var1, var2, ...){
//code to be executed
}
- 'nameVar' is the variable name, and becames the name of the function.
var fun1 = function(){
alert('Love yourself; love everyone.');
}
this (that refers to the object of the function).
var nameVar = (var1, var2, ...)=>{
//code to be executed
}
- 'var1, var2' = are function parameters (optionals).
var fun1 = ()=>{
alert('Love yourself; love everyone.');
}
return statement is used to specific a value that a function returns when it is called. You place the return statement as the last line of the function before the closing curly bracket.
function functionName(var1, var2, ...){
//code to be executed
return some_var;
}
The next function returns the value of a variable 'z' that contain the sum of two parameters (x, y):
function amount(x, y) {
var z = x+y;
return z;
}
<h3 id='hid'>Default text</h3>
<script>
//adds a HTML string in the element with id #hid
function textHid(){
document.getElementById('hid').innerHTML ="<h3>It's always a beautiful day.</h3>";
}
//calling the function
textHid();
</script>
<h3 id='hid1'>Tag H3</h3>
<div id='dv1'>Content Div</div>
<script>
//adds in the HTML element with the passed 'id' the string from 'str'
function addText(id, str){
document.getElementById(id).innerHTML = str;
}
//calls the function two times with different values
addText('hid1', 'JavaScript Tutorial');
addText('dv1', 'Text added by calling the function.');
</script>
return:
<h3 id='sum'>Tag H3</h3>
<script>
//returns a string with the sum of x and y
function sumXY(x, y){
let re = x+y;
return 'Sum of x and y is: '+ re;
}
//gets the value returned by sumXY()
let sum1 = sumXY(7, 12);
//adds the value of sum1 in #sum1
document.getElementById('sum').innerHTML = sum1;
</script>
var) outside a function can be changed inside it, and the change (the new value) remains outside it.
<div id='dv1'>Content Div</div><br>
<div id='dv2'>Value nr</div>
<script>
var nr =8;
//doubles de value of x
function setVal(x){
return x*2;
}
//adds the value returned by setVal() in the html element with passed id
//changes the value of nr variable 'nr'
function showVal(id){
document.getElementById(id).innerHTML ='Value of "nr" doubled is: '+ setVal(nr);
nr =99;
}
//calls showVal() with the id of a html element
showVal('dv1');
//ads the current value of 'nr' in #dv2
document.getElementById('dv2').innerHTML ='The value of "nr" after the change in function is: '+nr;
</script>
<div id='dv1'>Div #dv1</div><br>
<div id='dv2'>Div #dv2</div>
<script>
var nr =8;
//define a variable 'nr' with the value of x
function f1(x){
var nr = x;
//adds the value of 'nr' in #dv1
document.getElementById('dv1').innerHTML ='Value of "nr" from function: '+nr;
}
//calls f1() with a value for nr
f1(5);
//adds the value of 'nr' in #dv2. external 'nr' isn't modified
document.getElementById('dv2').innerHTML ='Value of external "nr" is: '+nr;
</script>
<div id='dv1'>Content HTML</div>
<script>
//in this function is created and used an 'arrow function'
function f1(x){
//nested arrow function
let f2 =(x)=>{
return 'X doubled is: '+ (x*2);
}
//if x < 4 adds in #dv1 the result returned by f2()
if(x <4) document.getElementById('dv1').innerHTML = f2(x);
}
f1(3);
//trying to call f2(), shows error in browser console
f2(3); //ReferenceError: f2 is not defined
</script>
function' keyword, or like 'arrow functions'.
<div id='dv1'>Div #dv1</div><br>
<div id='dv2'>Div #dv2</div>
<script>
//the first argument is an anonymous function, that will be executed by setTimeout() after 2 seconds
window.setTimeout(
function(){
document.getElementById('dv1').innerHTML ='<h3>Life is Happiness; Be Happy.</h3>';
},
2000);
//the first argument is an anonymous arrow function, executed by setTimeout() after 3 seconds
window.setTimeout(
()=>{
document.getElementById('dv2').innerHTML ='<h3>Every day is a wonderful day; Be Happy.</h3>';
},
3000);
</script>
<ul> <li>http://coursesweb.net/html/</li> <li>http://coursesweb.net/css/</li> </ul>
.some_class {
display: list-item;
}var obj = {
"courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr); // {"courses":["php","javascript","ajax"]}$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue; // CoursesWeb.net