Three Languages and Java
- Terminology and concepts to look out for: HTML · CSS · JavaScript
- Relevance to me: In September you built a game and saw three kinds of code in one file. Today you sort out which language does which job on a web page, and you see why the Java on the bench is a fourth language that usually runs somewhere else.
- Board Question: A web page has a button that turns green when you click it. Which language puts the button on the page, which one makes it green, and which one responds to the click? Is Java one of the three?
Open the discussion form on the right and answer Section 1 from your first reading.
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).
-
notebook cue: HTML
The Bench Basics page has a Check row button. Which language put the button on the page?
Check
HTML put the button on the page, because HTML says what is on a web page. See Three Languages, Three Jobs, paragraph 1, and the first excerpt in Figure 1.
-
notebook cue: CSS
A correct row turns green. Which language sets the green, and which two languages stay the same if the green is changed to blue?
Check
CSS sets the green, because CSS sets how each part of the page looks. If the green is changed to blue, only the CSS changes, and the HTML and the JavaScript stay the same. See The Three Languages on the Bench, the paragraph after the third excerpt.
-
notebook cue: JavaScript
You press Check row. Which language responds to the press, and where does that code run?
Check
JavaScript responds to the press by checking the row. On a web page, JavaScript runs in the browser, which here means on the Chromebook. See Three Languages, Three Jobs, paragraph 3, and the third excerpt in Figure 1.
-
notebook cue: HTML
The Bench Basics page has a Check row button. Which language put the button on the page?
Check
HTML put the button on the page, because HTML says what is on a web page. See Three Languages, Three Jobs, paragraph 1, and the first excerpt in Figure 1.
-
notebook cue: CSS
A correct row turns green. Which language sets the green, and which two languages stay the same if the green is changed to blue?
Check
CSS sets the green, because CSS sets how each part of the page looks. If the green is changed to blue, only the CSS changes, and the HTML and the JavaScript stay the same. See The Three Languages on the Bench, the paragraph after the third excerpt.
-
notebook cue: JavaScript
You press Check row. Which language responds to the press, and where does that code run?
Check
JavaScript responds to the press by checking the row. On a web page, JavaScript runs in the browser, which here means on the Chromebook. See Three Languages, Three Jobs, paragraph 3, and the third excerpt in Figure 1.
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).
Each table agrees on one language for each of the three jobs, and on one place where Java runs instead of the browser.
Chromebooks stay closed while your table talks. Sections 1 and 2 of the discussion form are already done. After you talk, finish Section 3 right here under My View. Submit before the exit ticket.
This form has three sections. Section 1: answer today's Board Question. Section 2: after the reading. Section 3 opens later in class. Today's Board Question: A web page has a button that turns green when you click it. Which language puts the button on the page, which one makes it green, and which one responds to the click? Is Java one of the three?
CR 1. Board Question: A web page has a button that turns green when you click it. Which language puts the button on the page, which one makes it green, and which one responds to the click? Is Java one of the three? Give your answer and one reason.
Write your answer in your lab notebook, labeled CR 1.
MC 1. Think about your answer to the board question. A web page has a button that turns green when you click it. Which language puts the button on the page, which one makes it green, and which one responds to the click? Is Java one of the three? Which position is closest to yours now?
- HTML does all three, because the whole page is an HTML file.
- HTML puts the button there, CSS makes it green, JavaScript responds to the click, and Java is none of them.
- Java responds to the click, because Java and JavaScript are the same language.
MC 2. (Reading claim 1) CSS can make a button respond to a click.
- Agree
- Disagree
MC 3. (Reading claim 2) On a web page, JavaScript runs in the browser, and Java usually runs somewhere else.
- Agree
- Disagree
MC 4. (Reading claim 3) Java and JavaScript are two names for one language.
- Agree
- Disagree
MC 5. (Reading claim 4) In Figure 1, the line that puts the Check row button on the Bench Basics page is HTML.
- Agree
- Disagree
MC 6. (Reading claim 5) If the green on a done row were changed to blue, the JavaScript on the bench would have to change too.
- Agree
- Disagree
MC 7. (Reading claim 6) The bench runs each Java program in the browser when a student presses Check row.
- Agree
- Disagree
MC 8. (Reading claim 7) Java is compiled to bytecode, which runs on the Java Virtual Machine.
- Agree
- Disagree
MC 9. (Reading claim 8) One file can hold HTML, CSS and JavaScript together.
- Agree
- Disagree
CR 2. (A different view) Write the view at your table that was most different from yours. If everyone agreed, write the strongest argument against your table's answer.
Write your answer in your lab notebook, labeled CR 2.
CR 3. Think about the Board Question again: A web page has a button that turns green when you click it. Which language puts the button on the page, which one makes it green, and which one responds to the click? Is Java one of the three? Do you have the same opinion as when you first answered the board question? If it is the same, what from the reading or table talk reaffirmed your opinion? If it is different, what from the reading or table talk changed your opinion?
Write your answer in your lab notebook, labeled CR 3.