The relationship between HTML and javascript. Interface Design Basics

Question

I mainly worked at the server level of enterprise applications (Java EE, Spring framework).

Now I'm trying to understand (just understand, not master) client-side technologies . A few of the technologies that I read (books, online materials): HTML, CSS; the next one is javascript.

I find it difficult to combine all these technologies and make a "page", for example, if I create somepage.html, it may have HTML, CSS, JavaScript( and the expansion continues .html ). This is like “mixing” different technologies, how is this possible?

This is because the page is ultimately read by the browser and therefore confusion is possible.

Can someone help me with simple words clarifying these doubts?

Answer 1

Bit of theory

This helps to think about the HTML page that you see in the browser, which consists of three components:

• DOM (actual HTML elements)
• CSS (Browsers use these rules and decide how to make # 1)
• JavaScript (a programming language that the browser understands. Can manipulate # 1 and # 2, also create many other dynamic things)

Regarding your question # 1 about why mixing is possible, you're right because all three end up being displayed in the browser to do what you called the “page”.

, # 1 > # 2 > # 3 .

HTML CSS - . .

• HTML - .

• CSS - , , .

• JavaScript - . , .

, , .

,

URL- / , "" . HTML-, DOM, CSS ( ) JavaScript (script) .

• HTML content tree.

• "" CSS "" CSS content tree , render tree. .

• , layout, HTML , .

• , "", HTML-.

• JavaScript , <script>. JavaScript // dom CSS . .

, WebKit ()

, .

# 2 , .html. .html - , !. , , mime-type -. "" , mime. - text/html image/png ..

Answer 2

HTML <script> JavaScript <link rel="stylesheet"> CSS. , HTML-.

JavaScript , . HTML DOM ( , document.getElementById() , jQuery). DOM - HTML .

, CSS . HTML, .

.

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

Answer 3

HTML-, html- DOM TREE

CSS-, <style> css. css DOM html, RENDER Tree, css, html.

.

JS, javascript script js , javascript .

HTML, CSS JS , CSP compliance

, . .

Update

:

.

• JavaScript

  . JavaScript , , jQuerys, DOM . JavaScript, : CSS Animations, Transitions API - .

• . , CSS , , ..headline .nav > .nav__item. , , .

• Layout. , , , . - , , . .. , .

• Paint

  . - . , , , , , . , .

• Compositing

  . , , . , , , .

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

Answer 4

-, , (HTML), (CSS) (JAVASCRIPT). : HTML, Javascript CSS, , .

HTML    , , , , , , , .. CSS    , , ( , ) JavaScript    , - , (, - )

HTML XML. ; , PDF- PDF. HTML DOM , " ". , CSS, . HTML : .

http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

Answer 5

:

HTML , , , , divs, , html .

CSS html. : , - , CSS.

Javascript , , - , , () , Javascript DOM (Document Object Model) ( html ) css/html.

Html

CSS :

• Inline: html. :

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

Hide result

/*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>

Hide result

Javascript <script></script> html , js src <script type="text/javascript" src="myCustonJS.js"></script>

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>

Hide result

Answer 6

An HTML page is a central component. This is what the browser will handle.

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

Most people prefer to store files separately, and instead they link to external .js and .css files, however this is not required (just best practice). Even then, you are still using HTML to tell the browser about them through <script src="someJsFile.js"></script>or<link rel="stylesheet" href="someCssFile.css">