By the end of today, you should:
understand why modularity is useful
write code that can be used in different applications (write once, use many times)
One of the big ideas that we have revisited several times this semester is the concept of modularity. Modularity is important for many reasons. Today we will focus on the following aspects of it:
The early railroads suffered from incompatibility because different rail lines used different widths between the rails, so passengers would have to get off one train and board another in order to continue their journey.
Consider what life would be like if every maker of electrical appliances used a different plug?
With software, pieces fit together when the inputs to a function are right (the proper datatypes, etc) and the output is correct.
customparts, it's also nice to reuse generic parts with other equipment, like borrowing someone's cell phone charger, even a different manufacturer! Similarly, in software, if a function is general, it can be used in other software applications.
In the real world, it's nice when parts are generic and reusable, everything from batteries (a D-cell or a AA), nuts and bolts, power cords, and so forth.
Furthermore, this means that the manufacturer can't always anticipate how something will be used.
I often find that students will balk at being asked to implement
a function because they don't know how it will be used. They want
to know about its context. Who will be calling it? Why? While
those are fine questions, sometimes the answer is you don't need
to know that,
any more than the shopkeeper needs to know what
device you are putting those D-cells into.
Which of the following is NOT related to the concept of modularity:
keeping HTML, CSS, and Javacript in separate files
writing functions with parameters and return values
using global variables
using using prompt()
to get user input
We should use modularity...
When we're part of a big tech company providing an API
When we're part of a team of programmers
When we're working alone
all of the above
A "module" is:
A package of simple, neat, clean code that can easily be edited.
an internal style sheet that allows style changes to be easily made
HTML code that can be easily copied and edited.
distinct, separable code that can be used more than once.
Two people are defining functions that will depend on each other (e.g, each function invokes the other). Which of the following is TRUE?
The two people need to agree on the names of the functions and the names of the parameters
The two people need to agree on the names of the functions but not the names of the parameters
The two people need to agree on the names of the parameters but not the names of the functions
The two people do not need to agree on either the names of the functions or the parameters
Prof. Ellen Hildreth created a cool way to experience modularity in the CS110 course. There are two applications that use a set of six JavaScript functions
We hope that after these activities:
Will be posted later, visit again after .
Quiz answers:
1. D 2. D 3. D 4. B
Students working in teams write some code that went missing, which if added to two different pages, contributes into making these applications complete. The cool thing that the same identical code is used by both applications.
// ================================================================ // file randomColor.js function randomColor() { var color = randomInt(5); if(color == 0) { return "red"; } else if(color == 1) { return "magenta"; } else if(color == 2) { return "green"; } else if(color == 3) { return "cyan"; } else if(color == 4) { return "yellow"; } } // ================================================================ // file changeColor.js function changeColor(row, column, color) { var cellid = "#cell" + row + column; $(cellid).css('backgroundColor', color); } // ================================================================ // file moveLeft.js function moveLeft(row, column, color1, color2) { changeColor(row,column, color1); column --; if(column < 0) { column = 9; } changeColor(row,column, color2); return column; } // ================================================================ // file moveRight.js function moveRight(row, column, color1, color2) { changeColor(row,column,color1); column ++; if(column == 10){ column = 0; } changeColor(row,column,color2); return column; } // ================================================================ // file moveUp.js function moveUp(row,col,color1,color2) { changeColor(row,col,color1); row --; if (row<0) { row = 9; } changeColor(row,col,color2); return row; } // ================================================================ // file moveDown.js function moveDown (row, col, color1, color2) { changeColor (row, col, color1); row ++; if (row == 10) { row = 0; } changeColor (row, col, color2); return row; }