Relationship between HTML and javascript. The basics of frontend development

Question

I have mainly worked at server side layer of enterprise applications (Java EE, Spring framework).

Now, I am trying to understand (Just to understand, not to master) client side technologies. A read about HTML and CSS in books and online material). The next technology I want to look at is java-script.

I have difficulty understanding how we can combine all these technologies and make a "page". For example if I create somepage.html, it can have HTML, CSS, JavaScript (and the extension is still .html). It is like "mixing" various technologies, How is that possible?

Is it because the page is eventually read by the browser and hence the mixing is possible?

Can anyone help me in simple words to clarify these doubts?

Answer 1

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..

Answer 2

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;
}