{"id":395,"date":"2011-12-20T15:17:22","date_gmt":"2011-12-20T15:17:22","guid":{"rendered":"http:\/\/javascript-tutor.net\/index.php\/"},"modified":"2017-11-16T23:10:01","modified_gmt":"2017-11-16T23:10:01","slug":"lesson-25-generating-random-values-array","status":"publish","type":"page","link":"https:\/\/javascript-tutor.net\/index.php\/lesson-25-generating-random-values-array\/","title":{"rendered":"JavaScript Lesson 25: Generating Random Values"},"content":{"rendered":"<h4 align=\"center\"><strong><a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-24-sorting-array\/\">&lt;Lesson 24&gt;<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/javascript-tutorial\/\">[Contents]<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-26-performing-linear-search-array\/\">&lt;Lesson 26&gt;<\/a><\/strong><\/h4>\n<h3><strong>25.1: Generating random numbers of an array in JavaScript<\/strong><\/h3>\n<p>We have learned about a random generation of numbers in Javascript Lesson 14. However, in this lesson, you will learn how to generate random numbers using an array. Since every element in an array is identified by a subscript, hence by randomizing the subscripts we will be able to generate random elements of the array.<\/p>\n<p>The randomizing process can be carried using the\u00a0<strong>random<\/strong> method of the\u00a0<strong>Math<\/strong> object.\u00a0<strong>Math.random( )<\/strong> generates numbers between 0 and 1. Therefore, to obtain random numbers between 0 and 6, we need to multiply Math.random( ) with 6, i.e Math.random( )*6. However, to obtain random integers between 0 and 6, we need to use the floor method of the Math object. The <strong>floor(x)<\/strong> method returns the greatest integer less than or equal to x. For example, Math.floor(5.4)=5<\/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 \/>\nEquip with the above knowledge in mind, we shall proceed to write a subscript to simulate the throwing of a die that contains six faces and numbered 1, 2, 3,4,5,6.<\/p>\n<p>The following is the script:<\/p>\n<pre>&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;title&gt;Sorting an Array of Images&lt;\/title&gt;\r\n&lt;script type = \"text\/javascript\"&gt;\r\n&lt;!--\r\nvar Numbers = [ 1,2,3,4,5,6];document.write (Numbers[ Math.floor( Math.random( ) * 6 ) ] );\r\n\/\/ --&gt;\r\n&lt;\/script&gt;&lt;\/head&gt;&lt;body&gt;&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n\r\n<\/pre>\n<p>In this example, <span class=\"outputbg\">Math.floor( Math.random( ) * 6 )<\/span> produces\u00a0 random integers between 0 and 5, i.e 0,1,2,3,4,5. Thus,<\/p>\n<p><span class=\"outputbg\">Numbers[ Math.floor( Math.random( ) * 6 ) ]<\/span> produces random elements of the array with subscript 0,1,2,3,4 or 5, in this way we can generating random numbers 1 to 6, resembling the throwing of a die.<\/p>\n<p>Click\u00a0<a href=\"http:\/\/javascript-tutor.net\/java_tutor\/Javascrpt_Example25.1.htm\">Example 25.1 <\/a>to view the actual output.<\/p>\n<h3><strong>25.2: Generating random strings of an array<\/strong><\/h3>\n<p>If an array is made up of strings or words, we can also generate\u00a0random strings or words\u00a0using the same reasoning.\u00a0Each string is identified by a subscript, by randomizing the subscripts we can then generate random strings based on their subscripts.<\/p>\n<p>The code is shown below:<\/p>\n<pre>&lt;html &gt;\r\n&lt;head&gt;\r\n&lt;title&gt;Sorting an Array of Images&lt;\/title&gt;\r\n&lt;script type = \"text\/javascript\"&gt;var fruits =\r\n[ \"cherry\", \"grape\", \"orange\"];document.write (fruits[Math.floor( Math.random() * 3 )]);\r\n\r\n&lt;\/script&gt;\r\n\r\n&lt;\/head&gt;&lt;body&gt;&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n\r\n<\/pre>\n<p>Click\u00a0<a href=\"http:\/\/javascript-tutor.net\/java_tutor\/Javascrpt_Example25.2.htm\">Example 25.2<\/a> to view the actual output<\/p>\n<h3><strong>25.3\u00a0Generating random images using Array<\/strong><\/h3>\n<p>Now we shall\u00a0go a step further, generating random images using the same reasoning as above. Each image is identified by is subscript, therefore by randomizing the subscripts we can then create random images. To display the images, we just need to use the &lt;img&gt; tag.<\/p>\n<p>The complete script is shown below:<\/p>\n<pre>&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;title&gt;Sorting an Array of Images&lt;\/title&gt;\r\n&lt;script type = \"text\/javascript\"&gt;var images =\r\n[ \"cherry\", \"grape\", \"orange\"];document.write ( \"&lt;img src = \\\"\" +images[ Math.floor( Math.random() * 3 ) ] +\".gif\\\" width = \\\"75\\\" height = \\\"75\\\" \/&gt;\" );\r\n\r\n&lt;\/script&gt;\r\n\r\n&lt;\/head&gt;&lt;body&gt;&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n\r\n<\/pre>\n<p>Click\u00a0<a href=\"http:\/\/javascript-tutor.net\/java_tutor\/Javascrpt_Example25.3.htm\">Example 25.3<\/a> to view test the actual output.<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-24-sorting-array\/\">&lt;Lesson 24&gt;<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/javascript-tutorial\/\">[Contents]<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-26-performing-linear-search-array\/\">&lt;Lesson 26&gt;<\/a><\/h4>\n","protected":false},"excerpt":{"rendered":"<p>&lt;Lesson 24&gt; [Contents] &lt;Lesson 26&gt; 25.1: Generating random numbers of an array in JavaScript We have learned about a random generation of numbers in Javascript Lesson 14. However, in this lesson, you will learn how to generate random numbers using an array. Since every element in an array is identified by a subscript, hence by &hellip; <a href=\"https:\/\/javascript-tutor.net\/index.php\/lesson-25-generating-random-values-array\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;JavaScript Lesson 25: Generating Random Values&#8221;<\/span><\/a><\/p>\n","protected":false},"author":35895,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-395","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 25: Generating Random Values - Learn JavaScript Online | Free Interactive JavaScript Tutorials<\/title>\n<meta name=\"description\" content=\"This javascript lesson shows how to create random values using array 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-25-generating-random-values-array\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Lesson 25: Generating Random Values - Learn JavaScript Online | Free Interactive JavaScript Tutorials\" \/>\n<meta property=\"og:description\" content=\"This javascript lesson shows how to create random values using array in javascript\" \/>\n<meta property=\"og:url\" content=\"https:\/\/javascript-tutor.net\/index.php\/lesson-25-generating-random-values-array\/\" \/>\n<meta property=\"og:site_name\" content=\"Learn JavaScript Online | Free Interactive JavaScript Tutorials\" \/>\n<meta property=\"article:modified_time\" content=\"2017-11-16T23:10:01+00:00\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 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-25-generating-random-values-array\/\",\"url\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-25-generating-random-values-array\/\",\"name\":\"JavaScript Lesson 25: Generating Random Values - Learn JavaScript Online | Free Interactive JavaScript Tutorials\",\"isPartOf\":{\"@id\":\"https:\/\/javascript-tutor.net\/#website\"},\"datePublished\":\"2011-12-20T15:17:22+00:00\",\"dateModified\":\"2017-11-16T23:10:01+00:00\",\"description\":\"This javascript lesson shows how to create random values using array in javascript\",\"breadcrumb\":{\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-25-generating-random-values-array\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/javascript-tutor.net\/index.php\/lesson-25-generating-random-values-array\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-25-generating-random-values-array\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/javascript-tutor.net\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript Lesson 25: Generating Random Values\"}]},{\"@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 25: Generating Random Values - Learn JavaScript Online | Free Interactive JavaScript Tutorials","description":"This javascript lesson shows how to create random values using array 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-25-generating-random-values-array\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Lesson 25: Generating Random Values - Learn JavaScript Online | Free Interactive JavaScript Tutorials","og_description":"This javascript lesson shows how to create random values using array in javascript","og_url":"https:\/\/javascript-tutor.net\/index.php\/lesson-25-generating-random-values-array\/","og_site_name":"Learn JavaScript Online | Free Interactive JavaScript Tutorials","article_modified_time":"2017-11-16T23:10:01+00:00","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/javascript-tutor.net\/index.php\/lesson-25-generating-random-values-array\/","url":"https:\/\/javascript-tutor.net\/index.php\/lesson-25-generating-random-values-array\/","name":"JavaScript Lesson 25: Generating Random Values - Learn JavaScript Online | Free Interactive JavaScript Tutorials","isPartOf":{"@id":"https:\/\/javascript-tutor.net\/#website"},"datePublished":"2011-12-20T15:17:22+00:00","dateModified":"2017-11-16T23:10:01+00:00","description":"This javascript lesson shows how to create random values using array in javascript","breadcrumb":{"@id":"https:\/\/javascript-tutor.net\/index.php\/lesson-25-generating-random-values-array\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/javascript-tutor.net\/index.php\/lesson-25-generating-random-values-array\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/javascript-tutor.net\/index.php\/lesson-25-generating-random-values-array\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/javascript-tutor.net\/"},{"@type":"ListItem","position":2,"name":"JavaScript Lesson 25: Generating Random Values"}]},{"@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\/395","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=395"}],"version-history":[{"count":20,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/395\/revisions"}],"predecessor-version":[{"id":2504,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/395\/revisions\/2504"}],"wp:attachment":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/media?parent=395"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}