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

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

Answer 2

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 3

To explain you in a minimal and easy way:

HTML is used to add elements like buttons, forms, paragraphs, divs which contain stuff but there are not many styling options with html.

CSS is used purely for styling the elements and for placements of elements in the html page. Example: if you want to set the width, height or color of some element, you can do that with CSS.

Javascript is used to add interaction with elements for example, if you click on some delete button, you'd want the user to get a confirmation modal (overlay) to confirm the deletion of the data. Javascript is used to interact with DOM (Document Object Model) elements (i.e. html elements in the page) or change css/html elements' properties dynamically.

Html is written inside

CSS can be done in these ways:

• Inline: Within the html tag itself. eg:

<div style = "width: 100px; height: 100px; background-color: teal">I am a div</div>

• Using an external file

/*This is the css file*/

.customDiv{
    width: 100px;
    height: 100px;
    background-color: teal;
  }

<!-- following shows the linking to your css file -->
<!-- href in the link tag is where you specify the path to your css file -->
<link type = "text/css" rel = "stylesheet" href = "myStyles.css"/>

<div class = "customDiv"> This is a div</div>

Javascript can be included inside <script></script> tags in the html or can be loaded up by specifying the path to your js file in the src property <script type="text/javascript" src="myCustonJS.js"></script>

example

document.getElementById("myDiv").onclick = function (){alert("JS DID THIS!!")};

#myDiv{
    width: 100px;
    height: 100px;
    background-color: teal;
  }

<div id = "myDiv">This is a div</div>

Answer 4

The web page you see in your browser may be a combination of structure (HTML), style(CSS) and interactivity(JAVASCRIPT). These jobs are undertaken by 3 different technologies, HTML, Javascript, and CSS which your browser knows how to interpret.

HTML marks the content up into different structural types, like paragraphs, blocks, lists, images, tables, forms, comments etc. CSS tells the browser how each type of element should be displayed, which may vary for different media (like screen, print or handheld device) JavaScript tells the browser how to change the web page in response to events that happen (like clicking on something, or changing the value in a form input)

Different browsers use different rendering engines By default the rendering engine can display HTML and XML documents and images. It can display other types of data via plug-ins or extension; for example, displaying PDF documents using a PDF viewer plug-in. The rendering engine will start parsing the HTML document and convert elements to DOM nodes in a tree called the "content tree". The engine will parse the style data, both in external CSS files and in style elements. Styling information together with visual instructions in the HTML will be used to create another tree: the render tree.

Read more here http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

Answer 5

The HTML page is the central component. That's what the browser is going to process.

In the HTML, you can have a <script></script> block and/or <style></style> block. Those blocks tell the browser, everything inside me is Javascript (<script>) or CSS (<style>).

Most people prefer to keep the files separate, and instead they link to an external .js and .css files, however it's not precisely required (just best practice). Even then, you're still using HTML to tell the browser about them via either <script src="someJsFile.js"></script> or <link rel="stylesheet" href="someCssFile.css">

Answer 6

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