Learn Javascript Functions

 Learn  Functions in JavaScript

 

coding-zon-js-functions

JS Home


JavaScript Functions

What is Function?

A function in JavaScript will perform some action. Once it is written, it can be called when ever it is needed.

A function can be called directly in the script. It can be bound to some event.

Why to use functions?

  • A function contains code that will be executed by an event or by a call to the function.
  • A function  can be called from anywhere within a page (or even from other pages if the function is written in an external .js file).
  • Functions can be defined in both <head> or in the <body> section of a document. It could be wise to put functions in the <head> section.
  • Function prevents  the browser from executing a script when the page loads. 

How to write function? 

  • A function starts with keyword function.
  • It contains some name. 
  • It may take argument/s if needed. Arguments are separated with comma.
  • It may return the result as per the requirement.

All the statements within the function are enclosed with curly braces{}, which is known as function body or function block.

Top

Syntax:
 

function functionName(arg1, arg2,..., argN)
{
some code
}


Example:

<html>
<head>
<script type="text/javascript">
 
function hello() //defining function
{
document.write("<br>Hi I am hello Function!!"  );
} 
 
hello (); //calling function
hello ();
 
</script>
</head>
<body>
</body>
</html>

 output


Hi I am hello Function!!
Hi I am hello Function!!

Explanation:

In result, message is printed two times  because hello() function called two times. A function can be called inside the loop.

Example2:

<html>
<head>
<script type="text/javascript">
 
function greet(name) //defining function
{
document.write("<br>Hi " + name );
} 
 
greet("John"); //calling function with some name
 
greet("rosy"); //calling 2nd time with some other name
 
</script>
</head>
<body>
</body>
</html>

output:

Hi John

Hi Rosy

Move to Top

Example3:

Using function, doing some calculations.

<html>
<head>
<script type="text/javascript">
 
function addition(a, b) //defining function
{
 
var c;
c = a+b; 

document.write("<br>addition = " + c);
} 
 
addition(9,9); //calling function, by passing two values
 
addition(10,20); //calling 2nd time with some different values.  
 
</script>
</head>
<body>
</body>
</html>
output:

addition = 18
addition = 30
Top
Using return statement
Above addition function can be written as below using return.

function addition(a, b) //defining function
{
 
 return (a+b); 

}
 
Above function taking a,b values and returns the addition of those two
values. 
 
The below examples shows, how you can use the returned value.
 
Example1 

calling function directly in print 
 
document.write("<br>addition = " + addition(5, 6));
  
Example2 
 
Stores returned value in a variable.
var total = addition(5, 6);  
document.write("<br>addition = " + total);
 
Where to write JavaScript code on a Webpage

Script can be written in two  places in a webpage 
  1. Inside the <head></head> tags.
  2. Inside the <body></body> tags.
If you place a script in the head section, you will ensure that the script is loaded before anyone uses it.
If you place a script in the body section, it generates the content of a page.
 
Example
 
<html>
<head>
<script type="text/javascript">
 
function displaymessage()
{
alert("Hello World!");
//window.open('http://google.co.in')
}
 
</script>
</head>
 
<body>
displaymessage();
</body>
 
</html>
 
output:
 
 
displaymessage();

If you are calling function inside the body tags, it should be inside the <script></script> tags.
In the above example modify the body tags code as given below and run it. 
<body>
<script>
displaymessage();
</script>  
</body>
output:
Hello World!
  TOP Menu

A Function can be called on a particular event. ex: onClick
 
Example:
<html>
<head>
<script type="text/javascript">
 
function displaymessage()
{
alert("Hello World!");
}
 
</script>
</head>
 
<body>
<form>
<input type="button" value="Click me!" onclick="displaymessage()" />
</form>
</body>

</html>
 
You will learn  about different types of events and how to bind functions to different events.
Click the link below, to follow the next topic.
 
Thanks for Reading this article ..
Happy Coding :)
JS Events

































Comments











Post a Comment



















Popular posts from this blog









Using javascript pass form variables to iframe src 














Image







      Open PDF in Bootstrap Modal Window   This tutorial shows How to pass a JavaScript/jQuery variable to bootstrap modal  view and sets it to iframe  src attribute. It passes value dynamically to src attribute of the iframe. When the user clicks a link, it opens the URL in a popup window. This  code shows the PDF in a Model without download option by hiding the toolbar.  To show PDF toolbar in modal, just add #toolbar=1   in the above script. index.php <!DOCTYPE html> <html lang= "en" >     <head>         <title>Bootstrap Model with PDF Example - coding-zon</title>         <meta charset= "utf-8" >         <meta name= "viewport"  content= "width=device-width, initial-scale=1" >         <link rel= "stylesheet"  href= "https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" >         <script src= "https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.slim.








Read more










 Creating a new PDF by Merging PDF documents using TCPDF














Image







Merging two PDFs in PHP What is PDF? The Portable Document Format. PDF  stands for "Portable Document Format". Essentially, the format is used when you need to save files that cannot be modified but still need to be easily shared and printed. PDF is one of the most commonly used file types around. PDFs generally contain shareable data, such as text or photo documents etc., and are accessible to anyone who has a computer or smartphone. Unlike a Word file, which requires Microsoft Word to view or edit, most browsers will open a PDF. How to merge PDFs?  You can merge several documents into one. In PHP, you  have a library called TCPDF which allows you to combine one or more PDF  documents to one single document. In this article, we will create a new PDF by Merging PDF documents using TCPDF. Download the  PDFMerger-tcpdf.zip here. Unzip it and copy it to the PHP server. Copy the  PDF files into the same folder that you want to combine. Open the file: merge-pdf-example.php Provide








Read more










Import excel file into mysql in PHP 














Image







  Upload Excel file and Import  it into MySQL in PHP  Create a table in some database with given code.   Download Library  - extract it, rename the folder to library . Create index.php  file with given code in a server. Create  excelUpload.php  with given code. Create db_config.php . Create one Excel file with some sample data as shown in the below image of Excel file. Create ' uploads ' folder in the same directory. Now start server, run the index.php. Upload a .xls  file. If Everything is fine, Excel data inserted in the above created MySQL table - tbl_products . PHP Version:    5.5.11 Folder Structure       Query: CREATE  TABLE  IF NOT  EXISTS  `tbl_products` (   `id` int ( 11 ) NOT  NULL  AUTO_INCREMENT,   `productname` varchar ( 100 ) DEFAULT  NULL ,   `description` varchar ( 100 ) DEFAULT  NULL ,   PRIMARY  KEY  (`id`) )     Top index.php <!DOCTYPE html>  <html>  <head>  <title> coding-zon Demo - Upload Excel to MySQL in PHP </title>  <lin








Read more