{"id":358,"date":"2011-12-20T12:49:33","date_gmt":"2011-12-20T12:49:33","guid":{"rendered":"http:\/\/javascript-tutor.net\/index.php\/"},"modified":"2017-11-16T23:00:32","modified_gmt":"2017-11-16T23:00:32","slug":"lesson-13-function-part-1-introduction","status":"publish","type":"page","link":"https:\/\/javascript-tutor.net\/index.php\/lesson-13-function-part-1-introduction\/","title":{"rendered":"JavaScript Lesson 13: Introduction to Javascript Function"},"content":{"rendered":"<h4 align=\"center\"><strong><a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-12-objects-part-4-document-object\/\">&lt;Lesson 12&gt;<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/javascript-tutorial\/\">[Contents]<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-14-function-part-2-more-examples\/\">&lt;Lesson 14&gt;<\/a><\/strong><\/h4>\n<h3><strong>13.1 Definition of a Function<\/strong><\/h3>\n<p>What is a function in JavaScript?\u00a0A JavaScript function is a type of program that can be called from the main JavaScript program to perform certain tasks. We can also define a function as a module of the main JavaScript program. A professionally written JavaScript program usually consists of numerous functions. It is easier to construct, debug and maintain a large program that makes up of smaller modules, because the programmer needs only debug a module or modules if certain errors occur, instead of having to search for the whole program and trying to locate the error code.<\/p>\n<p><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<ins class=\"adsbygoogle\" style=\"display: block; text-align: center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-3033628290023372\" data-ad-slot=\"5669011038\"><\/ins><br \/>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><br \/>\nThere are two kinds of functions in JavaScript, the built-in functions, and the user-define functions. Built-in functions are also known as methods that are tied to certain objects. For example, functions that are tied to the Math object are round, pow and more. There are also string manipulation functions, date and time functions and many more,\u00a0 please refer to our previous lessons for more information on these functions.<\/p>\n<h3><strong>13.2 Creating User-Defined Functions<\/strong><\/h3>\n<p>To create a JavaScript function, You can declare the variables by listing them within parentheses after the function name. These variables are also known as parameters. They are also known as the local variable, which means that they are known only in the function in which they are defined. When we pass values to the parameters, they are called arguments. After creating a function, you can call the function by using its name followed by the parentheses and the arguments within the parentheses.<\/p>\n<p>The syntax of a function is:<\/p>\n<pre>function\u00a0\u00a0 NameOfFuntion(parameter1, parameter2, parameter3,......)\r\n\r\n{Statements}\r\n<\/pre>\n<p>For example, you can write a simple welcoming message function as follows:<\/p>\n<pre>function Message()\r\n\r\n{ alert(\"Welcome to JavaScript Function\")\r\n<\/pre>\n<p>However, you need to create an event to call the function. Here I will show you how to create a click event. You can use the code as follow:<\/p>\n<pre>&lt;form&gt;\r\n&lt;input type=\"button\" onclick=\"Message()\" value=\"View Message\"&gt;\r\n&lt;\/form&gt;\r\n<\/pre>\n<p>The complete program is shown in Example 13.1<\/p>\n<div class=\"codebg\">\n<h4><strong>Example 13.1<\/strong><\/h4>\n<pre>&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;meta http-equiv=\"Content-Type\" content=\"text\/html; charset=windows-1252\"&gt;\r\n&lt;title&gt;Example 13.1&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;script language=\"javascript\"&gt;\r\n\r\nfunction Message()\r\n{ alert(\"Welcome to JavaScript Function\"); }\r\n\r\n&lt;\/script&gt;\r\n&lt;form&gt;\r\n&lt;input type=\"button\" onclick=\"Message()\" value=\"View Message\"&gt;\r\n&lt;\/form&gt;\r\n\r\n&lt;\/body&gt;\r\n\r\n&lt;\/html&gt;\r\n<\/pre>\n<\/div>\n<p>The output is shown in the figure below. When you click the view message button, the Welcome to JavaScript Function message will pop up.<br \/>\n<img decoding=\"async\" src=\"http:\/\/javascript-tutor.net\/java_tutor\/image\/jvsptexample13.1.jpg\" alt=\"\" \/><\/p>\n<p>Click on\u00a0<a href=\"http:\/\/javascript-tutor.net\/java_tutor\/Javascrpt_Example13.1.htm\">Example 13.1<\/a> to test the program<\/p>\n<p>Let\u00a0us\u00a0look at another example. This example illustrates\u00a0a financial calculator that calculates the future value of a present sum invested for a number of years compounded on a certain annual interest rate. In this program, we create a function that can be called to perform the calculation. This function comprises three parameters: Present value, the number of years and annual interest rate.<\/p>\n<p>Let us use the function name FV to denote Future Value and use the parameters PV to denote present value, n to denote the number of years and r to denotes annual interest rate in percentage form. The formula to calculate the future value is<\/p>\n<p>FV=PV(1+r\/100)<sup>n<\/sup><\/p>\n<p>The function written in JavaScript is shown below<\/p>\n<pre>function FV(PV, n, r)\r\n{ FV=PV*Math.pow(1+r\/100, n):\r\n<\/pre>\n<p>The fully functional future value calculator is shown in Example 13.2 below:<\/p>\n<h3><strong>Example 13.2<\/strong><\/h3>\n<pre>&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;meta http-equiv=\"Content-Type\" content=\"text\/html; charset=windows-1252\"&gt;\r\n&lt;title&gt;Example 13.2&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;script&gt;\r\nPV=window.prompt( \"Enter the present value:\", \"0\" );\r\nn=window.prompt( \"Enter number of years :\", \"0\" );\r\nr=window.prompt( \"Enter the annual rate:\", \"0\" );\r\n\r\nfunction FV(PV, n, r)\r\n{ FV=PV*Math.pow(1+r\/100, n);\r\n\r\ndocument.write(\"The future value after \"+n+\" years is $\"+FV); }\r\n\r\n&lt;\/script&gt;\r\n&lt;form&gt;\r\n&lt;input value=\"Calculate\"&gt;\r\n&lt;\/form&gt;\r\n\r\n&lt;\/body&gt;\r\n\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>When you load the web page, you will be prompted to enter the present value, the number of years and the annual interest rate. On clicking the calculate button, the output should be something like the following:<\/p>\n<p><strong>The future value of the principal sum of $30000 after 20 years at an annual interest rate of 5% is $79598.93115433266<\/strong><\/p>\n<p>Click on\u00a0<a href=\"http:\/\/javascript-tutor.net\/java_tutor\/Javascrpt_Example13.2.htm\">Example 13.2<\/a> to test the program.<br \/>\n<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<ins class=\"adsbygoogle\" style=\"display: block; text-align: center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-3033628290023372\" data-ad-slot=\"5669011038\"><\/ins><br \/>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><\/p>\n<h4 align=\"center\"><a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-12-objects-part-4-document-object\/\">&lt;Lesson 12&gt;<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/javascript-tutorial\/\">[Contents]<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-14-function-part-2-more-examples\/\">&lt;Lesson 14&gt;<\/a><\/h4>\n","protected":false},"excerpt":{"rendered":"<p>&lt;Lesson 12&gt; [Contents] &lt;Lesson 14&gt; 13.1 Definition of a Function What is a function in JavaScript?\u00a0A JavaScript function is a type of program that can be called from the main JavaScript program to perform certain tasks. We can also define a function as a module of the main JavaScript program. A professionally written JavaScript program &hellip; <a href=\"https:\/\/javascript-tutor.net\/index.php\/lesson-13-function-part-1-introduction\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;JavaScript Lesson 13: Introduction to Javascript Function&#8221;<\/span><\/a><\/p>\n","protected":false},"author":35895,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-358","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>JavaScript Lesson 13: Introduction to Javascript Function - Learn JavaScript Online | Free Interactive JavaScript Tutorials<\/title>\n<meta name=\"description\" content=\"This JavaScript lesson explains the meaning of Javascript functions and how to create them\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/javascript-tutor.net\/index.php\/lesson-13-function-part-1-introduction\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Lesson 13: Introduction to Javascript Function - Learn JavaScript Online | Free Interactive JavaScript Tutorials\" \/>\n<meta property=\"og:description\" content=\"This JavaScript lesson explains the meaning of Javascript functions and how to create them\" \/>\n<meta property=\"og:url\" content=\"https:\/\/javascript-tutor.net\/index.php\/lesson-13-function-part-1-introduction\/\" \/>\n<meta property=\"og:site_name\" content=\"Learn JavaScript Online | Free Interactive JavaScript Tutorials\" \/>\n<meta property=\"article:modified_time\" content=\"2017-11-16T23:00:32+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/javascript-tutor.net\/java_tutor\/image\/jvsptexample13.1.jpg\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-13-function-part-1-introduction\/\",\"url\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-13-function-part-1-introduction\/\",\"name\":\"JavaScript Lesson 13: Introduction to Javascript Function - Learn JavaScript Online | Free Interactive JavaScript Tutorials\",\"isPartOf\":{\"@id\":\"https:\/\/javascript-tutor.net\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-13-function-part-1-introduction\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-13-function-part-1-introduction\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/javascript-tutor.net\/java_tutor\/image\/jvsptexample13.1.jpg\",\"datePublished\":\"2011-12-20T12:49:33+00:00\",\"dateModified\":\"2017-11-16T23:00:32+00:00\",\"description\":\"This JavaScript lesson explains the meaning of Javascript functions and how to create them\",\"breadcrumb\":{\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-13-function-part-1-introduction\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/javascript-tutor.net\/index.php\/lesson-13-function-part-1-introduction\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-13-function-part-1-introduction\/#primaryimage\",\"url\":\"http:\/\/javascript-tutor.net\/java_tutor\/image\/jvsptexample13.1.jpg\",\"contentUrl\":\"http:\/\/javascript-tutor.net\/java_tutor\/image\/jvsptexample13.1.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-13-function-part-1-introduction\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/javascript-tutor.net\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript Lesson 13: Introduction to Javascript Function\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/javascript-tutor.net\/#website\",\"url\":\"https:\/\/javascript-tutor.net\/\",\"name\":\"Learn JavaScript Online | Free Interactive JavaScript Tutorials\",\"description\":\"Master JavaScript with free, interactive tutorials for beginners and experienced coders. Practice live coding and visualize how JavaScript works step by step.\",\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript Lesson 13: Introduction to Javascript Function - Learn JavaScript Online | Free Interactive JavaScript Tutorials","description":"This JavaScript lesson explains the meaning of Javascript functions and how to create them","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/javascript-tutor.net\/index.php\/lesson-13-function-part-1-introduction\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Lesson 13: Introduction to Javascript Function - Learn JavaScript Online | Free Interactive JavaScript Tutorials","og_description":"This JavaScript lesson explains the meaning of Javascript functions and how to create them","og_url":"https:\/\/javascript-tutor.net\/index.php\/lesson-13-function-part-1-introduction\/","og_site_name":"Learn JavaScript Online | Free Interactive JavaScript Tutorials","article_modified_time":"2017-11-16T23:00:32+00:00","og_image":[{"url":"http:\/\/javascript-tutor.net\/java_tutor\/image\/jvsptexample13.1.jpg","type":"","width":"","height":""}],"twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/javascript-tutor.net\/index.php\/lesson-13-function-part-1-introduction\/","url":"https:\/\/javascript-tutor.net\/index.php\/lesson-13-function-part-1-introduction\/","name":"JavaScript Lesson 13: Introduction to Javascript Function - Learn JavaScript Online | Free Interactive JavaScript Tutorials","isPartOf":{"@id":"https:\/\/javascript-tutor.net\/#website"},"primaryImageOfPage":{"@id":"https:\/\/javascript-tutor.net\/index.php\/lesson-13-function-part-1-introduction\/#primaryimage"},"image":{"@id":"https:\/\/javascript-tutor.net\/index.php\/lesson-13-function-part-1-introduction\/#primaryimage"},"thumbnailUrl":"http:\/\/javascript-tutor.net\/java_tutor\/image\/jvsptexample13.1.jpg","datePublished":"2011-12-20T12:49:33+00:00","dateModified":"2017-11-16T23:00:32+00:00","description":"This JavaScript lesson explains the meaning of Javascript functions and how to create them","breadcrumb":{"@id":"https:\/\/javascript-tutor.net\/index.php\/lesson-13-function-part-1-introduction\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/javascript-tutor.net\/index.php\/lesson-13-function-part-1-introduction\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/javascript-tutor.net\/index.php\/lesson-13-function-part-1-introduction\/#primaryimage","url":"http:\/\/javascript-tutor.net\/java_tutor\/image\/jvsptexample13.1.jpg","contentUrl":"http:\/\/javascript-tutor.net\/java_tutor\/image\/jvsptexample13.1.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/javascript-tutor.net\/index.php\/lesson-13-function-part-1-introduction\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/javascript-tutor.net\/"},{"@type":"ListItem","position":2,"name":"JavaScript Lesson 13: Introduction to Javascript Function"}]},{"@type":"WebSite","@id":"https:\/\/javascript-tutor.net\/#website","url":"https:\/\/javascript-tutor.net\/","name":"Learn JavaScript Online | Free Interactive JavaScript Tutorials","description":"Master JavaScript with free, interactive tutorials for beginners and experienced coders. Practice live coding and visualize how JavaScript works step by step.","inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/358","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/users\/35895"}],"replies":[{"embeddable":true,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/comments?post=358"}],"version-history":[{"count":31,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/358\/revisions"}],"predecessor-version":[{"id":2492,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/358\/revisions\/2492"}],"wp:attachment":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/media?parent=358"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}