Unit 3: Intro to App Design
4 things common to all computers
Input
Take in information based on what you tell the computer to do
Data that are sent to a computer for processing by a program. Can come in a variety of forms, such as tactile interaction, audio, visuals, or text
For example, the user clicks a button
Storage
Memory
Processing
Manipulates it using an algorithm
A series of commands
Then sends it back to be stored in memory again
Continues until the processed information is ready to be outputted
Output
Any data that are sent from a program to a device
Depends on what the computer is designed to do
Text
Photos
Videos
Tactile interaction
May even be an input to another computer
For example, a song is played
User Interface: the inputs and outputs that allow a user to interact with a piece of software. User interfaces can include a variety of forms such as buttons, menus, images, text, and graphics
For example, a screen with buttons, images, and text
Input: data that are sent to a computer for processing by a program. Can come in a variety of forms, such as tactile interaction, audio, visuals, or text
Output: any data that are sent from a program to a device. Can come in a variety of forms, such as tactile interaction, audio, visuals, or text
Program Statement: a command or instruction. Sometimes also referred to as a code statement
Program: a collection of program statements. Programs run (or “execute”) one command at a time
Two different ways for programs to run
Sequential Programming: program statements run in order, from top to bottom
No user interaction
Code runs the same way every time
Event Driven Programming: some program statements run when triggered by an event, like a mouse click or a key press
Programs run differently each time depending on user interactions
Difference between a sequential program and an-event driven program
Sequential programming is running the same command many times in succession
Event-driven programming is a single execution of all commands
Examples of events
Mouse clicks
Mouse overs
Key presses
Bug: when a computer is not working the way it’s supposed to
Debugging: sorting through your code, correcting your mistakes and fixing it
4 important steps when debugging
Describe your problem
Figure out what’s happening
What did you want your code to do?
What is it actually doing?
Does it always happen?
Hunt for bugs
Figure out what is it in your code that is causing that
Are there warnings or errors?
What did you change most recently?
Try out solutions
Try out small solutions and see how they affect your code
Document the bug
Document what you learned
What strategies did you use?
Debugging Strategies
Keep your code clean
Use clear, meaningful IDs for your elements
Keep your code organized in chunks that do the same thing
Use comments to explain your code
Write code using blocks
Run your code
Run your code a lot, every time you add a command or two
Slow down your code with the speed slider. Watch how it runs closely
Use console.log to get output. Add extra output statements throughout your code to get feedback on what parts are running
Use classmates and resources
Talk out the problems with a partner or classmate
Compare your code to examples that you know work
Read documentation to know how a block is supposed to work
Hand trace your code to track what’s happening
Documentation: a written description of how a command or piece of code works or was developed
Comment: from of program documentation written into the program to be read by people and which do not affect how a program runs
Pair programming: a collaborative programming style in which two people work together at the same computer to write code, and switch between the roles of writing code and tracking or planning high level progress
1 person is the driver
Person using the computer actually typing the code
Manipulates the keyboard and the mouse
The other person is the navigator
Keeps track of the big picture and helps decide what to do next
Guides towards the goal
Good because another person may be able to see what you missed
Important to switch roles often so you can practice both roles and learn from one another
Reason to include comments in a program
Comments tell the programmer what the code is doing
Command: a simple instruction for the computer. Put many together and you get algorithms and computer programs
Computer Program: a sequence of steps written in a programming language that can be followed to solve a problem, especially by a computer
OnEvent programming statement: statements that should only run upon a specific user action should be placed
When debugging, you should
Add some console.log statements to see what is going on
Reduce the amount of code and see if the behavior improves
Describe your program and the odd behavior to a friend
Documentation for code: a written description of how a command or piece of code works or was developed
Typical phases in the development process for a piece of software
Investigation and reflecting
Designing
Prototyping
Testing
Testing is the stage of the development process a team is most likely to get feedback from a potential user of an app
Syntax error: a mistake in the program where the rules of the programming language is not followed
Purposes of having potential users test a program or app
To see if there are any bugs
To get input on the design
To see how a user interacts
It is important for element IDs to have meaningful names so when referencing different elements, you don’t get confused, and it is very easy to differentiate them
Difference between a programming language and natural (every-day) language
The programming language can’t understand our everyday language, so we have to use words that it will understand
There are some features in programming that we don’t necessarily use when we talk
4 things common to all computers
Input
Take in information based on what you tell the computer to do
Data that are sent to a computer for processing by a program. Can come in a variety of forms, such as tactile interaction, audio, visuals, or text
For example, the user clicks a button
Storage
Memory
Processing
Manipulates it using an algorithm
A series of commands
Then sends it back to be stored in memory again
Continues until the processed information is ready to be outputted
Output
Any data that are sent from a program to a device
Depends on what the computer is designed to do
Text
Photos
Videos
Tactile interaction
May even be an input to another computer
For example, a song is played
User Interface: the inputs and outputs that allow a user to interact with a piece of software. User interfaces can include a variety of forms such as buttons, menus, images, text, and graphics
For example, a screen with buttons, images, and text
Input: data that are sent to a computer for processing by a program. Can come in a variety of forms, such as tactile interaction, audio, visuals, or text
Output: any data that are sent from a program to a device. Can come in a variety of forms, such as tactile interaction, audio, visuals, or text
Program Statement: a command or instruction. Sometimes also referred to as a code statement
Program: a collection of program statements. Programs run (or “execute”) one command at a time
Two different ways for programs to run
Sequential Programming: program statements run in order, from top to bottom
No user interaction
Code runs the same way every time
Event Driven Programming: some program statements run when triggered by an event, like a mouse click or a key press
Programs run differently each time depending on user interactions
Difference between a sequential program and an-event driven program
Sequential programming is running the same command many times in succession
Event-driven programming is a single execution of all commands
Examples of events
Mouse clicks
Mouse overs
Key presses
Bug: when a computer is not working the way it’s supposed to
Debugging: sorting through your code, correcting your mistakes and fixing it
4 important steps when debugging
Describe your problem
Figure out what’s happening
What did you want your code to do?
What is it actually doing?
Does it always happen?
Hunt for bugs
Figure out what is it in your code that is causing that
Are there warnings or errors?
What did you change most recently?
Try out solutions
Try out small solutions and see how they affect your code
Document the bug
Document what you learned
What strategies did you use?
Debugging Strategies
Keep your code clean
Use clear, meaningful IDs for your elements
Keep your code organized in chunks that do the same thing
Use comments to explain your code
Write code using blocks
Run your code
Run your code a lot, every time you add a command or two
Slow down your code with the speed slider. Watch how it runs closely
Use console.log to get output. Add extra output statements throughout your code to get feedback on what parts are running
Use classmates and resources
Talk out the problems with a partner or classmate
Compare your code to examples that you know work
Read documentation to know how a block is supposed to work
Hand trace your code to track what’s happening
Documentation: a written description of how a command or piece of code works or was developed
Comment: from of program documentation written into the program to be read by people and which do not affect how a program runs
Pair programming: a collaborative programming style in which two people work together at the same computer to write code, and switch between the roles of writing code and tracking or planning high level progress
1 person is the driver
Person using the computer actually typing the code
Manipulates the keyboard and the mouse
The other person is the navigator
Keeps track of the big picture and helps decide what to do next
Guides towards the goal
Good because another person may be able to see what you missed
Important to switch roles often so you can practice both roles and learn from one another
Reason to include comments in a program
Comments tell the programmer what the code is doing
Command: a simple instruction for the computer. Put many together and you get algorithms and computer programs
Computer Program: a sequence of steps written in a programming language that can be followed to solve a problem, especially by a computer
OnEvent programming statement: statements that should only run upon a specific user action should be placed
When debugging, you should
Add some console.log statements to see what is going on
Reduce the amount of code and see if the behavior improves
Describe your program and the odd behavior to a friend
Documentation for code: a written description of how a command or piece of code works or was developed
Typical phases in the development process for a piece of software
Investigation and reflecting
Designing
Prototyping
Testing
Testing is the stage of the development process a team is most likely to get feedback from a potential user of an app
Syntax error: a mistake in the program where the rules of the programming language is not followed
Purposes of having potential users test a program or app
To see if there are any bugs
To get input on the design
To see how a user interacts
It is important for element IDs to have meaningful names so when referencing different elements, you don’t get confused, and it is very easy to differentiate them
Difference between a programming language and natural (every-day) language
The programming language can’t understand our everyday language, so we have to use words that it will understand
There are some features in programming that we don’t necessarily use when we talk