ECMA6 OOP With Classes, Basic Spreadsheet Generator

This tutorial will handle JavaScript programming with Object Orientation and classes. It's not just a basic, boring "Hello World" tutorial, the end result of the program will be an offline app with User Interface that generates a spreadsheet and contains calculations (addition, subtraction, division, modulo, multiplication). It can be opened with Excel, Open (Libre) Office or Google Spreadsheet.

So my intention was to automate spreadsheet generation that can produce many calculations without a huge effort.

At the end of the instructable the app will be provided as zip.

• A text or better a coding editor with syntax highlighting (e.g. sublime, emacs, visual studio code)
• A browser with ECMA 6 support (Firefox, Chrome), maybe Edge (haven't tested yet)
• A basic understanding how a progamming language work

CSV stands for Comma Seperated Values and at first you should now how this fileformat is structured.

If you open up this kind file with a normal text editor it looks like above.

A simple human readable text that each cell is separated by comma or semicolon, the carriage return (or simply enter) leads to the next row of the table.

If you open a csv with a spreadsheet program it should be look like above.

So we begin with the diagram that is showed on the top and start with the html file that contains a form with radio, checkbox and generate buttons

The form is for the human interaction process, containing the visual elements, (radio) buttons, checkbox. It will be accessed by the controller module.

At the bottom of the html form, the script tag links to the requirejs library that it is used for loading seperated class files. You could also download the require.js library and link it directly so that it runs offline. Afaik there is still no native module loading support in ECMA 6, but in the next releases it will be hopefully integrated.

As you can see in the diagram, there is an entity (define imports) for the modules loads.

Inside the script tag, the data-main is assigned by imports/class.js, which leads to the imports of the class files.

So the controller has now access to all of the defined classes and can instatiate them.

Now we take a look at the controller:

After input evaluations (radio button, checkboxes already checked, rastersize), the eventListener reacts by clicking the generate button:

• it checks if the swap checkbox is checked
• it reads the keyinput (mxn)
• instatiation of the calc and filewriter module
• the check which radio button is chosen
• then assigning all of the evaluated inputs to the model instance
• the res(ult) of the model will be written in a blob to provide the csv file

The next is the calculator module that generates a variable sized spreadsheet (dependent on user input) as csv file.

The constructor inits the default values of the inputs. When calc() is called it generates a Matrix in a nested for loop, checks at the same time if the operands are swapped (commutativity) and if the mode of the operation it's an addition, subtraction or something other.

The Filewriter constructor contains a filename string variable e.g. "calcTable.csv" and the downloadlink is generated via DOM.

setContent() stores the generated String from the calculation module into the Blob(), that can takes up a set of Strings as text or csv. The method createFile() generates a downloadlink of the blob, that represents as csv or text file.

So if you open up autoCalcGUI.html with your browser you generate simply a calculation spreadsheet, by choosing operation, entering the rastersize (e.g. 123x456) and clicking the generate button, then suddendly a download link for the csv-table appears below.

Thanks to Chrome's V8 engine it can also calculate and generate huge spreadsheets 1000x1000 = 1000000 in a couple of seconds.

Update: try, catch when input is not valid

Have fun and the app is provided as zip.