Working with Files

Learning Objectives By the end of this lecture, you should be able to: – Examine a file that contains code with unfamiliar material, yet still be able to study and modify it as needed to suit your purposes. This includes: How to open a file to read information How to use a loop How to use array (i.e. square bracket) notation – Read in text from a file and use various String functions to work with the information read in from a file

Modifying Existing Code Early in your coding "careers", as you progress, you will frequently find yourself working with code that is unfamiliar to you. This is entirely normal and is, in some ways, a "next level" of developing solid coding skills. In this lecture, I will be showing you some examples that contain new and unfamiliar code. You will not be asked to work in great deal with the code, but you will be expected to study it and learn enough about it to modify the code to suit your needs. You are, of course, welcome and encouraged to try and read up on some of these concepts on your own. Again, this is how programmers have traditionally gained new knowledge, skills, and picked up new clever ways of accomplishing coding tasks.

Working with Files Most of the world’s digital information is stored inside files. Data files can include anything from a spreadsheet, database file, to a plain text file. Even digital images constitute data files that can be opened using programming code and examined or modified. We can use JavaScript to retrieve information from a digital file and use the information in that file to interact with our user. In this lecture, we will keep it fairly simple by opening a text file and outputting its contents to a web page. In the process, we will also review some issues pertaining to JavaScript security.

Scenario Imagine that you would like to take a detailed spreadsheet and output the results to your web page. Example: For example, suppose you wanted to display the results of the Kentucky Derby in an HTML table. You could manually type out all the results, but this would be painstaking, error-prone, and very inefficient! Besides, imagine if instead of a horse-race with horses, you instead were trying to print out the first 500 finishers of the Chicago Marathon! Now consider an alternative: You find a spreadsheet of the results (or just copy-paste), and save that file to your server. You can then use JavaScript to retrieve the contents of that file and display the results on your web page.

Example: Student Enrollment Let’s start with a simple example involving student enrollment. You have been given an Excel spreadsheet with a list of students names, year of birth, year of enrollment, and current registration status (i.e. full time v.s. part-time). You decide that you need a page that will display the first name, last name, and enrollment status of all the students. Here are the steps we will follow for this particular scenario: 1.Take the Excel spreadsheet and convert it to a comma-separated-value file. This will allow us to use the String ‘ split() ’ function to break up each record into its individual fields. 2.We will read in this file using JavaScript. As mentioned, we will use various string functions to work with the text in the file. 3.We will output the results as simple HTML content into our document. – In a subsequent example, we will output our results to an HTML table. (For those of you who have not seen HTML tables, don’t panic. They are not very dificult, and a 15 minute google search and review should get you up to speed).Remember that one of the objectives is to get to a point where, with a little research and practice, you can pick up new techniques on your own.

Security Issue: File Access As we will discuss in a subsequent lecture, one of JavaScript’s biggest security limitations is that scripts are not allowed to access files on the user’s computer. However, if the user chooses a file, say, by using the HTML tag, then this is considered as having given the script permission to access that file. So we will start by having the user select a file: Click the button and choose the file you want to work with (e.g. enrollment.csv): <input type='file' accept='text/plain' onchange='openFile(event)'> The ‘ onchange ’ event means that when the user selects a file and clicks ‘ Open ’, the function ‘ openFile ’ will be invoked.

File Access: Connecting to and opening the file Remember that the objective here is not to try and understand all of the code. At the end of the day, what I want you to be able to do is to understand the ‘gist’ of what is happening, but then to be able to modify certain key components of the code as necessary to suit your needs for other files and output. var openFile = function(event) { //openFile function; uses an anonymous function with an event object var input = event.target; //The 'target' attribute for a File box refers to the selected file(s) //'input' is a handle to a list of any files the user has selected //Most of the time, of course, the user will only select one file var reader = new FileReader(); //Don't worry about this line for now reader.readAsText(input.files[0]); ///'reader' is a handle to the first file the user selected //For our purposes, we will assume that the user will select only one file Don't try to understand this code just yet. It will make (a little) more sense when we look at it in context. Afterwards you can come back to it for further review.

File Access: Retrieving the file’s contents We will now retrieve the file’s contents:. We are keeping things simple for this example and assuming two things: 1.That we are dealing with a plain-text file 2.The values in the plain-text file are separated by commas var fileContents = reader.result; //'result' is a property that retrieves ALL of the file's contents as a String //We will store this text inside the variable 'fileContents‘ Try appending ‘fileContents’ into your HTML document (e.g. using document.write or via jQuery’s append function) – you will see the entire contents of the file as a single line. Important: In fact, each line is separated from the next by a special text character: \n Text editors use the \n as a way of referring to a new line. However, a web browser does not recognize this character. In HTML as we know, new lines are indicated by. Therefore, you will see that the browser simply display a single space between one line and the next.

Working with the text: Break up each line in the file into records Now that we have all of the file's contents stored as a string inside 'fileContents', var fileContents = reader.result; we will break up that long string of the entire file into an array of individual lines using split(). To do this, we must know that in text files, the end of a line (such as a carriage return or 'enter') is encoded with the string character \n Therefore, by breaking up the string on the newline character \n, we will have an array of smaller strings, each of which represents one line of the file: var lines = fileContents.split('\n');

Working with the text: Break up each line in the file into records contd. Let’s take a closer look at what happens when we invoked ‘split()’ on the newline character: var lines = fileContents.split('\n'); Recall that the split() function breaks up the String ‘ fileContents ’ into numerous pieces. Because we split on the newline character, \n, each piece represents a single line. Therefore, the variable ‘ lines ’ holds an “array”. What this means is that the first item in the variable line, lines[0] holds the first line of the file as a string, the second item, lines[1] holds the second line of the file as a string, and so on. For example, alert( lines[3] );  would output the 4 th line of the file.

Working with the text: Looping through the lines Our variable ‘ lines ’ now contains an array in which each item in lines: lines[0], lines[1], lines[2], etc represents a line from our text file. We will now use a loop to go through each item in our array and output it on a line in our HTML document. How many times do we need to loop? The answer is one time for each line in the file. Remember our ‘lines’ array? Well since that array holds one item for each line, the length of that array tells us the number of lines. So we will use lines.length to determine the number of times to loop. for (var i=0; i<lines.length; i++) { //everything inside here will occur ‘numberOfLines’ times //so if our file had 10 lines, this loop will execute 10 times }

Working with each individual line of text lines[i], represents a single line from our text file. The first time through the loop, I has a value of 0, so lines[i] is the same thing as saying lines[0]. The second time through the loop, i has a value of 1, so lines[i] now is the same thing as saying lines[1], and so on. for (var i=0; i<lines.length; i++) { var record = lines[i]; //record is holding ONE single line from our file recordValues = record.split(","); //Discussed next var firstName = recordValues [0]; var lastName = recordValues [1]; var enrollmentYear = recordValues [3]; $('#results').append ("Student #" + (i+1) + ": "); $('#results').append (firstName + " " + lastName + ": Enrolled in " + enrollmentYear + " "); } //end of for loop

Working with each line of text Recall the first lines of our loop: for (var i=0; i<lines.length; i++) { var record = lines[i]; //record is holding ONE single line from our file recordValues = record.split(","); //Discussed next... Each time we iterate through the loop, ‘record’ holds a single line of the file. Recall that in our file, each line has the record separated by commas as follows: First Name, Last Name, Birth Year, Enrollment Year, Enrollment Status For example: Roberta,Redgrave,1988,2013,FULL We will therefore need use split() again, but this time we want to break the string up based on commas: recordValues = record.split(","); ‘ recordValues ’ now holds an array such that the first name is in recordValues[0], the last name is in recordValues[1], the birth year is in recordValues[2], the enrollment year is in recordValues[3], and the enrollment status is in recordValues[4].

Working with each line of text We will now assign the pieces of information in which we are interested (i.e. the first name, last name and enrollment year) and retrieve them from our line. Also - don’t forget that we are still working with one individual line only. The next time through the loop, we will be working with the subsequent line from the file, and so on. for (var i=0; i<lines.length; i++) { var record = lines[i]; //record is holding a SINGLE line from our file recordValues = record.split(","); var firstName = recordValues [0]; var lastName = recordValues [1]; var enrollmentYear = recordValues [3]; $('#results').append ("Student #" + (i+1) + ": "); $('#results').append (firstName + " " + lastName + ": Enrolled in " + enrollmentYear + " "); } //end of for loop

Outputting the results to our HTML page Finally, we will output the results to our page: for (var i=0; i<lines.length; i++) { var record = lines[i]; //record is holding a SINGLE line from our file recordValues = record.split(","); var firstName = recordValues [0]; var lastName = recordValues [1]; var enrollmentYear = recordValues [3]; $('#results').append ("Student #" + (i+1) + ": "); $('#results').append (firstName + " " + lastName + ": Enrolled in " + enrollmentYear + " "); } //end of for loop

HTML Files See: parsing_input_file.htm Then look at a slightly more elaborate example in which we output results into an HTML table: display_file_as_table.htm