1. LESSON 14 - Building an App: Image Scroller
UNIT 5 – TUESDAY, JANUARY 16, 2018

2. Vocabulary Alert:
Key Event - in JavaScript an event triggered by pressing or releasing a key on the keyboard. For example: "keyup" and "keydown" are event types you can specify. Use event.key - from the "event" parameter of the onEvent callback function - to figure out which key was pressed.
Refactoring Code - is the process of restructuring existing computer code—changing the factoring—without changing its external behavior. Refactoring improves nonfunctional attributes of the software.

4. Purpose of this lesson:
Use an array to maintain a collection of data in a program.
Create apps that allow user interaction through key events.
Refactor code in order to appropriately incorporate new functionality while maintaining readability and consistency.

5. You will extend the My Favorite Things app you built in the previous lesson so that it now manages and displays a collection of images and responds to key events.

6. Students are introduced to the practice of refactoring code in order to keep programs consistent and remove redundancies when adding new functionality. 

7. Most applications you use are not based on static pieces of code.

8. The software will be continuously updated both to correct errors and introduce new pieces of functionality. If later improvements are anticipated it is generally possible to develop programs in a way that easily incorporates new functionality. 

9.  At other times it is necessary to make larger changes to the way a program operates in order to incorporate new features while maintaining existing functionality. Refactoring code in this way can be a tedious and challenging endeavor, but it helps ensure that the final product is consistent and easy to maintain.

10.  If software is not kept in a logical, consistent, and succinct form, then it will only get harder to keep introducing new features, increasing the likelihood of errors.

11. So what does this mean? For example – “Isaac” works for a tax software company (like TurboTax). The tax code is constantly changing, so the company has a large staff of programmers who can change the code and answer client questions. They can also customize it for business companies, like H & R Block!

12. When we want to add new functionality to our programs, we'll of course have to write new code. Sometimes, when we add new code to an existing program, we’ll also have to make changes to the original components of our program.

13. Why might this be the case?
The old code and the new code contradict one another.
The old code and the new code may have redundant components.
Incorporating the new code may help us find better ways to write the old code.

14. Writing software is an iterative process
Writing software is an iterative process. We continuously update and improve our ideas as we learn new techniques, debug our software, or identify new features we’d like to add to our code. 

15. While our code will constantly be changing, we’d like it to remain organized, consistent, and readable. As a result, when we add new code to our programs, we may sometimes need to change the way we originally approached a problem.

16. Today we’re going to be further extending our My Favorite Things app, and seeing how this process plays out in practice.

17. Get into Code Studio Show me the completed Image Scroller, with buttons and sound and everything for credit!

18. GOAL: Reflect on the process of making improvements to existing code, how to do it well, and how to avoid having to do it too frequently.

19. What is refactoring?
Refactoring is the process of changing the way we wrote old code in order to keep programs consistent and readable while incorporating new functionality.
It is possible that refactoring code will not change the user’s experience but will make the program easier to read and maintain.
Refactoring is a useful process, but it can be time consuming and challenging. We’d ideally not refactor code very often but it is sometimes necessary.
Good planning and design can help avoid refactoring. Good use of functions and an organized program means that at the very least we limit areas that need to be changed.

20. SOME NOTES: One thing to watch out for here, the noise that corresponds to pressing the up arrow has a bit of a extra "silence" at the end. You might think it isn’t working but it was still processing the last keypress. So if a student hit the up arrow several times in a row, it might only work every other time but if they paused between clicking the key, it would make the noise each time. Another misconception was that students using text weren't using the "function(event)" with "event" as a parameter - if they don't use that as a parameter, event.key won't work.

21. Some more notes: