Embedded Files
JavaScript Functions
JavaScript Functions
A JavaScript function is a piece of code that is meant to execute a certain purpose. When "something" invokes (calls) a JavaScript function, it is executed.
Example
HTML
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<p>Invoke a function that computes and returns the result:</p>
<p id="demo"></p>
</body>
</html>
JAVASCRIPT
function myFunction(p1, p2) {
return p1 * p2;
}
let result = myFunction(6, 8);
document.getElementById("demo").innerHTML = result;
JavaScript Function Syntax
JavaScript Function Syntax
The function keyword is followed by a name, followed by parentheses () to define a JavaScript function.
Function names can include letters, figures, underscores, and dollar signs (the same restrictions apply to variables).
Parameter names separated by commas may be included in the parentheses:
(parameter 1, parameter 2)
The function's code to be run is enclosed in curly brackets:
function name(parameter1, parameter2, parameter3) {
// code to be executed
}
Function parameters are listed inside the parentheses () in the function definition.
Function arguments are the values received by the function when it is invoked.
Inside the function, the arguments (the parameters) behave as local variables.
Function Invocation
Function Invocation
When "something" invokes (calls) the function, the code within it will run:
When an event occurs (for example, when a user clicks a button),
When it is called (invoked) from JavaScript code
Automatically (self-instigated)
Later in this course, you'll learn a lot more about function invocation.
Function Return
Function Return
When JavaScript reaches a return statement, the function will stop executing.
If the function was invoked from a statement, JavaScript will "return" to execute the code after the invoking statement.
Functions often compute a return value. The return value is "returned" back to the "caller":
Example
HTML
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<p>Invoke a function that computes and returns the result:</p>
<p id="demo"></p>
</body>
</html>
JAVASCRIPT
let x = myFunction(6, 8);
document.getElementById("demo").innerHTML = x;
function myFunction(a, b) {
return a * b;
}
The () Operator
The () Operator
The () operator invokes (calls) the function:
Example
HTML
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<p>Invoke (call) a function that converts Fahrenheit to Celsius:</p>
<p id="demo"></p>
</body>
</html>
JAVASCRIPT
function toCelsius(f) {
return (5/9) * (f-32);
}
let value = toCelsius(77);
document.getElementById("demo").innerHTML = value;
Accessing a function with the wrong arguments might result in an erroneous result:
Example
HTML
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<p>Invoke (call) a function that converts Fahrenheit to Celsius:</p>
<p id="demo"></p>
</body>
</html>
JAVASCRIPT
function toCelsius(f) {
return (5/9) * (f-32);
}
let value = toCelsius();
document.getElementById("demo").innerHTML = value;
When you access a function without (), you get the function, not the function result:
Example
HTML
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<p>Invoke (call) a function that converts Fahrenheit to Celsius:</p>
<p id="demo"></p>
</body>
</html>
JAVASCRIPT
function toCelsius(f) {
return (5/9) * (f-32);
}
let value = toCelsius();
document.getElementById("demo").innerHTML = value;
Functions Used as Variable Values
Functions Used as Variable Values
Functions, like variables, may be utilized in all forms of formulae, assignments, and computations.
Example
HTML
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<p>Using a function as a variable:</p>
<p id="demo"></p>
</body>
</html>
JAVASCRIPT
let text = "The temperature is " + toCelsius(77) + " Celsius.";
document.getElementById("demo").innerHTML = text;
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
Local Variables
Local Variables
Variables declared within a JavaScript function, become LOCAL to the function.
Local variables can only be accessed from within the function.
Example
HTML
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<p>Outside myFunction() countryName is undefined.</p>
<p id="demo1"></p>
<p id="demo2"></p>
</body>
</html>
JAVASCRIPT
let text = "Japan: " + typeof countryName;
document.getElementById("demo1").innerHTML = text;
function myFunction() {
let countryName = "Japan";
let text = "Inside: " + typeof countryName + " " + countryName;
document.getElementById("demo2").innerHTML = text;
Page updated
Google Sites
Report abuse