Sorting Some Numbers

A file contains a set of numbers, I would like to present them in a document sorted.
- This should let me deal with most of the stuff you need to deal with for homework 1.
Task 1, the data file
- Javascript, and the web environment is designed to protect people as much as possible.
- So you don't have direct access to files.
- You need to load them from the host machine.
- So put a file, containing some numbers, somewhere you can find it.
Getting the file.
- Due to security this is far more difficult than it should be.
- My primary reference is here
  - have a simplified version.
  - And I don't like the way they do files.

Build an input button in html

<body>
<h1> Select an Input File</h1>
<p>
<input type="file" id="fileInput">
<p>
</body>

```
 Select an Input File



 
```
The id part is important, we will us that later.

Build the javascript to interact with this button.
- As we saw, javascript starts with a
- ```
< script type="text/javascript">
</script> 
```
- I would like you to add
```
< script type="text/javascript">
"use strict" 
```
- reference
- While this is not necessary, it does save some problems.
- And I want it.
Grabbing the "button"
- We will explore interacting with html more later.
- But for now we need this input field.
- We gain access to these in several ways.
- But the one I like is
- ```
let fileSelector = document.getElementById('fileInput'); 
```
- Reference for let vs var
Reacting to changes in the button
- Like most graphical environments, web documents are very event driven.
- We need to register an
  - Event handler
  - Callback
  - Even Listener
- To have our program take action when file button has an interaction.
- ```
let fileSelector = document.getElementById('fileInput');
fileSelector.addEventListener('change', MyFileReader); 
```
- This says that when the status of the fileInput button changes, call the function MyFileReader.
- This means we need to write a MyFileReader function.
MyFileReader
- Since this is a callback, it will be passed a parameter
  - This is the event that occurred
  - Let's start by printing this out.
  - ```
  function MyFileReader(theEvent) {
     console.log(theEvent);
  } 
```
- From the reference, what we really want is the target.files field.
  - This is an array of objects.
- For convenience, I am going to store this is a variable
- ```
function MyFileReader(theEvent) {
   let file = theEvent.target.files[0];
   console.log("The file is ", file.name);
} 
```
- We will be back here later.
A file reader
- Javascript has a built in file reader object.
- reference
- We need one.
  - I am going to declare it in the main as it is needed in
    - The change event handler to invoke the reader.
    - The finished reading event handler.
  - I will also set up an event handler for when a read is finished.
```
<script type="text/javascript">
"use strict"

const reader = new FileReader();
reader.addEventListener("loadend", SortThem); 
```

Using the reader

In MyFileReader I added

function MyFileReader(theEvent) {
   let file = theEvent.target.files[0];
   console.log("The file is ", file.name);

   reader.readAsText(file);
}

In addition, we need to supply the SortThem function

function SortThem() {
   console.log(reader.result);
}

Note, reader.result is a text string containing the contents of a the.

Extracting the data.

There are a number of string function
I will use split.
Then parseInt to turn it into an integer.

function SortThem() {
   //console.log(reader.result);

   let i;
   let rawData = reader.result.split(" ");
   let data = [];
   for(i = 0; i < rawData.length; i++) {
      data.push(parseInt(rawData[i]));
   }
}

note that both data and rawData are arrays
reference

Adding output
- We will do better later.
- Right now we will replace the entire document.
- We do this with document.write
- This is takes html.
- ```
   for(i =0; i < data.length; i++) {
      document.write(i + ": ",  data[i], "<p>");
   }
} 
```

Finally a sort routine.

function Sort(data) {
   let smallest, i , j;

   for(i = 0; i < data.length; i++) {
       smallest = i;
       for(j = i+1; j < data.length; j++) {
          if (data[j] < data[smallest]) {
              smallest = j;
          }
       }
       if (smallest != i) {
          let tmp = data[i];
          data[i] = data[smallest];
          data[smallest] = tmp;
       }
   }
}