Relationship between HTML and javascript. The basics of frontend development

The browser has HTML parser which reads html text and converts it into a DOM TREE

the browser has also CSS praser, which reads the styles inside <style> tags, or in an external css file. then combines the selectors of the css with the html DOM Tree, to produce a RENDER Tree which has both css and html.

the browser then does the screen layout and paints the pixels on screen according to the render tree.

the browser also has a JS engine, this engine reads the javascript inside its script tags, or in a seperate js file, then executes the javascript after the code has been fully loaded.

it is best if you seperate your HTML, CSS, and JS files each in its own file, to be CSP compliance

i'm giving you headline topics since you only need a small intro. feel free to ask me to elaborate more.

Update

Intro: pixels-to-screen pipeline

On each frame the browser does the following steps to render the page on screen.

• JavaScript. Typically JavaScript is used to handle work that will result in visual changes, whether it’s jQuery’s animate function, sorting a data set, or adding DOM elements to the page. It doesn’t have to be JavaScript that triggers a visual change, though: CSS Animations, Transitions, and the Web Animations API are also commonly used.

• Style calculations. This is the process of figuring out which CSS rules apply to which elements based on matching selectors, e.g. .headline or .nav > .nav__item. From there, once rules are known, they are applied and the final styles for each element are calculated.

• Layout. Once the browser knows which rules apply to an element it can begin to calculate how much space it takes up and where it is on screen. The web’s layout model means that one element can affect others, e.g. the width of the element typically affects its children’s widths and so on all the way up and down the tree, so the process can be quite involved for the browser.

• Paint. Painting is the process of filling in pixels. It involves drawing out text, colors, images, borders, and shadows, essentially every visual part of the elements. The drawing is typically done onto multiple surfaces, often called layers.

• Compositing. Since the parts of the page were drawn into potentially multiple layers they need to be drawn to the screen in the correct order so that the page renders correctly. This is especially important for elements that overlap another, since a mistake could result in one element appearing over the top of another incorrectly.

details and source: https://developers.google.com/web/fundamentals/performance/rendering/?hl=en

A little theory

It helps to think of the HTML page you see in the browser made up of three components:

1. DOM (Actual HTML elements)
2. CSS (Browsers uses these rules and decides how to render #1)
3. JavaScript (Programming language that browser understands. Can manipulate #1 and #2, also do bunch of other dynamic things)

As for your question #1 of why mixing is possible, you are correct, it is because all three are eventually rendered in browser to make a what you called 'page'.

It helps to think that as you go from #1 > #2 > #3 you progressively enhance the page.

HTML and CSS are NOT programming languages. So you are not combining anything.

• HTML is a set of specifications to describe the elements of your page.

• CSS is set of rules to tell browser how to display those elements.

• JavaScript is the only programming language of the three. That is used to dynamically change the behavior, display and interactions of a page.

All three of them are used along with each other to get the desired behavior on the page that user sees.

So how does a browser use these three

When a URL is entered/clicked in the browser, the browser requests the "content" form the server. Servers responds by sending back a initial HTML page which usually includes the DOM, CSS (as link tags) and JavaScript as (script) tags.

1. Browser starts by reading the HTML to create what is known as a content tree.

2. Then it "looks" at the CSS and "applies" the CSS to the content tree and creates what is called a render tree. This has the styling information added.

3. Finally it goes though layout process, where each of the HTML elements are assigned exact physical window coordinates to display at.

4. Finally everything is "painted" and you see the stylized HTML page.

5. JavaScript is parsed by the browser seprately as it is encountered in <script> tag. JavaScript can add/delete/modify existing components of the dom and change how CSS applies to them. It can also make new network calls.

Here's a diagram that describes this process for WebKit browsers (source)

This Article describes this process in great details if you are interested in further reading.

File extensions

About your question #2 on why .html extension. Technically speaking the .html extension is just a carry over from filesystems of operating systems, and browser does not care! What browsers do care about is what is called a mime-type and is typically returned by the Web-servers. Browsers are "taught" to behave a certain way when they see a specific mime-type. Some common ones are text/html or image/png etc..

HTML can link to external resources via <script> tags for JavaScript and <link rel="stylesheet"> tags for CSS. The browser understands these file extensions are intended to enhance the HTML page.

JavaScript is responsible for what you would traditionally think of as the code of the page. You can respond to events in the HTML markup via DOM queries (traditionally done either through functions like document.getElementById() or external libraries like jQuery). The DOM is just the representation of your HTML in the browser.

Finally, CSS can style content in the markup via selectors. These selectors are intended to match HTML elements and then apply some visual alterations to them.

Here's what it looks like put together.

HTML

<script src="myjavascript.js"></script>
<link rel="stylesheet" href="mycss.css">
<div id="foo">
   Hello World!
</div>

JavaScript (myjavascript.js)

document.getElementById("foo").addEventListener('click', function () {
    alert('Hey, you clicked the div!');
});

CSS (mycss.css)

#foo {
   color: red;
}