{"id":363,"date":"2011-12-20T12:55:26","date_gmt":"2011-12-20T12:55:26","guid":{"rendered":"http:\/\/javascript-tutor.net\/index.php\/"},"modified":"2018-04-08T09:42:57","modified_gmt":"2018-04-08T09:42:57","slug":"lesson-14-function-part-2-more-examples","status":"publish","type":"page","link":"https:\/\/javascript-tutor.net\/index.php\/lesson-14-function-part-2-more-examples\/","title":{"rendered":"JavaScript Lesson 14: More JavaScript Functions"},"content":{"rendered":"<h4 align=\"center\"><strong><a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-13-function-part-1-introduction\/\">&lt;Lesson 13&gt;<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/javascript-tutorial\/&quot;\">[Contents]<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-15-events-javascript-part-1\/\">&lt;Lesson 15&gt;<\/a><\/strong><\/h4>\n<p>In this lesson, we will show you more examples of user-defined JavaScript functions. In the following example, we will show you how to create a function that can find and return the maximum number out of three numbers entered by the users.<\/p>\n<h3><strong>14.1 Maximum Number function<\/strong><\/h3>\n<p>In this example, we will prompt the user to enter three numbers using the window.prompt method that produces three subsequent input boxes when the web page is loaded. We also use the parseFloat function to convert the string input into floating point or numeric values so that they can be computed mathematically.<\/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 \/>\nThe function\u00a0<strong>max<\/strong> comprises three parameters x,y,z. To find the maximum number, we used the conditional operators\u00a0<strong>if <\/strong>and\u00a0<strong>else if <\/strong>as well the logical operators &amp;&amp;. For example, the program will check for the values of x, y, z and if x&gt;y and x&gt;z, the maximum number is x. However, if y&gt;x and y&gt;z, then y is the maximum number. Finally, if the first two cases are not true, then z is the maximum number.<\/p>\n<h4><strong>Example 14.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;Maximum Number&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;script&gt;\r\nnumber1=window.prompt(\"First Number\",\"\");\r\nnumber2=window.prompt(\"Second Number\",\"\");\r\nnumber3=window.prompt(\"Third Number\",\"\");\r\nvalue1=parseFloat(number1);\r\nvalue2=parseFloat(number2);\r\nvalue3=parseFloat(number3);\r\nMaximumVal=max(value1, value2,value3);\r\ndocument.write(\"The Maximum Number is :\"+MaximumVal);\r\n\r\nfunction max(x,y,z)\r\n{if ((x&gt;y)&amp;&amp;(x&gt;z))\r\nreturn x\r\nelse if ((y&gt;x)&amp;&amp;(y&gt;z))\r\nreturn y;\r\nelse if ((z&gt;y)&amp;&amp;(z&gt;x))\r\nreturn z;\r\n}\r\n&lt;\/script&gt;\r\n&lt;\/body&gt;\r\n\r\n&lt;\/html&gt;\r\n\r\n<\/pre>\n<p>Click on\u00a0<a href=\"http:\/\/javascript-tutor.net\/java_tutor\/Javascrpt_Example14.1.htm\">Example 14.1<\/a> to test the function<\/p>\n<h3><strong>14.2 Creating\u00a0a\u00a0 Dice function<\/strong><\/h3>\n<p>Rolling a six-sided dice (or die) is essential to many board games and other games, whether it is a physical game or a computer game. To creates a dice function in JavaScript, we need to use the random( ) function that is tied to the Math object. Using Math.random( ) function will generate a random number between 0 and 1.<\/p>\n<p>For example, you can write the following code to check out the random numbers.<\/p>\n<h4><strong>Example 14.2<\/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;Click Refresh to run the script&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n&lt;script&gt;\r\ndocument.write (Math.random());\r\n&lt;\/script&gt;\r\n\r\n&lt;hr&gt;\r\n&lt;p&gt;Click Refresh to run the script again&lt;\/p&gt;\r\n\r\n&lt;\/body&gt;\r\n\r\n&lt;\/html&gt;\r\n\r\n<\/pre>\n<p>Running the script will generate a random number with 16 decimal places, like the number below:<\/p>\n<p>0.4495186499923613<\/p>\n<p>Click on this\u00a0<a href=\"http:\/\/javascript-tutor.net\/java_tutor\/random.htm\">example<\/a> to generate random numbers.<\/p>\n<p>In order to generate a random integer from 1 to 6, you can use the following formula:<\/p>\n<p>Math.floor( 1 + Math.random() * 6 )<\/p>\n<p>Math.random()*6 produces a number between 0 and 6. After adding 1, you get a number between 1 and 7, but less than 7. Using the floor function will produce an integer that is less than or equal to the number generated by Math.random()*6. For example, Math.floor(6.9) will round the number to 6.<\/p>\n<p>Let&#8217;s examine Example14.3<\/p>\n<h4><strong>Example 14.3: A digital dice<\/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;Dice Function&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;script&gt;\r\nfunction rolldice()\r\n{ document.write (\"&lt;font size=+2 &gt;\"+Math.floor( 1 + Math.random() * 6 )+\"&lt;\/font&gt;\");\r\n\r\ndocument.writeln(\"&lt;br&gt;&lt;hr&gt;Click on the refresh button to reload the page\"); }\r\n&lt;\/script&gt;\r\n&lt;form&gt;&lt;input value=\"Roll Dice\" onclick=\"rolldice()\"&gt;&lt;\/form&gt;\r\n&lt;\/body&gt;.\r\n\r\n&lt;\/html&gt;\r\n\r\n<\/pre>\n<p>In this example, we created a rolldice function. The task is to generate a random integer between 1 and 6(inclusive of 1 and 6) and then displays the output on the webpage. A button is created so that the function rolldice( ) is called when the user clicks on the roll dice button. The event that triggers the calling of the function is onclick.<\/p>\n<p>Click on\u00a0<a href=\"http:\/\/javascript-tutor.net\/java_tutor\/Javascrpt_Example14.2.htm\">Example 14.3<\/a> to view the output.<\/p>\n<h4><strong>Example 14.4: Graphical Dice<\/strong><\/h4>\n<p>In the previous example, we only created a digital dice, which does not look very cool. In order to create a visually more appealing dice, we thus create a graphical dice, which resembles a real dice. In this example, first of all, we have to draw six dice using any graphics processing program as shown below. Name each image as 1.jpg, 2.jpg, 3.jpg, 4.jpg, 5.jpg and 6.jpg respectively. Put all these image files in the same directory as the web page that is running your rolldice( ) function.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/javascript-tutor.net\/java_tutor\/image\/figure10.6.gif\" alt=\"\" \/><\/p>\n<p>Next, you need to load the images randomly using the Math.random function.\u00a0You also need to display the image using the IMG SRC tag. The code to load random images is shown below:<\/p>\n<p>document.write ( &#8220;&lt;img src = \\&#8221;&#8221; +Math.floor( 1 + Math.random() * 6 ) +&#8221;.jpg\\&#8221; width = \\&#8221;50\\&#8221; height = \\&#8221;50\\&#8221; \/&gt;&#8221;)<\/p>\n<p>The function Math.floor( 1 + Math.random() * 6 ) generates integers from 1 to 6, and Math.floor( 1 + Math.random() * 6 ) +&#8221;.jpg\\&#8221;\u00a0 loads the picture 1.jpg to 6.jpg randomly. The whole code looks like this:<\/p>\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;Dice Function&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;script&gt;\r\nfunction rolldice()\r\n{ document.write ( \"&lt;img src = \\\"\" +\r\nMath.floor( 1 + Math.random() * 6 ) +\r\n\".jpg\\\" width = \\\"50\\\" height = \\\"50\\\" \/&gt;\");document.writeln(\"&lt;br&gt;&lt;hr&gt;Click on the refresh button to reload the page\"); }\r\n&lt;\/script&gt;\r\n&lt;form&gt;&lt;input value=\"Roll Dice\" onclick=\"rolldice()\"&gt;&lt;\/form&gt;\r\n&lt;\/body&gt;&lt;\/html&gt;\r\n\r\n<\/pre>\n<p>Loading the web page and then click on the Roll Dice button will generate random images that show the six faces of the graphical dice.<\/p>\n<p>Click on\u00a0<a href=\"http:\/\/javascript-tutor.net\/java_tutor\/Javascrpt_Example14.3.htm\">Example 14.4<\/a> to roll the dice.<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-13-function-part-1-introduction\/\">&lt;Lesson 13&gt;<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/javascript-tutorial\/\">[Contents]<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-15-events-javascript-part-1\/\">&lt;Lesson 15&gt;<\/a><\/h4>\n","protected":false},"excerpt":{"rendered":"<p>&lt;Lesson 13&gt; [Contents] &lt;Lesson 15&gt; In this lesson, we will show you more examples of user-defined JavaScript functions. In the following example, we will show you how to create a function that can find and return the maximum number out of three numbers entered by the users. 14.1 Maximum Number function In this example, we &hellip; <a href=\"https:\/\/javascript-tutor.net\/index.php\/lesson-14-function-part-2-more-examples\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;JavaScript Lesson 14: More JavaScript Functions&#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-363","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 14: More JavaScript Functions - Learn JavaScript Online | Free Interactive JavaScript Tutorials<\/title>\n<meta name=\"description\" content=\"How to create user-defined functions in javascript\" \/>\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-14-function-part-2-more-examples\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Lesson 14: More JavaScript Functions - Learn JavaScript Online | Free Interactive JavaScript Tutorials\" \/>\n<meta property=\"og:description\" content=\"How to create user-defined functions in javascript\" \/>\n<meta property=\"og:url\" content=\"https:\/\/javascript-tutor.net\/index.php\/lesson-14-function-part-2-more-examples\/\" \/>\n<meta property=\"og:site_name\" content=\"Learn JavaScript Online | Free Interactive JavaScript Tutorials\" \/>\n<meta property=\"article:modified_time\" content=\"2018-04-08T09:42:57+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/javascript-tutor.net\/java_tutor\/image\/figure10.6.gif\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"5 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-14-function-part-2-more-examples\/\",\"url\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-14-function-part-2-more-examples\/\",\"name\":\"JavaScript Lesson 14: More JavaScript Functions - Learn JavaScript Online | Free Interactive JavaScript Tutorials\",\"isPartOf\":{\"@id\":\"https:\/\/javascript-tutor.net\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-14-function-part-2-more-examples\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-14-function-part-2-more-examples\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/javascript-tutor.net\/java_tutor\/image\/figure10.6.gif\",\"datePublished\":\"2011-12-20T12:55:26+00:00\",\"dateModified\":\"2018-04-08T09:42:57+00:00\",\"description\":\"How to create user-defined functions in javascript\",\"breadcrumb\":{\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-14-function-part-2-more-examples\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/javascript-tutor.net\/index.php\/lesson-14-function-part-2-more-examples\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-14-function-part-2-more-examples\/#primaryimage\",\"url\":\"http:\/\/javascript-tutor.net\/java_tutor\/image\/figure10.6.gif\",\"contentUrl\":\"http:\/\/javascript-tutor.net\/java_tutor\/image\/figure10.6.gif\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-14-function-part-2-more-examples\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/javascript-tutor.net\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript Lesson 14: More JavaScript Functions\"}]},{\"@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 14: More JavaScript Functions - Learn JavaScript Online | Free Interactive JavaScript Tutorials","description":"How to create user-defined functions in javascript","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-14-function-part-2-more-examples\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Lesson 14: More JavaScript Functions - Learn JavaScript Online | Free Interactive JavaScript Tutorials","og_description":"How to create user-defined functions in javascript","og_url":"https:\/\/javascript-tutor.net\/index.php\/lesson-14-function-part-2-more-examples\/","og_site_name":"Learn JavaScript Online | Free Interactive JavaScript Tutorials","article_modified_time":"2018-04-08T09:42:57+00:00","og_image":[{"url":"http:\/\/javascript-tutor.net\/java_tutor\/image\/figure10.6.gif","type":"","width":"","height":""}],"twitter_misc":{"Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/javascript-tutor.net\/index.php\/lesson-14-function-part-2-more-examples\/","url":"https:\/\/javascript-tutor.net\/index.php\/lesson-14-function-part-2-more-examples\/","name":"JavaScript Lesson 14: More JavaScript Functions - Learn JavaScript Online | Free Interactive JavaScript Tutorials","isPartOf":{"@id":"https:\/\/javascript-tutor.net\/#website"},"primaryImageOfPage":{"@id":"https:\/\/javascript-tutor.net\/index.php\/lesson-14-function-part-2-more-examples\/#primaryimage"},"image":{"@id":"https:\/\/javascript-tutor.net\/index.php\/lesson-14-function-part-2-more-examples\/#primaryimage"},"thumbnailUrl":"http:\/\/javascript-tutor.net\/java_tutor\/image\/figure10.6.gif","datePublished":"2011-12-20T12:55:26+00:00","dateModified":"2018-04-08T09:42:57+00:00","description":"How to create user-defined functions in javascript","breadcrumb":{"@id":"https:\/\/javascript-tutor.net\/index.php\/lesson-14-function-part-2-more-examples\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/javascript-tutor.net\/index.php\/lesson-14-function-part-2-more-examples\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/javascript-tutor.net\/index.php\/lesson-14-function-part-2-more-examples\/#primaryimage","url":"http:\/\/javascript-tutor.net\/java_tutor\/image\/figure10.6.gif","contentUrl":"http:\/\/javascript-tutor.net\/java_tutor\/image\/figure10.6.gif"},{"@type":"BreadcrumbList","@id":"https:\/\/javascript-tutor.net\/index.php\/lesson-14-function-part-2-more-examples\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/javascript-tutor.net\/"},{"@type":"ListItem","position":2,"name":"JavaScript Lesson 14: More JavaScript Functions"}]},{"@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\/363","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=363"}],"version-history":[{"count":26,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/363\/revisions"}],"predecessor-version":[{"id":2545,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/363\/revisions\/2545"}],"wp:attachment":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/media?parent=363"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}