The Differences Between HTML, CSS, and JavaScript — What the Web Server Tier Draws

This article covers the three that make up the web server tier: HTML, CSS, and JavaScript.

They are written in separate places — index.html, style.css, and script.js — because what they decide is different.

The three files do not arrive together.

The browser receives all three files, and the browser is what loads them and what runs them.

HTML describes what is on the screen as part types and their order

HTML — the language that describes what is on the screen as part types and their order — goes in index.html.

Each individual part of the screen is an element, the names and settings attached to an element are attributes, and the marks that show where an element begins and ends are tags.

The index.html for the booking form is made of these three.

<form>
  <input type="date">
  <button type="button" id="reserve" class="action">Book</button>
  <p id="message"></p>
</form>

id and class are the names CSS and JavaScript use later to select a part.

An id is used only once per page, while a class can be attached to any number of elements.

Elements can nest, and the button element sits inside the form element.

The head element holds the page title and the names of the files it uses, and only what is inside the body element appears on the screen.

index.html only says what is there

All you write in index.html is what is on the screen.

Tags show the type of each part, you write the contents and the order they line up in, and the id and class on an opening tag are the names another file uses later to select that part.

CSS collects how elements look into a separate file

CSS — the language that sets how HTML elements are shown, as rules for color, size, and layout — decides only the appearance.

style.css takes this form.

.action {
  background-color: #2a6f97;
  color: white;
  border-radius: 8px;
}

The .action at the start specifies which elements it applies to.

The three lines inside the braces apply to every element whose class is action.

Inside style.css you line up many rules like this.

When one screen has three buttons, how many places you fix to change the color depends on where you wrote the appearance.

You can also write the appearance in an element's style attribute, but then you repeat the same change once per element.

Collect it in style.css and there is one place to fix.

style.css selects by name and decides the appearance

All style.css does is list which part is shown how.

The part is chosen by the class or id name given in index.html, and it does not add parts or rewrite text.

JavaScript reacts to what you do and rewrites the screen

A screen made only of HTML and CSS does not change its contents after it is displayed.

Showing text when the button is pressed is what JavaScript handles in the web server tier.

script.js takes this form.

const button = document.querySelector("#reserve");
button.addEventListener("click", () => {
  document.querySelector("#message").textContent = "Your booking was sent";
});

The document on the first line is the name for the whole page the browser loaded.

The #reserve that follows is how you select the element whose id is reserve, and the mark before the name says whether it is a class or an id.

The three files are connected by the names given in index.html.

The addEventListener on the second line registers what to do on a click.

The () => { } that follows is the form where you write, inside the braces, the code to run when it is pressed.

An occurrence like this click, where the browser tells the program what the user did, is an event.

Clicks are not the only kind of event.

You register in advance what to do on which event.

A color change when the mouse is over an element comes from CSS, and submitting a form is done by the browser.

script.js also reaches the user's browser and its contents can be read, so you do not write values in it that others must not see.

script.js runs only when it is called

All script.js does is register in advance: when this is pressed, do this.

The code the browser calls when it is pressed rewrites parts of the screen, but the contents of index.html do not change, and since script.js reaches the user's browser, you do not write values in it that others must not see.

The browser builds the DOM from HTML, applies CSS and draws, then rewrites it with JavaScript

The browser does not display the HTML text as it is; it assembles the nesting of elements as data.

That is the DOM — data that lines up the elements with their nesting intact.

What you see on the screen is a drawing of this DOM.

The code registered by script.js also waits in the same browser memory as the DOM.

The three files arrive separately and come together as one DOM inside the browser.

The page you see on the screen is a drawing of this DOM.

Applying the CSS to the DOM, calculating positions and sizes, and drawing is rendering.

Only the DOM in the browser's memory is rewritten.

The index.html that arrived and the files on the public server stay as they are.

Content you want to keep is sent to the application server tier and stored in the database tier.

How to write JavaScript, and practice running it in the browser, are covered in the JavaScript introduction course.

The screen is a drawing of the DOM

The browser assembles the nesting of parts from the index.html it received, then adds color and size from the rules in style.css and draws it.

What script.js rewrites is that assembled version, so when you reload, it is assembled again from the files that arrived and the rewritten content is gone.