CS I · Mon Nov 2 · 14.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. Today's Bench Basics activity: The Shape. It opens later in class and lives on slide 4 of this deck.
  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.

The Shape of a Java Program

This reading walks through the parts of one short Java program, because every Java program the class reads this semester has the same outer shape, which is a class with a method named `main` inside it.

One Program, Line by Line

The program below has seven lines, and the output under it is what the program really printed when it was run with the course's Java tools.

1public class Main {
2    public static void main(String[] args) {
3        System.out.println("Bench Basics");
4        System.out.println("The Shape");
5        System.out.println("Every statement ends with a semicolon.");
6    }
7}
Bench Basics
The Shape
Every statement ends with a semicolon.

Line 1 names the class, `Main`, and opens the class's brace, while line 2 is the header of the method `main` and opens the brace for `main`. Lines 3, 4 and 5 are three statements, and each one ends with a semicolon. Each statement prints one line, which is why the output has three lines, and then line 6 closes `main` and line 7 closes the class. The spaces at the start of lines 2 to 6 make each block easy to see, but Java does not need them, and the same program with every line pushed to the left margin prints the same three lines.

Braces always come in pairs, because each `{` opens a block and a matching `}` closes it. A block is a group of statements between a pair of braces, and in this program the pair for `main` (lines 2 and 6) sits inside the pair for the class (lines 1 and 7). The inner pair closes first, so the last brace in the program belongs to the class. When the last brace is left out, the program does not compile, and the Java compiler reports "reached end of file while parsing," because the class was never closed. The table below lists every part.

part                        line   what it does
class header                1      names the class Main and opens its brace
header of main              2      names the method main and opens its brace
statement                   3      prints Bench Basics
statement                   4      prints The Shape
statement                   5      prints Every statement ends with a semicolon.
brace that closes main      6      ends the block of main
brace that closes the class 7      ends the class

On the bench, the program puts each brace on a line of its own. The braces still pair up the same way, so the job is to match each `{` with its `}` and not to count on where the lines break.

Java Words for the Bench

The word `class` begins the class, and the name after it is the name of the class. The word `main` names the method where the program starts, and a statement is one instruction, much like a sentence in English, that ends with a semicolon. The words `public`, `static` and `void` sit in front of `main` in every program, and `String[] args` sits inside its parentheses. The class will learn what `public static void` and `String[] args` mean later, in AP Computer Science A, and today the job is only to find each part.

Sources: Oracle, A Closer Look at the Hello World Application (n.d.); Oracle, Expressions, Statements, and Blocks (n.d.); Bench Basics, B09 The Shape (2026); course JDK, Main.java (2026).

Links for today

HTML, CSS, JavaScript and Java

This section explains the three languages of a web page, the job of each one, and why Java is a different language that usually runs somewhere else.

Three Languages, Three Jobs

A web page is written in three languages, and MDN, Mozilla's web documentation, describes them as three layers that build on one another. HTML is the language that says what is on a web page, so it gives the page its structure. HTML marks each part of the page, and most parts have an opening tag, the content and a closing tag. For example, the HTML of the Bench Basics page puts the code panel, the trace table and the Check row button on the page. Changing the HTML does not change a color, because color is set in CSS.

CSS is the language that sets how the parts of a page look, including their size, color, font and spacing, so it gives the page its style. A CSS rule names the parts of the page it applies to and gives a value for each property, such as a background color or a width. For example, CSS sets how wide a text box is and what color a button is. CSS cannot make a button respond to a click, because it only sets how things look.

JavaScript is the language that says what a page does when something happens, so it gives the page its behavior. For example, JavaScript can run a piece of code each time a person clicks a button, and that code can change what the page shows. JavaScript can also run on servers, but on a web page, JavaScript runs in the browser, which here means on the Chromebook.

The Three Languages on the Bench

Figure 1 shows three short excerpts from the source code of the Bench Basics page, one for each language. The first excerpt is the HTML that puts the Check row button on the page.

<button type="submit" className="jk-btn">Check row</button>

The bench is written with a tool called React, which uses the word className where plain HTML writes class. The second excerpt is the CSS rule that colors a finished row of the trace table pale green.

.jk-table tr.jk-done td { background: #eef8f1; font-family: var(--mono); }

The third excerpt is the JavaScript that runs when a student presses Check row, and it calls checkRow, the part of the code that checks each box in the row.

(e) => { e.preventDefault(); if (rowAt < job.rows.length) checkRow(); }

HTML has put the button on the page, and when a student presses it, JavaScript checks the row. When the row is right, the JavaScript marks it as done, and the CSS rule for a done row turns it green. If the green were changed to blue, only the CSS would change, and the HTML and the JavaScript would stay the same. One file can hold all three languages, as the September games did, or each language can sit in a separate file.

Java Is a Fourth Language

JavaScript and Java are two different languages with similar names. MDN states that "JavaScript should not be confused with the Java programming language," because the two follow different rules and are used for different jobs. The Java on the bench is not HTML, CSS or JavaScript. The bench shows Java as text to read, and it never runs Java in the browser. Its outputs were recorded ahead of time by running real Java with the course's Java tools.

Java usually runs outside the browser, and as the Oct 28 lesson explained, the Java compiler turns source code into bytecode, and a program called the Java Virtual Machine runs that bytecode. The course's one-sentence model is that Java is compiled to bytecode, which runs on the Java Virtual Machine. Oracle's Java Virtual Machine runs on servers as well as on desktop computers. On a server, Java can run in the back end, where only its results reach the user's screen. Java also runs in many Android apps, which Android's own documentation says can be written in Kotlin, Java or C++. The JavaScript behind the Check row button is not an example of Java outside the browser, because it is not Java at all.

Reading Java This Semester

Starting today, the class reads Java on the bench, and the first skill is the shape of a Java program. Every program has a class, a method named main inside the class, pairs of braces that mark where each part starts and stops, and statements that end with semicolons. Reading 2 walks through one short program part by part.

Summary

HTML says what is on a web page, CSS sets how each part looks, including its size and color, and JavaScript says what the page does when something happens. On a web page, JavaScript runs in the browser. Java is a different language that usually runs on servers, in back ends and in many Android apps, and on a server, Java is compiled to bytecode, which runs on the Java Virtual Machine.

Sources: MDN, HTML: Creating the content (n.d.); MDN, What is CSS? (n.d.); MDN, width (n.d.); MDN, What is JavaScript? (n.d.); MDN, JavaScript glossary (n.d.); MDN, Introduction to the server side (n.d.); Oracle, About the Java Technology (n.d.); Oracle, JVM Specification, SE 21 (n.d.); Android Developers, Application fundamentals (n.d.); React, Quick Start (n.d.); Bench Basics source code (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 web page has a text box where a student types a name. Which language sets how wide the text box is?

  • HTML
  • CSS
  • JavaScript
  • Java

MC 2. A teacher adds a link to the class calendar on a web page. Which language adds the link to the page?

  • HTML
  • CSS
  • JavaScript
  • Java

MC 3. On a typing game web page, the next letter lights up each time a player presses a key. Which language responds to the key press?

  • HTML
  • CSS
  • JavaScript
  • Java

MC 4. According to the passage, where does Java usually run?

  • In the browser on the Chromebook, beside the HTML, CSS and JavaScript
  • Outside the browser, on servers and in back ends, and in many Android apps
  • Inside the Bench Basics page, which runs each Java program when Check row is pressed
  • Only inside CSS files, where it sets the colors of the parts of a page

MC 5. Which line names the class in this program?

1public class Parade {
2    public static void main(String[] args) {
3        System.out.println("Zulu");
4        System.out.println("Rex");
5    }
6}
  • Line 1, because the name after the word class is the class's name
  • Line 2, because the word main is the name of the whole program
  • Line 3, because the first statement gives the program its name
  • Line 6, because the last brace shows which class just ended

MC 6. In this program, which line holds the brace that closes main?

1public class Weather {
2    public static void main(String[] args) {
3        System.out.println("Hot");
4        System.out.println("Humid");
5        System.out.println("Rain after 3");
6    }
7}
  • Line 7, because it is the last brace in the program
  • Line 6, because main's pair is inside the class's pair and closes first
  • Line 2, because the brace for main sits on the same line as main
  • Line 5, because main ends after its last statement

MC 7. How many statements does this program have?

1public class Streetcar {
2    public static void main(String[] args) {
3        System.out.println("St. Charles");
4        System.out.println("Canal");
5        System.out.println("Riverfront");
6        System.out.println("Rampart");
7    }
8}
  • 8, one for each line of the program
  • 6, one for each line that has words on it
  • 4, one for each line that ends with a semicolon
  • 2, one for each pair of braces

MC 8. In this program, what marks the end of the statement on line 3?

1public class Main {
2    public static void main(String[] args) {
3        System.out.println("Second line");
4    }
5}
  • The closing brace on line 4, because a brace ends each statement
  • The closing parenthesis, because the statement's text ends there
  • The semicolon at the end of line 3
  • The end of the line, because each line is one statement

MC 9. What is the name of the method that holds this program's statements?

1public class Main {
2    public static void main(String[] args) {
3        System.out.println("Beignets");
4        System.out.println("Coffee");
5    }
6}
  • Main, the name written after the word class
  • main, the method whose braces hold the statements
  • println, the word that appears in every statement
  • System, the first word of every statement

MC 10. In this program, which pair of braces is inside the other?

1public class Snowball {
2    public static void main(String[] args) {
3        System.out.println("Nectar");
4        System.out.println("Wedding cake");
5    }
6}
  • The pair for main, on lines 2 and 5, is inside the pair for the class, on lines 1 and 6.
  • The pair for the class, on lines 1 and 6, is inside the pair for main, on lines 2 and 5.
  • The pair on lines 1 and 2 is inside the pair on lines 5 and 6.
  • Neither, because the two pairs sit side by side and do not overlap.

CR 1. Label the parts of this program. Name the line that names the class, the line that is the header of main, each line that is a statement, and the line of each closing brace, saying what each closing brace closes.

1public class Bus {
2    public static void main(String[] args) {
3        System.out.println("Route 88");
4        System.out.println("Canal Street");
5        System.out.println("Next stop");
6    }
7}

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

CR 2. In two sentences, explain why every { in a Java program needs a matching }.

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

Figure 1. Inside the browser on a Chromebook, HTML puts the Check row button on the Bench Basics page, CSS colors a finished row green and JavaScript runs when Check row is pressed, while Java usually runs outside the browser, on a server, where its bytecode runs on the Java Virtual Machine, or in an Android app.
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. Look at this program. Count its statements, its semicolons and its pairs of braces, and say which pair of braces belongs to main. Explain how you counted line 4.

1public class Practice {
2    public static void main(String[] args) {
3        System.out.println("Warm up");
4        System.out.println("Drills"); System.out.println("Scrimmage");
5        System.out.println("Cool down");
6    }
7}

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

CR 4. Pick a website you use. 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 does each job.

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

Bench Basics

The Shape

Open the bench, do its six jobs, then paste your credit code into the credit-code form. You can turn in up to three codes per bench; your best score is your grade.

Bench Basics opens during your class period.

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.