Associative arrays are arrays that use strings in place of index numbers, for key elements.
- Using an associative array is quite similar to using a property name with a regular object; you just do it in an array format.

Syntax:
var array_name = new Array();
 array_name['key1'] = value1;
 array_name['key2'] = value2;
 // ...
- "array_name" is the name of the array.
- 'key1', 'key2' are indices (keys) associated with each element (can be written between double or simple quotes, but if they are numbers, do not add quotes).
- "value1", "value2" are the values of the elements (can be: strings, numbers, variables, expressions, or another array). - You can add any number of elements in the Array, with the sintax:
array_name['key'] = value;

• Accessing an associative array is the same as a normal array, except that you use an index string rather than an index number (array_name['key']).
Example:
<script type="text/javascript"><!--
var arrex = new Array();
 arrex['site'] = 'http://coursesweb.net';
 arrex['course'] = 'Web programming';
 arrex['tutorials'] = 'JavaScript';

alert(arrex['site']);         // http://coursesweb.net
--></script>

Traversing Arrays

You can walk through, or traverse, an array with the "for ... in" or "for each ... in".

- Using for ... in

<script type="text/javascript"><!--
var arrex = new Array();
 arrex['site'] = 'coursesweb.net';
 arrex['course'] = 'Web programming';
 arrex['tutorials'] = 'JavaScript';

// parsing the "arrex"
for(var key in arrex) {
  // write the index and the value of each element
  document.write('Index='+ key+ ' - value='+ arrex[key]+ '<br />');
}
--></script>
- "key" is a variable that holds the index of the current element (can be any variable name) of the array "arrex".
- Will display the following result:
Index=site - value=coursesweb.net
Index=course - value=Web programming
Index=tutorials - value=JavaScript

- Using for each ... in

<script type="text/javascript"><!--
var arrex = new Array();
 arrex['site'] = 'coursesweb.net';
 arrex['course'] = 'Web programming';
 arrex['tutorials'] = 'JavaScript';

// parsing the "arrex"
for each (var elm in arrex) {
  document.write(elm+ '<br />');
}
--></script>
- Note the difference from the "for ... in". The "for each ... in" does not get the index component, the variable declared in brackets (here, "elm") stores the element itself.
- Will display the following result:
coursesweb.net
Web programming
JavaScript

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag renders as emphasized text, displaying the text oblique?
<strong> <pre> <em>
<p>Web development courses: <em>CoursesWeb.net</em></p>
Which CSS property defines the space between the element border and its content?
margin padding position
h3 {
  padding: 2px 0.2em;
}
Click on the method which returns the first element that matches a specified group of selectors.
getElementsByName() querySelector() querySelectorAll()
// gets first Div with class="cls", and shows its content
var elm = document.querySelector("div.cls");
alert(elm.innerHTML);
Indicate the PHP variable that contains data from a form sent with method="post".
$_SESSION $_GET $_POST
if(isset($_POST["field"])) {
  echo $_POST["field"];
}
Associative Arrays in JavaScript

Last accessed pages

  1. jQuery Drag and Drop Rows between two similar Tables (4395)
  2. PHP OOP - Abstract classes (1851)
  3. SimpleModal Dialog Windows (1074)
  4. Mahjong1 (457)
  5. Mahjong Games (1230)

Top accessed pages

  1. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (43399)
  2. PHP-MySQL free course, online tutorials PHP MySQL code (33009)
  3. Read Excel file data in PHP - PhpExcelReader (32937)
  4. Get Attribute (ID, Class, Name, Title, Src) with jQuery (29795)
  5. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (27105)