{"id":391,"date":"2011-12-20T15:11:07","date_gmt":"2011-12-20T15:11:07","guid":{"rendered":"http:\/\/javascript-tutor.net\/index.php\/"},"modified":"2017-11-16T23:08:53","modified_gmt":"2017-11-16T23:08:53","slug":"lesson-23-creating-arrays-javascript-part-2","status":"publish","type":"page","link":"https:\/\/javascript-tutor.net\/index.php\/lesson-23-creating-arrays-javascript-part-2\/","title":{"rendered":"JavaScript Lesson 23: Creating Arrays Part 2"},"content":{"rendered":"<h4 align=\"center\"><strong><a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-22-creating-arrays-javascript-part-1\/\">&lt;Lesson 22&gt;<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/javascript-tutorial\/\">[Contents]<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-24-sorting-array\/\">&lt;Lesson 24&gt;<\/a><\/strong><\/h4>\n<h3><strong>23.1: Declaring Arrays with Known Initial Values in JavaScript<\/strong><\/h3>\n<p>In the previous lesson, we have learned that we can declare an array using the\u00a0<strong>new<\/strong> operator in JavaScript. The\u00a0<strong>new<\/strong> operator declares an array dynamically which means that values are assigned when the script is run. However, if the initial values are specified, we can use another way to declare an array. For example, suppose a group of students obtained the following scores in their JavaScript examination, as follows:<\/p>\n<div style=\"overflow-x: auto;\">\n<table style=\"table-layout: fixed; width: 50%; font-size: 100%;\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\" align=\"center\">\n<tbody>\n<tr>\n<th><strong>Name<\/strong><\/th>\n<th><strong>Score<\/strong><\/th>\n<\/tr>\n<tr>\n<td width=\"46%\">Alex<\/td>\n<td width=\"53%\">50<\/td>\n<\/tr>\n<tr>\n<td width=\"46%\">Brian<\/td>\n<td width=\"53%\">60<\/td>\n<\/tr>\n<tr>\n<td width=\"46%\">Carmen<\/td>\n<td width=\"53%\">65<\/td>\n<\/tr>\n<tr>\n<td width=\"46%\">Dave<\/td>\n<td width=\"53%\">75<\/td>\n<\/tr>\n<tr>\n<td width=\"46%\">Graham<\/td>\n<td width=\"53%\">80<\/td>\n<\/tr>\n<tr>\n<td width=\"46%\">Keynes<\/td>\n<td width=\"53%\">68<\/td>\n<\/tr>\n<tr>\n<td width=\"46%\">Morgan<\/td>\n<td width=\"53%\">70<\/td>\n<\/tr>\n<tr>\n<td width=\"46%\">Olson<\/td>\n<td width=\"53%\">85<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\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 \/>\nWe can declare two arrays from the above date, one for the name and the other one for the score.<\/p>\n<p>To declare the name array, we can use the following statement:<\/p>\n<p><span class=\"outputbg\">var\u00a0\u00a0 StudentName=[&#8220;Alex&#8221;,&#8221;Brian&#8221;,&#8221;Carmen&#8221;,&#8221;Dave&#8221;,&#8221;Graham&#8221;,&#8221;Keynes&#8221;,&#8221;Morgan&#8221;,&#8221;Olson&#8221;]<\/span><\/p>\n<p>The values must be enclosed in a pair of square brackets and separated by commas, the list of values is also known as initializer list. Note that you don&#8217;t need to use the new operator. The subscripts of the array are 0,1,2,3,4,5,6,7 which means StudentName(0)=Alex, StudentName(1)=Brian and so forth.<\/p>\n<p>As for the scores, we use the following statement;<\/p>\n<p><span class=\"outputbg\">var\u00a0 Score=[50,60,65,75,80,68,70,85]<\/span><\/p>\n<p>The subscripts are also 0,1,2,3,4,5,6,7 which means Score(0)=50, Score(1)=60 and so forth.<\/p>\n<h3><strong>23.2 Performing Arithmetic operations on Values of an Array<\/strong><\/h3>\n<p>We can perform arithmetic operations on the values of an array, such as to obtain the sum and the average values.<\/p>\n<pre>&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;meta http-equiv=\"Content-Language\" content=\"en-us\"&gt;\r\n&lt;meta http-equiv=\"Content-Type\" content=\"text\/html; charset=windows-1252\"&gt;\r\n&lt;title&gt;JavaScript Example 23.1&lt;\/title&gt;\r\n&lt;script&gt;function Start(){\r\nvar StudentName=[\"Alex\",\"Brian\",\"Carmen\",\"Dave\",\"Graham\",\"Keynes\",\"Morgan\",\"Olson\"];\r\nvar Score=[50,60,65,75,80,68,70,85]\r\nvar sum=0 , average=0;\r\nfor (i=0; i&lt;Score.length;i++)\r\nsum+=Score[i];\r\ndocument.writeln(\"Total Score is \"+sum+\"&lt;br&gt;\");\r\ndocument.writeln(\"Avearge Score is \"+sum\/i);\r\n\r\n}\r\n\r\n&lt;\/script&gt;\r\n\r\n&lt;\/head&gt;\r\n&lt;body&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_Example23.1.htm\">Example 23.1<\/a> to see the output.<\/p>\n<p>* Note that you have to initialize the values of sum and average as 0.<\/p>\n<h3><strong>23.3 Tabulating the values of an Array<\/strong><\/h3>\n<p>We can display the values of the array in the above example in a table easily by writing the following script. Note that you can create a table dynamically using the document.write method and by incorporating\u00a0 all the HTML tags. You can write all the values using the for loop. The full script is shown below:<\/p>\n<pre>&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;meta http-equiv=\"Content-Language\" content=\"en-us\"&gt;\r\n&lt;meta http-equiv=\"Content-Type\" content=\"text\/html; charset=windows-1252\"&gt;\r\n&lt;title&gt;JavaScript Example 23.1&lt;\/title&gt;\r\n&lt;script&gt;function Start(){\r\nvar StudentName=[\"Alex\",\"Brian\",\"Carmen\",\"Dave\",\"Graham\",\"Keynes\",\"Morgan\",\"Olson\"];\r\nvar Score=[50,60,65,75,80,68,70,85]\r\n\r\ndocument.writeln(\"&lt;table border=\\\"1\\\"\"+\"width=\\\"50%\\\"&gt;\");\r\ndocument.writeln(\"&lt;thead&gt;&lt;th&gt;Name&lt;\/th&gt;\"+\"&lt;th&gt;Score&lt;\/th&gt;&lt;\/thead&gt;&lt;tbody&gt;\");\r\nfor (i=0; i&lt;Score.length;i++)\r\ndocument.writeln(\"&lt;tr&gt;&lt;td&gt;\"+StudentName[i]+\"&lt;\/td&gt;&lt;td&gt;\"+Score[i]+\"&lt;\/td&gt;&lt;\/tr&gt;\");\r\ndocument.writeln(\"&lt;\/tbody&gt;&lt;\/table&gt;\");\r\n}\r\n\r\n&lt;\/script&gt;\r\n\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;\/body&gt;\r\n\r\n<\/pre>\n<p>Click on\u00a0<a href=\"http:\/\/javascript-tutor.net\/java_tutor\/Javascrpt_Example23.2.htm\">Example 23.2 <\/a>to view the 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-22-creating-arrays-javascript-part-1\/\">&lt;Lesson 22&gt;<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/javascript-tutorial\/\">[Contents]<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-24-sorting-array\/\">&lt;Lesson 24&gt;<\/a><\/h4>\n","protected":false},"excerpt":{"rendered":"<p>&lt;Lesson 22&gt; [Contents] &lt;Lesson 24&gt; 23.1: Declaring Arrays with Known Initial Values in JavaScript In the previous lesson, we have learned that we can declare an array using the\u00a0new operator in JavaScript. The\u00a0new operator declares an array dynamically which means that values are assigned when the script is run. However, if the initial values are &hellip; <a href=\"https:\/\/javascript-tutor.net\/index.php\/lesson-23-creating-arrays-javascript-part-2\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;JavaScript Lesson 23: Creating Arrays Part 2&#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-391","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 23: Creating Arrays Part 2 - Learn JavaScript Online | Free Interactive JavaScript Tutorials<\/title>\n<meta name=\"description\" content=\"Learn how to create arrays 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-23-creating-arrays-javascript-part-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Lesson 23: Creating Arrays Part 2 - Learn JavaScript Online | Free Interactive JavaScript Tutorials\" \/>\n<meta property=\"og:description\" content=\"Learn how to create arrays in javascript\" \/>\n<meta property=\"og:url\" content=\"https:\/\/javascript-tutor.net\/index.php\/lesson-23-creating-arrays-javascript-part-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Learn JavaScript Online | Free Interactive JavaScript Tutorials\" \/>\n<meta property=\"article:modified_time\" content=\"2017-11-16T23:08:53+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-23-creating-arrays-javascript-part-2\/\",\"url\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-23-creating-arrays-javascript-part-2\/\",\"name\":\"JavaScript Lesson 23: Creating Arrays Part 2 - Learn JavaScript Online | Free Interactive JavaScript Tutorials\",\"isPartOf\":{\"@id\":\"https:\/\/javascript-tutor.net\/#website\"},\"datePublished\":\"2011-12-20T15:11:07+00:00\",\"dateModified\":\"2017-11-16T23:08:53+00:00\",\"description\":\"Learn how to create arrays in javascript\",\"breadcrumb\":{\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-23-creating-arrays-javascript-part-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/javascript-tutor.net\/index.php\/lesson-23-creating-arrays-javascript-part-2\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-23-creating-arrays-javascript-part-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/javascript-tutor.net\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript Lesson 23: Creating Arrays Part 2\"}]},{\"@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 23: Creating Arrays Part 2 - Learn JavaScript Online | Free Interactive JavaScript Tutorials","description":"Learn how to create arrays 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-23-creating-arrays-javascript-part-2\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Lesson 23: Creating Arrays Part 2 - Learn JavaScript Online | Free Interactive JavaScript Tutorials","og_description":"Learn how to create arrays in javascript","og_url":"https:\/\/javascript-tutor.net\/index.php\/lesson-23-creating-arrays-javascript-part-2\/","og_site_name":"Learn JavaScript Online | Free Interactive JavaScript Tutorials","article_modified_time":"2017-11-16T23:08:53+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-23-creating-arrays-javascript-part-2\/","url":"https:\/\/javascript-tutor.net\/index.php\/lesson-23-creating-arrays-javascript-part-2\/","name":"JavaScript Lesson 23: Creating Arrays Part 2 - Learn JavaScript Online | Free Interactive JavaScript Tutorials","isPartOf":{"@id":"https:\/\/javascript-tutor.net\/#website"},"datePublished":"2011-12-20T15:11:07+00:00","dateModified":"2017-11-16T23:08:53+00:00","description":"Learn how to create arrays in javascript","breadcrumb":{"@id":"https:\/\/javascript-tutor.net\/index.php\/lesson-23-creating-arrays-javascript-part-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/javascript-tutor.net\/index.php\/lesson-23-creating-arrays-javascript-part-2\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/javascript-tutor.net\/index.php\/lesson-23-creating-arrays-javascript-part-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/javascript-tutor.net\/"},{"@type":"ListItem","position":2,"name":"JavaScript Lesson 23: Creating Arrays Part 2"}]},{"@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\/391","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=391"}],"version-history":[{"count":29,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/391\/revisions"}],"predecessor-version":[{"id":2502,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/391\/revisions\/2502"}],"wp:attachment":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/media?parent=391"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}