A function in JavaScript is anything that is executed when called. In this tutorial, I will explain what a function looks like, how to pass variables in a function, and how to call a function. Another key thing about functions is what they can be used for. I will talk about this to.
Syntax[]
Functions in JavaScript may remind you of a coding block in CSS. To define a function, you must first put the word "function" followed by the name, usually multiple worlds stylized with all lowercase except for the first letter of every word except the first. The "function" followed by the same is the same way variables are defined. After this comes () followed by {} with a line of code to be executed inside the curly brackets. For example:
function doSomething() {
document.getElementById('example') .style.color=('red');
}
This function changes the color of the first element with the id 'example' to red. getElementById is for one element only.
Anonymous functions[]
Anonymous function are functions that do not need to be called and therefore do not need to have a name. I will give an example of this later on after I have shown some more building blocks that would get to the point where you could use an anonymous function.
Capabilities[]
Functions can do many things, such as change CSS properties, change text, make text appear or reappear, add text, delete text, and so much more. For simplicity I am only going to be working with CSS properties that I know and changing text. I somewhat know how to add text, but I'm going to stay away from this.
Calling Functions[]
In order to call a function, you have to know what will be used to call the function and what call must be made to trigger it. You obviously must also have the function defined. For example:
<p id="example">This text will turn red when the button below is clicked</p>
<button type="button" onClick="doSomething()">Click me</button>
As the text says, when that button is clicked, the text should change to red. onClick is an event handler which I will talk more about in Part 3.
Passing Variables[]
What if you want to change the color to blue, or green, or purple, but not create a new function for each one. You can modify the above function to do so by passing a variable through it like this:
function colorSwitch(color) {
document.getElementById('example') .style.color=(color);
}
Which in combination with:
<p id="example">This text will turn red when the button below is clicked</p>
<button type="button" onClick="colorSwitch('blue')">Click me</button>
Changes the text color to blue when the button is clicked, or:
<p id="example">This text will turn red when the button below is clicked</p>
<button type="button" onClick="colorSwitch('green')">Click me</button>
Green when the button is clicked, and so on...
If you want to pass more than one variable, separate them with commas like this:
function textSwitch(color,text) {
document.getElementById('example') .style.color=(color);
document.getElementById('example') .innerHTML=(text);
}
innerHTML is how you change text. When calling this function, the text will switch to whatever is defined in the second variable. It should also be noted that for everything you want to change with a function, you have to repeat the call to what you want to change.
The If Keyword[]
A very important word in JS, especially functions, is the if keyword, as well as the if family: if, else if, and else. I will demonstrate this in a new function:
function doSomethingElse(color) {
if (color != 'undefined') {
document.getElementById('example2') .style.color=(color);
}
else if (color == 'blue') {
document.getElementById('example2') .innerHTML=('Blue is a terrible color')
}
else (color == 'undefined') {
return false;
}
}
When this function is called, if the variable is defined as anything other than blue, the color will switch to that color. If it is blue, the text will switch, and if it is not defined, then the function will not do anything, as noted by it being returned as false. An optional thing in this function is to have anonymous functions inside the "doSomethingElse" function like this:
function doSomethingElse(color) {
if (color != 'undefined') {
function () {
document.getElementById('example2') .style.color=(color);
}
}
else if (color == 'blue') {
function () {
document.getElementById('example2') .innerHTML=('Blue is a terrible color')
}
}
else (color == 'undefined') {
return false;
}
}
Thanks for reading this tutorial. Found a mistake, want to recommend something, or have a question? Leave a comment below.
--Paper
Notes: I didn't do pictures because (a): I don't find them necessary, since you can just do it yourself in Notepad++ and (b): because it is slower for me.
Also, the weirdly colored text used in the functions is produced by:
<syntaxhighlight lang="javascript">code</syntaxhighlight>.
It doesn't make the JS work, but it sylizes the text as if it was on a JS console page.