JavaScript For Loops and Sprites

MetaData, Class, For Loops

The objective of this article is to enhance your knowledge and understanding of MetaData, Class Definitions, and For-Loops.

MetaData: In this article, MetaData contains information about the sprite, including its name, source URL, and orientation details such as the number of rows and columns, header size, padding, and jagged rows.

Class: In this context, the canvas and drawing operations are initialized and stored in a class. These are used to output the sprite sheet image and individual frames within the sprite sheet.

• constructor: Initializes the canvas, context, and sprite image.
• draw() method: Uses nested for-loops to iterate through the sprite sheet and draw each frame independently on the canvas. It calculates the source and destination coordinates for each frame, taking into account the header and padding.

Introduction to For Loops

For Loops are commonly used to iterate over data structures, including JavaScript Arrays and Objects.

Below is an example of a conventional for loop that iterates over an array of names and displays each name in a paragraph (<p>) tag within a designated HTML div.

%%html

<!-- HTML output div -->
<div id="forConventional"></div>

<script>
    var names = ['turtle', 'fish', 'frog', 'penguin'];

    // Conventional for loop with index used to access elements
    for (let i = 0; i < names.length; i++) {

        // Create a p tag for each name and add it to the forConventional div
        const p = document.createElement('p');
        p.innerHTML = names[i];
        document.getElementById('forConventional').appendChild(p);

    }
</script>

ForEach Loop

The ForEach loop is another way to iterate over data structures, such as JavaScript Arrays and Objects. Below is an example of a ForEach loop that iterates over an array of coding adventures and displays each adventure in a paragraph (<p>) tag within a designated HTML div.

%%html

2D array

There is a data structure called arrays in arrays or 2D arrays. The data structure helps organize the data efficiently and access it using nested loops. Each row in the 2D array will represent a category (e.g., GitHub, Terminal), and each column will contain an array of questions and answers for that category.

%%html

<div id="questionsAnswers"></div>

<script>
    // 2D array of questions and answers with titles
    var qaArray = [
        [
            'GitHub',
            [
                { question: 'What is a repository?', answer: 'A repository is a storage space where your project lives.' },
                { question: 'How do you create a branch?', answer: 'You can create a branch by using the command git checkout -b branchName.' },
                { question: 'How do you merge branches?', answer: 'You can merge branches by using the command git merge branchName.' },
                { question: 'How do you push changes to GitHub?', answer: 'You can push changes to GitHub by using the command git push origin branchName.' }
            ]
        ],
        [
            'Terminal',
            [
                { question: 'What is the command to list hidden files in a directory?', answer: 'The command to list files in a directory is ls -a.' },
                { question: 'What is the command to change directories?', answer: 'The command to change directories is cd.' },
                { question: 'What is the command to create a new directory?', answer: 'The command to create a new directory is mkdir.' },
                { question: 'What is the command to remove a directory?', answer: 'The command to remove a directory is rm -rf.' }
            ]
        ],
        [
            'Jupyter Notebook',
            [
                { question: 'How do you setup a markdown cell?', answer: 'You setup a markdown cell by selecting the cell type dropdown and selecting markdown.' },
                { question: 'How do you setup a code cell?', answer: 'You setup a code cell by selecting the cell type dropdown and selecting code.' },
                { question: 'What kernel do you select to run JavaScript code?', answer: 'You select the Python kernel to run JavaScript code.' },
                { question: 'How do you see JavaScript console output?', answer: 'You see JavaScript console output by using the console.log() method.' }
            ]
        ],
        [
            'JavaScript',
            [
                { question: 'What is JavaScript?', answer: 'JavaScript is a programming language that enables you to create interactive web pages.' },
                { question: 'What is a variable?', answer: 'A variable is a container that stores data.' },
                { question: 'What is a function?', answer: 'A function is a block of code that performs a specific task.' },
                { question: 'What is a loop?', answer: 'A loop is a programming structure that repeats a sequence of instructions.' }
            ]
        ]
    ];

    // Nested for loops to display questions and answers with titles
    for (let category of qaArray) {
        // Create an h2 tag for each category title
        const h2 = document.createElement('h2');
        h2.innerHTML = category[0];  // index 0 is the title of the category
        document.getElementById('questionsAnswers').appendChild(h2);

        // Iterate through each question and answer in the category
        for (let qa of category[1]) {  // index 1 is the array of questions and answers
            // Create a p tag for each question and answer
            const p = document.createElement('p');
            p.innerHTML = `<strong>Q:</strong> ${qa.question} <br> <strong>A:</strong> ${qa.answer}`;
            document.getElementById('questionsAnswers').appendChild(p);
        }
    }
</script>