Browser

Browser

https://www.w3counter.com/globalstats.php?year=2017&month=5

Browser Structure

Web browser engines

A web browser engine (sometimes called layout engine or rendering engine) is a software component that takes marked up content (such as HTML, XML, image files, etc.) and formatting information (such as CSS, XSL, etc.) and displays the formatted content on the screen.

  • WebKit (Apple, KDE, Nokia,Google, RIM, Palm,Samsung,)
    Chrome (28), Safari

  • Trident (Microsoft)
    Internet Explorer

  • Gecko (Mozilla Foundation)
    Firefox

  • Blink (Google, Opera Software)
    Chrome 28+, Opera

  • Loading the resource
  • Parsing the HTML
  • Creating the DOM tree
  • Creating the Render tree
  • Layout of the render tree
  • Painting

What happens when I click "google.com"?

DOM

The DOM is a W3C (World Wide Web Consortium) standard.

The DOM defines a standard for accessing documents:
"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."

The W3C DOM standard is separated into 3 different parts:

  • Core DOM - standard model for all document types
  • XML DOM - standard model for XML documents
  • HTML DOM - standard model for HTML documents

HTML DOM

The HTML DOM is a standard object model and programming interface for HTML. It defines:

  • The HTML elements as objects
  • The properties of all HTML elements
  • The methods to access all HTML elements
  • The events for all HTML elements

In other words: The HTML DOM is a standard for how to get, change, add, or delete HTML elements.

DOM

More Example

<!DOCTYPE HTML>
<html>
<head>
  <title>О лосях</title>
</head>
<body>
  Правда о лосях
</body>
</html>

Пробелы и переводы строки – это тоже текст, полноправные символы, которые учитываются в DOM.

HTML5 vs HTML4

New Elements:

Added new attributes:

required

 

Added new api:

video and audio

section, article, aside, header, footer, nav ,dialog ...

http://easywebscripts.net/html/html5.php

Doctype

Scripts Load

<!DOCTYPE html>
<head>
<script src="test.js" defer></script>
</head>
<body>

<form action="handler.php">
    <p>Введите ваш возраст</p>
    <p><input type="text" name="textField"></p>
</form>

</body>
</html>

Example Scripts Load

<!DOCTYPE html>
<html lang="en">
<head>
<script src="test.js"></script>
</head>
<body>

<form action="handler.php">
    <p>Введите ваш возраст</p>
    <p><input type="text" name="textField"></p>
</form>

</body>
</html>
document.forms[0].textField.value = 17;

window.onload = function() {
    document.forms[0].textField.value = 17;
};

DOM Method

Changing HTML Style

<!DOCTYPE html>
<html>
<body>

<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color = "blue";
document.getElementById("p2").style.fontFamily = "Arial";
document.getElementById("p2").style.fontSize = "larger";
</script>

<p>The paragraph above was changed by a script.</p>

</body>
</html>

Mouse Event

onclick 
The event occurs when the user clicks on an element

ondblclick 
The event occurs when the user double-clicks on an element

onmousedown 
The event occurs when a user presses a mouse button over an element

onmousemove 
The event occurs when the pointer is moving while it is over an element

onmouseover 
The event occurs when the pointer is moved onto an element

onmouseout 
The event occurs when a user moves the mouse pointer out of an element

onmouseup 
The event occurs when a user releases a mouse button over an element

Events

<!DOCTYPE html>
<html>
<body>

<h1 onclick="this.innerHTML = 'Ooops!'">Click on this text!</h1>

</body>
</html>

The addEventListener() method:

document.getElementById("myBtn").addEventListener("click", displayDate);

element.removeEventListener("click", displayDate);
document.getElementById('cupcakeButton').attachEvent('onclick', getACupcake);
//Note: Internet Explorer 9 adds support for addEventListener().

Window Object

It represents the browser's window. All global JavaScript objects, functions, and variables automatically become members of the window object. Global variables are properties of the window object. Global functions are methods of the window object.

window.open() - open a new window
window.close() - close the current window
window.moveTo() - move the current window
window.resizeTo() - resize the current window

BOM Methods

window.location.href returns the href (URL) of the current page
window.location.hostname returns the domain name of the web host
window.location.pathname returns the path and filename of the current page
window.location.protocol returns the web protocol used (http: or https:)
window.location.assign loads a new document
window.setTimeout(function, milliseconds);
window.clearTimeout(timeoutVariable);

window.setInterval(function, milliseconds);
window.clearInterval(timerVariable);

The Browser Object Model (BOM) allows JavaScript to "talk to" the browser.

Example

<!DOCTYPE html>
<html>
<body>

<p>A script on this page starts this clock:</p>

<p id="demo"></p>

<button onclick="clearInterval(myVar)">Stop time</button>

<script>
var myVar = setInterval(myTimer ,1000);
function myTimer() {
    var d = new Date();
    document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>

</body>
</html>

Local/Session storage

Data is stored as simple key-value pairs, both strings.

localStorage saves values forever, while sessionStorage - only until browser closed.

localStorage.setItem(key, value); store value in storage

localStorage.getItem(key); get value from storage. If value does not exist null is returned.

localStorage.removeItem(key); remove key-value pair from storage.

localStorage.clear(); remove all values from storage.

Same methods available for sessionStorage.

Links

  1. https://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/
  2. https://javascript.info/dom-nodes
  3. https://www.w3schools.com/js/js_htmldom.asp
  4. http://easywebscripts.net/html/html5.php
  5. http://htmlbook.ru/html/%21doctype
  6. https://learn.javascript.ru/dom-nodes
  7. https://www.w3schools.com/js/js_htmldom_events.asp
  8. https://learn.javascript.ru/external-script
  9. http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html
  10. http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html

Home Task

  1. Сверстать форму (не использовать bootstrap).
  2. Задание со *:
    при нажатии на кнопку "LOGIN" сохранить данные в localStorage.

Browser

By Oleg Rovenskyi

Made with Slides.com

Browser

browser

  • 756

More from Oleg Rovenskyi