Relationship between HTML and javascript. The basics of frontend development -

i have worked @ server side layer of enterprise applications (java ee, spring framework).

now, trying understand (just understand, not master) client side technologies. few of technologies read (books, online material): html, css; next 1 javascript.

i have difficult how can combine these technologies , make "page", example if create somepage.html, can have html, css, javascript (and extension still .html). "mixing" various technologies, how possible?

is because page read browser , hence mixing possible.

can me in simple words clarifying these doubts?

a little theory

it helps think of html page see in browser made of 3 components:

1. dom (actual html elements)
2. css (browsers uses these rules , decides how render #1)
3. javascript (programming language browser understands. can manipulate #1 , #2, bunch of other dynamic things)

as question #1 of why mixing possible, correct, because 3 rendered in browser make called 'page'.

it helps think go #1 > #2 > #3 progressively enhance page.

html , css not programming languages. not combining anything.

• html set of specifications describe elements of page.

• css set of rules tell browser how display elements.

• javascript programming language of three. used dynamically change behavior, display , interactions of page.

all 3 of them used along each other desired behavior on page user sees.

so how browser use these three

when url entered/clicked in browser, browser requests "content" form server. servers responds sending initial html page includes dom, css (as link tags) , javascript (script) tags.

1. browser starts reading html create known content tree.

2. then "looks" @ css , "applies" css content tree , creates called render tree. has styling information added.

3. finally goes though layout process, each of html elements assigned exact physical window coordinates display at.

4. finally "painted" , see stylized html page.

5. javascript parsed browser seprately encountered in <script> tag. javascript can add/delete/modify existing components of dom , change how css applies them. can make new network calls.

here's diagram describes process webkit browsers (source)

this article describes process in great details if interested in further reading.

file extensions

about question #2 on why .html extension. technically speaking .html extension carry on filesystems of operating systems, , browser not care! browsers care called mime-type , typically returned web-servers. browsers "taught" behave way when see specific mime-type. common ones text/html or image/png etc..