CIS 119 Additional array examples and notes

Objectives

Initialize arrays when creating them
Modify an array element
Display elements of an array on a web page using document.writeln
Display elements of an array on a web page using a constructed string and Element.innerHTML
Display elements of an array on a web page using DOM techniques
Use JavaScript to set the attributes of an element

Initialize arrays and modify elements

Creating and initializing an array of 5 numbers: var nums = new Array(1, 6, 2, 9, -3);
Creating and initializing an array of 5 strings: var names = new Array("Aaron", "Dave", "Angie", "Pat", "Sam");
Modifying the third element of the nums array: nums[2] = 42;

Code to display array elements as a list using document.writeln

Note: This code would be placed in the body element. Example is at arrayDisplay.html

document.writeln("<ul>");
for (var i=0; i<nums.length; i++) {
    document.writeln("<li>" + nums[i] + "</li>");
}
document.writeln("</ul>");

Code to display array elements as a list using Element.innerHTML

Example is at arrayDisplay2.html

window.onload = function() {
    let newtext = "";
    let nums = new Array(1, 6, 2, 9, -3);
    nums[2] = 42;
    
    newtext += "<ul>";
    for (var i=0; i<nums.length; i++) {
        newtext += "<li>" + nums[i] + "</li>";
    }
    newtext += "</ul>";
    document.getElementById('results').innerHTML = newtext;
};

Code to display array elements as a list using DOM techniques

Example is at arrayDisplay3.html

window.onload = function() {
    "use strict";
    let divResult = document.getElementById('results');
    let list = document.createElement('ul');
    let nums = new Array(1, 6, 2, 9, -3);
    nums[2] = 42;
    
    for (var i=0; i<nums.length; i++) {
        let item = document.createElement('li');
        let itemText = document.createTextNode(nums[i]);
        item.appendChild(itemText);
        list.appendChild(item);
    }
    divResult.appendChild(list);
};

Code to display array elements as paragraphs using DOM techniques

Note: This code also demonstrates how to set an attribute of an element. Example is at arrayParas.html

var names = new Array("Aaron", "Dave", "Angie", "Pat", "Sam");

function addParagraphs() {
    var elem = document.getElementById("results");
    for (var i=0; i<names.length; i++) {
        // create a paragraph element
        var para = document.createElement("p");
        // create the text that goes inside the paragraph
        var text = document.createTextNode(names[i]);
        para.appendChild(text);
        // add the paragraph to the main document
        elem.appendChild(para);

        // set CSS attributes for the paragraphs
        para.style.color = "#ff0000";
        para.style.fontSize = "20pt";
    }
}

window.onload = addParagraphs;