Last ever JS lesson: importing text files into code.

Getting Started

We can import text files into JavaScript.

This will be important for the assessment but is also good learning.

Task: Import data from a text file
1. First task create a text file, with any old words in it.
Call it text.txt
2. Copy and paste the function in on the right

You now have a function that can read in a text file.

3.) Use this command to store the text file in a variable.

let text = importText("text.txt");

4.) Alert the user to the variable... did it work?

function importText(textFile) {
    "use strict";
    let rawFile = new XMLHttpRequest();
    let allText = "";
    rawFile.open("Get", textFile, false);
    rawFile.onreadystatechange = function()
    {
        if(rawFile.readyState === 4)
        {
            if(rawFile.status === 200 || rawFile.status == 0)
            {
                allText = rawFile.responseText;
            }
        }
    }
    rawFile.send(null);
    return allText;
}

---

Cycling through the Text

A string of text is essentially just a big array of individual characters. "Apple" is basically ['A', 'p', 'p', 'l', 'e'];

We can cycle through or select individual letters.

Task: Try the following:

var fruit = "banana";
alert(fruit[4]);


Using the split() function

Below is a string of movie titles read in from a from a .txt file:

​Using split() we can easily turn this into a list by splitting it up using the commas. E.g.:

We can test this by reading it out into the console.

Task: Make a comma separated string of items and do what we have demonstrated above.

HINT FOR THE VERY NEAR FUTURE YOU: We can split on anything, not just commas... E.g.: array.split(";")
You will need to split the text that we read in into an array based on one thing, then further split each of the items in that array based on another thing.

---

Reading from a text file and making classes

Alright, your last challenge...

Task 1: Read the file below into code, then turn that into a list of objects and display the contents in HTML (like we did with the burgers).
Hint: you will need to loop through the array of the text that you read in, then turn each item in the array into a new object that is pushed onto your new object list.

Task 2: Make the name of the hero pop up when you click on the image of them.

If you can do this then you are ready for the assessment.

heroes.txt
File Size:	0 kb
File Type:	txt

Download File

---

Or use the github link:
https://raw.githubusercontent.com/FreybergDigital/website/master/heros.txt

Bonus challenge: Make your heroes fight!

Add on health and attack properties to your hero class and update the hero text to include these.
Make a function with a button to make the hero attack, it should be something like this:
attack(hero[indexOfHero], hero[indexOfHero]) ---- where the indexOfHero is their index in the array.
The first hero will attack the second and lower their HP.

When a hero gets down to a quarter of their health, make the image of them change to be all beaten up.
When they get down to 1 make some text appear under their picture saying that they are no longer able to fight, also, disable their attack button.