CS I · Mon Dec 14 · 19.1 · We Do

Before the bell

You are responsible for all of this before the end of class.

  1. The discussion form in the I Do deck. All three sections. If you are here, this should be done.
  2. Your classwork. This form on the right. Section 1 before the exit ticket pops up; Section 2 past the floor.
  3. No Bench Basics today — this is a short or catch-up day.
  4. The exit ticket. It opens 15 minutes before the bell and lives on the last slide of this deck.
Classwork

The classwork form is not linked yet. Use Station View and write your answers in your lab notebook with the item labels.

Study Guide, Part 3

This reading gives the directions for the last part of your study guide, which you write today in Section 1 of the classwork form. Parts 1 and 2 came from the classwork on December 9 and December 10, and Part 3 covers the ideas from November.

How to Write an Entry

Each entry has three parts, written in the same order every time. First, write the term, and next, write one sentence in your own words that explains what the term means. Then give one example that you chose yourself and that did not come from the slides. An example from a website or an application you use is the best kind, because it shows that you can apply the idea to a new case. When an entry names two or three terms, write one meaning sentence for each term and one example that shows them working together. The entry below follows these directions for a term from October 27, so it is not one of today's eight.

compiler
Meaning: A compiler is a program that checks source code against the rules of a language and turns it into a form the computer can run.
Example: If a Java file is missing a semicolon, javac prints an error message with the line number and makes no .class file.

Today's eight entries come in this order: input, processing and output; requirement and test; HTML, CSS and JavaScript; event, condition and action; generated code and audit; file extension and file path; commit and diff; deploy. Entries 1 to 4 go in CR 1, and entries 5 to 8 go in CR 2. Keep each entry short and clear, since you will reread every entry tomorrow morning before the exam begins.

What Happens Next

After school today, your study guide is printed with all three parts, taken from your classwork responses. If you finished only some of the parts, your copy holds only those parts, so finish Part 3 before the period ends. You get your copy at the door tomorrow for a last look before the bell. The guide goes in your bag before Part A starts, because Part A is closed notebook, and Part B allows only a pencil and the printed Java Quick Reference. The guide is yours to keep after the exam.

Sources: CS I, Build Spec, Java On-Ramp, days 18.3, 18.4, 19.1 and 19.2 (2026); CS I, Programming Languages and Where Java Came From and Syntax, Error Messages and Debugging (2026).

Links for today

From Source Code to the Web

This section reviews how a small web page goes from a plan to the web.

What the Page Must Do

The case is an example made up for this review: a small page for a school robotics club, which shows the room for the club's next meeting. Like every computer tool, the page has an input, processing and an output. When a member clicks Ask, the click is the input, the page's code that checks whether the meeting is canceled does the processing, and the message on the screen is the output. In a tool that uses a model, the model does the processing.

A specification says what the page must do before anyone builds it. A specification is made of requirements, and each requirement names a result that a person can observe. The requirement "The page shows the room number of the next meeting" can be tested by opening the page and looking, while the wish "The page should be fast" cannot be tested, because it names no number to check. A test has three parts: an input, an expected output and a comparison with what the page actually does. When the page changes, the same test inputs are run before and after the change, and each new output is set beside the old one.

Writing the Source Code

Source code is the text a programmer writes in a programming language. The club's page uses three languages, each with its own job. HTML says what is on the page, such as the Ask button and the line with the room. CSS says how each part looks, such as the font and color of the Ask button. JavaScript says what the page does when something happens, and that behavior is written as an event, a condition and an action. For example, the sentence "When a member clicks Ask, if the meeting is canceled, show 'No meeting this week'" names all three parts in that order.

The page a visitor sees in the browser is not the source code. The source code is the text the programmer wrote, which the browser reads to draw the page. For this reason, a wrong room number is fixed in the source code, not on the page a visitor sees.

A model can also generate source code from a specification, and wherever the specification is silent, the model fills the gap anyway with a choice of its own, called an assumption. In November, a model asked for a birthday program with no name given wrote "Friend" where a name belonged. An audit checks generated code against the specification: it tests each requirement and writes down "met" or "not met" for each one. (For Java, the compiler turns source code into bytecode, which runs on the Java Virtual Machine.)

Saving Each Version

The club's source code is kept in files, and each file's extension tells the computer what kind of file it is, so style.css holds CSS and gear.png holds a picture. A file path is the route from one file to another. For example, the page shows the club's logo with the path images/gear.png, which means the folder images and then the file gear.png inside it.

A commit saves a snapshot of the whole project at one moment, with a short message from the builder. Changing a file does not save it in the history, but committing does, and a repository holds the project's files together with their full history of commits. When the club moved its meeting, the builder changed one line of index.html and committed it with the message "Move the next meeting to Room 108." The diff of that commit marks each changed line with a sign: the removed line names Room 214 and starts with a minus sign, and the added line names Room 108 and starts with a plus sign. Figure 1 shows this diff under the commit step.

Putting the Page on the Web

To deploy a project means copying its files to a host, which is the step that puts the page on the web at its address. A host is a server that stays connected to the internet, and it stores a site's files and sends them to browsers. A committed file that has not been deployed is not on the live site, because until the next deploy the host keeps sending browsers the old page with Room 214, so members still see that room. Figure 1 shows the whole path in one row, from specification to live page.

Summary

A specification lists requirements that can be tested, and source code is the text a programmer writes to meet them. An audit tests each requirement, and a commit saves a snapshot of the project in its history, which a diff can show line by line. Deploying copies the files to a host, which puts the page on the web at its address.

Sources: Franchitti, Introduction to Computer Science, OpenStax (2024); NASA, Appendix C: How to Write a Good Requirement and 5.3 Product Verification (n.d.); Mozilla, What is JavaScript?, Introduction to events, Dealing with files, What is a web server? and Publishing your website (n.d.); Oracle, About the Java Technology (n.d.); Chacon and Straub, Pro Git (2014); Git project, git-diff Documentation (n.d.); CS I passages, Oct 26 to Nov 16 (2026); classroom data, the robotics club example repository (2026).

Classwork · Section 1 — Reading 2

The classwork form is not linked yet. Use Station View and write your answers in your lab notebook with the item labels.

MC 1. A phone app listens to a voice memo, such as "Buy milk and call Grandma," and gives back a to-do list with two boxes to check. Which part of the app is the processing?

  • The spoken words, picked up by the phone's microphone
  • The two boxes, "Buy milk" and "Call Grandma"
  • The model sorting the spoken words into separate tasks
  • The person deciding which task to do first

MC 2. The robotics club drafts four lines for its page's specification. Which line is a requirement that a member could check?

  • The page should be fast.
  • The page shows the date of the next meeting under the club's name.
  • Members will enjoy reading the page.
  • The page will be the best club page in the school.

MC 3. After a change to the club's page, two members check it. Dana opens the page once and says the room looks right. Luis runs the same three tests he ran before the change, for a normal week, a canceled week and a new room, and writes each new output beside the old one. Whose check shows whether the change helped?

  • Luis's, because the same inputs before and after the change give outputs that can be set side by side
  • Dana's, because opening the page is how members really use it
  • Both, because each of them looked at the page after the change
  • Neither, because only the builder is allowed to test the page

MC 4. The club wants the words on the Ask button to be larger and bold. The page's files are index.html, style.css and meeting.js. Which file should the builder change?

  • index.html, because the button is written there
  • meeting.js, because the button is something a member clicks
  • style.css, because it holds the page's CSS
  • None of them, because the browser picks the size of the words

MC 5. The club's specification has this line: "When a member clicks Ask, if the meeting is canceled, show 'No meeting this week'." Which word names the part "the meeting is canceled"?

  • event
  • action
  • assumption
  • condition

MC 6. The club's specification never says what the page shows when no meeting is planned. A model wrote the page's code from that specification, and in that case the page now shows "Meeting: to be decided." Where did "to be decided" come from?

  • A member who typed it onto the page while it was open
  • The model, which filled the gap with an assumption of its own
  • The browser, which adds a message when a page has nothing to show
  • The compiler, which fills in missing parts before the page runs

MC 7. The builder audits the club's page before the room change goes out. Which line belongs in the audit?

  • "R2, shows the room of the next meeting: clicked Ask, saw Room 108, met"
  • "Move the next meeting to Room 108"
  • "31 members opened the page this week"
  • "Looks good to me, nice colors"

MC 8. The club's page shows its logo with images/gear.png. What does images/gear.png give?

  • Only the kind of file, which is a picture
  • The route from the page's folder through the images folder to gear.png
  • The commit in which the logo was first added
  • The host where the logo is kept on the web

MC 9. The builder commits the room change. A month later, a member opens that commit in the repository. What is in it?

  • Only the one line of index.html that changed
  • The host's address and the time of the next deploy
  • Every edit the builder typed that day, in the order typed
  • Every file in the project as it stood at that moment, and the builder's message

MC 10. Here is part of the diff for the club's commit. Which line did the commit remove?

@@ -6,7 +6,7 @@
 </head>
 <body>
   <h1>Robotics Club</h1>
-  <p>Next meeting: Room 214</p>
+  <p>Next meeting: Room 108</p>
  • The line with Room 108, because it is the last line shown
  • The line with Robotics Club, because it comes just before the change
  • The line with Room 214, because it starts with a minus sign
  • The line with @@, because it starts with a symbol

CR 1. (Study Guide, Part 3: entries 1 to 4) Write these four entries: input, processing and output; requirement and test; HTML, CSS and JavaScript; event, condition and action. For each term, write one sentence in your own words that says what it means. Then give one example for each entry that you chose yourself and that is not from the slides.

Write your answer in your lab notebook, labeled CR 1.

CR 2. (Study Guide, Part 3: entries 5 to 8) Write these four entries: generated code and audit; file extension and file path; commit and diff; deploy. For each term, write one sentence in your own words that says what it means. Then give one example for each entry that you chose yourself and that is not from the slides.

Write your answer in your lab notebook, labeled CR 2.

Figure 1. The robotics club's page moves from its specification to its address in one row of steps, and the commit step holds a diff with the old room removed and the new room added.
Classwork · Section 2 — Past the floor

The classwork form is not linked yet. Use Station View and write your answers in your lab notebook with the item labels.

CR 3. Trace this code in a table with a Line column, a commits column and an Output column, one row for each line that runs. Then give the exact output.

1int commits = 4;
2commits += 3;
3commits++;
4System.out.println("Commits: " + commits);

Write your answer in your lab notebook, labeled CR 3.

CR 4. Pick a web page you use often. Name one thing on it that HTML does, one thing that CSS does and one thing that JavaScript does, and say how you can tell which language is responsible for each.

Write your answer in your lab notebook, labeled CR 4.

Bench Basics

No bench today

There is no bench on this day. Finish your classwork and move to the exit ticket.

No bench today — the bench pop-up is off for this day.

Classwork

The classwork form is not linked yet. Use Station View and write your answers in your lab notebook with the item labels.

Exit Ticket

This opens during your class period.