JavaScript Tutorials
- What is Javascript?
- What is BOM?
- What is DOM?
- Variable
- check variable value is empty
- JavaScript Output
- Functions
- Javascript Events
- Input Events
- onchange Event
- Javascript Output methods
- If else statement
- Arrays
- Pattern Validation
- Form Validation
- Inner Html Form Validation
- Inline Form Validation
- Checkbox Validation
- Inline Inner Html Form Validation
- Server side php Validation
- Validate a HTML Form with PHP
- window and window location
- Get Text Value
- Get hidden field value
- JavaScript & PHP
- Date Format
- get php value in javascript
- Redirect page & Autoredirect page
- Auto Refresh page & Div
- How to get select text value from Dropdown box
- How to clear browser history in javascript
- Checkbox Problems
- Select option problems
- Popup Contact Form
- Sidebar Contact Form
- How to use a multistep Form or Form wizard
- Auto Calculate Price
- print Application Form
- Auto Calculate GST in Javascript by select price
- Calculate GST by input value in text box Jquery
- Calculate Discount
- onClick Checkbox
- autofil form data click on checkbox
- Show subcategory list
- Show city list as per state
- Show district list as per country and state
- Show good morning good night wish
- image upload with preview image
- Print Div Content
- Show modal popup on page load
- filter table data usign javascript.
- Character Limit Validation.
- Validate File 5MB Upload
- Validate Special character
- More File Upload
- Call JavaScript Function After Page Load
- Drop Down First option Value Disabled --- Please Select ---
- How to Disable Submit Button After Form Submission
- How to disable browser back button using Jquery?
- How to Remove selected item from second & third dropdown list?
- Interview Questions of JavaScript.
Important Link
What is javascript function
A JavaScript function is a block of code designed to perform a particular task. A JavaScript function is executed when "something" invokes it (calls it).
A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses (). Function names can contain letters, digits, underscores, and dollar signs (same rules as variables). The parentheses may include parameter names separated by commas: (parameter1, parameter2, ...) The code to be executed, by the function, is placed inside curly brackets: {}
Function Invocation
The code inside the function will execute when "something" invokes (calls) the function:
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":
File name : index.php
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
The result in x will be: 12
File name : index.php
<p id="demo"></p>
<script>
function toCelsius(f) {
return (5/9) * (f-32);
}
document.getElementById("demo").innerHTML = toCelsius(77);
</script>
Calling a Function
File name : index.php
<html>
<head>
<script type="text/javascript">
function sayHello()
{
document.write ("Hello there!");
}
</script>
</head>
<body>
<p>Click the following button to call the function</p>
<form>
<input type="button" onclick="sayHello()" value="Say Hello">
</form>
</body>
</html>
Function Parameters
File name : index.php
<html>
<head>
<script type="text/javascript">
function sayHello(name, age)
{
document.write (name + " is " + age + " years old.");
}
</script>
</head>
<body>
<p>Click the following button to call the function</p>
<form>
<input type="button" onclick="sayHello('Zara', 7)" value="Say Hello">
</form>
<p>Use different parameters inside the function and then try...</p>
</body>
</html>
The return Statement
File name : index.php
<html>
<head>
<script type="text/javascript">
function concatenate(first, last)
{
var full;
full = first + last;
return full;
}
function secondFunction()
{
var result;
result = concatenate('Zara', 'Ali');
document.write (result );
}
</script>
</head>
<body>
<p>Click the following button to call the function</p>
<form>
<input type="button" onclick="secondFunction()" value="Call Function">
</form>
<p>Use different parameters inside the function and then try...</p>
</body>
</html>
Function Expressions
File name : index.php
When you simply state a function with function keyword , optional parameters and body of code, it’s a function declaration.
Put that declaration in a JavaScript expression (like in an assignment or arithmetic expression), it becomes a function expression.
// Function declaration
function function_name() {};
// Function expression
var function_name = function() {};
Defining and Calling a Function
File name : index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Define and Call a Function</title>
</head>
<body>
<script>
// Defining function
function sayHello() {
document.write("Hello, welcome to this website!");
}
// Calling function
sayHello(); // Prints: Hello, welcome to this website!
</script>
</body>
</html>
Returning Values from a Function
File name : index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Return a Value from a Function</title>
</head>
<body>
<script>
// Defining function
function getSum(num1, num2) {
var total = num1 + num2;
return total;
}
// Displaying returned value
document.write(getSum(6, 20) + "<br>"); // Prints: 26
document.write(getSum(-5, 17)); // Prints: 12
</script>
</body>
</html>
File name : index.php