DOM API, document, navigator, css selector, etc.

1. const fs = require('fs'); const compose = (...funcs) => x => funcs.
reduce((x, fn) => fn(x), x); const DENSITY_COL = 3; const renderTab
table => { const cellWidth = [18, 10, 8, 8, 18, 6]; return table.ma
=> (row.map((cell, i) => { const width = cellWidth[i]; return i ? c
toString().padStart(width) : cell.padEnd(width); }).join(''))).join
}; const proportion = (max, val) => Math.round(val * 100 / max); co
calcProportion = table => { table.sort((row1, row2) => row2[DENSITY
row1[DENSITY_COL]); const maxDensity = table[0][DENSITY_COL]; table
forEach(row => { row.push(proportion(maxDensity, row[DENSITY_COL]))
return table; }; const getDataset = file => { const lines = fs.read
FileSync(file, 'utf8').toString().split('n'); lines.shift(); lines
return lines.map(line => line.split(',')); }; const main = compose
(getDataset, calcProportion, renderTable); const fs = require('fs'
compose = (...funcs) => x => funcs.reduce((x, fn) => fn(x), x); con
DENSITY_COL = 3; const renderTable = table => { const cellWidth = [
8, 8, 18, 6]; return table.map(row => (row.map((cell, i) => { const
= cellWidth[i]; return i ? cell.toString().padStart(width) : cell.p
(width); }).join(''))).join('n'); }; const proportion = (max, val)
JavaScript в браузере:
Web API (часть 1)
Тимур Шемсединов
github.com/HowProgrammingWorks
github.com/tshemsedinov
Chief Software Architect at Metarhia
Lecturer at Kiev Polytechnic Institute

2. const fs = require('fs'); const compose = (...funcs) => x => funcs.
reduce((x, fn) => fn(x), x); const DENSITY_COL = 3; const renderTab
table => { const cellWidth = [18, 10, 8, 8, 18, 6]; return table.ma
=> (row.map((cell, i) => { const width = cellWidth[i]; return i ? c
Browser: Web API
● DOM API (Document Object Model)
● Hardware / Device APIs
● Communication / Network APIs
● Storage / Databases APIs
● Audio and Video APIs
● Multithreading / Workers API
● Raster and Vector Graphics APIs

3. const fs = require('fs'); const compose = (...funcs) => x => funcs.
reduce((x, fn) => fn(x), x); const DENSITY_COL = 3; const renderTab
table => { const cellWidth = [18, 10, 8, 8, 18, 6]; return table.ma
=> (row.map((cell, i) => { const width = cellWidth[i]; return i ? c
DOM API: document.getElementsById(id)
<p id="caption">
Web is <b>Dead</b>
</p>
const element = document.getElementById('caption');
// element: HTMLParagraphElement: Element
console.log(element.innerHTML, element.innerText);
element.addEventListener('click', event => {
console.dir({ event });
});

4. const fs = require('fs'); const compose = (...funcs) => x => funcs.
reduce((x, fn) => fn(x), x); const DENSITY_COL = 3; const renderTab
table => { const cellWidth = [18, 10, 8, 8, 18, 6]; return table.ma
=> (row.map((cell, i) => { const width = cellWidth[i]; return i ? c
DOM API: getElementsByClassName(class)
<p id="web" class="panel">Web is <b>Dead</b></p>
<p id="lenin" class="panel">Lenin was a Mushroom</p>
const elements = document
.getElementsByClassName('panel');
// HTMLCollection, HTMLElement: Element
console.log(elements);
console.log(elements[0]);
console.log(elements.namedItem('web'));
console.log(elements['web']);

5. const fs = require('fs'); const compose = (...funcs) => x => funcs.
reduce((x, fn) => fn(x), x); const DENSITY_COL = 3; const renderTab
table => { const cellWidth = [18, 10, 8, 8, 18, 6]; return table.ma
=> (row.map((cell, i) => { const width = cellWidth[i]; return i ? c
DOM API: document.querySelector()
<div id="header" class="centered">
<p class="marked">Web is <b>Dead</b></p>
</div>
const element = document.querySelector(
'div#header.centered p.marked > b'
);
console.log(element.innerHTML, element.innerText);
console.log(element.outerHTML);
element.outerText = 'archaic';

6. const fs = require('fs'); const compose = (...funcs) => x => funcs.
reduce((x, fn) => fn(x), x); const DENSITY_COL = 3; const renderTab
table => { const cellWidth = [18, 10, 8, 8, 18, 6]; return table.ma
=> (row.map((cell, i) => { const width = cellWidth[i]; return i ? c
DOM API: querySelector, All, ByTagName
<p id="caption">Web is <b>Dead</b></p>
const element = document.querySelector('#caption');
// element: HTMLParagraphElement: Element
const b1 = document.querySelector('#caption b');
const b2 = element.querySelector('b');
const b3 = element.querySelectorAll('b')[0];
// NodeList, HTMLElement: Element
const b4 = element.getElementsByTagName('b')[0];
// HTMLCollection, HTMLElement: Element

7. const fs = require('fs'); const compose = (...funcs) => x => funcs.
reduce((x, fn) => fn(x), x); const DENSITY_COL = 3; const renderTab
table => { const cellWidth = [18, 10, 8, 8, 18, 6]; return table.ma
=> (row.map((cell, i) => { const width = cellWidth[i]; return i ? c
DOM API: Selectors as antipattern
<p id="caption">Web is <b>Dead</b></p>
window.$ = querySelector;
window.$$ = querySelectorAll;
$('#caption').addEventListener('click', event => {
$('#caption').classList.add('marked');
const node = $('#caption').childNodes[0];
node.textContent = 'Lenin was ';
$('#caption b').innerText = 'a mushroom';
});

8. const fs = require('fs'); const compose = (...funcs) => x => funcs.
reduce((x, fn) => fn(x), x); const DENSITY_COL = 3; const renderTab
table => { const cellWidth = [18, 10, 8, 8, 18, 6]; return table.ma
=> (row.map((cell, i) => { const width = cellWidth[i]; return i ? c
DOM API: Best practice
<p id="caption">Web is <b>Dead</b></p>
const caption = $('#caption');
const subject = caption.childNodes[0];
const predicate = $$('b', caption);
caption.addEventListener('click', event => {
caption.classList.add('marked');
subject.textContent = 'Lenin was ';
predicate.innerText = 'a mushroom';
});

9. const fs = require('fs'); const compose = (...funcs) => x => funcs.
reduce((x, fn) => fn(x), x); const DENSITY_COL = 3; const renderTab
table => { const cellWidth = [18, 10, 8, 8, 18, 6]; return table.ma
=> (row.map((cell, i) => { const width = cellWidth[i]; return i ? c
Object: window: self, screen and document
window.window recursive link
window.self window.window, sindow, self
window.console Console: .log .dir .table .error...
window.screen Screen: .availHeight, .availWidth,
.height, .width, .orientation,
.colorDepth, .pixelDepth
window.document HTMLDocument: .title, .characterSet
.doctype, .contentType, .children
.body, .head, .forms, .embeds, .URL
.anchors, .scripts, .images, .cookie
.domain, .location, .referrer

10. const fs = require('fs'); const compose = (...funcs) => x => funcs.
reduce((x, fn) => fn(x), x); const DENSITY_COL = 3; const renderTab
table => { const cellWidth = [18, 10, 8, 8, 18, 6]; return table.ma
=> (row.map((cell, i) => { const width = cellWidth[i]; return i ? c
DOM API: document.createElement
<div id="panel">
<div>Remember: <b>Web is Dead</b></div>
</div>
const panel = $('#panel');
const element = document.createElement('div');
element.innerHTML = '<b>Lenin was a mushroom</b>';
element.style.backgroundColor = 'coral';
const previous = $('#panel div:last-of-type');
panel.insertBefore(element, previous);

11. const fs = require('fs'); const compose = (...funcs) => x => funcs.
reduce((x, fn) => fn(x), x); const DENSITY_COL = 3; const renderTab
table => { const cellWidth = [18, 10, 8, 8, 18, 6]; return table.ma
=> (row.map((cell, i) => { const width = cellWidth[i]; return i ? c
Object: window: frames, storage, location
window.frames window.length
window.frames[n] window.window[n].document
window.indexedDB: IDBFactory
IDBFactory { open, databases ... }
window.localStorage: Storage
window.sessionStorage: Storage
Storage { getItem, setItem, key, removeItem, clear }

12. const fs = require('fs'); const compose = (...funcs) => x => funcs.
reduce((x, fn) => fn(x), x); const DENSITY_COL = 3; const renderTab
table => { const cellWidth = [18, 10, 8, 8, 18, 6]; return table.ma
=> (row.map((cell, i) => { const width = cellWidth[i]; return i ? c
Object: window.location
window.location: Location { assign, reload, peplace }
url.href = http://domain.com:8080/en/search?q=word#a5
url.protocol http:
url.host domain.com:8080
url.hostname domain.com
url.port 8080
url.pathname /en/search
url.search ?q=word
url.hash #a5
url.origin http://domain.com:8080
url.username, url.password

13. const fs = require('fs'); const compose = (...funcs) => x => funcs.
reduce((x, fn) => fn(x), x); const DENSITY_COL = 3; const renderTab
table => { const cellWidth = [18, 10, 8, 8, 18, 6]; return table.ma
=> (row.map((cell, i) => { const width = cellWidth[i]; return i ? c
Object: window.navigator
window.navigator
navigator.battery: BatteryManeger
navigator.geolocation: Geolocation
navigator.language, navigator.languages
navigator.mimeTypes: MimeTypeArray
navigator.onLine: Boolean
navigator.platform: String // Linux x86_64
navigator.plugins: PluginArray
navigator.userAgent: String // Mozilla/5.0 (X11; Linux x86_64)
AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36
navigator.serviceWorker: ServiceWorkerContainer

14. const fs = require('fs'); const compose = (...funcs) => x => funcs.
reduce((x, fn) => fn(x), x); const DENSITY_COL = 3; const renderTab
table => { const cellWidth = [18, 10, 8, 8, 18, 6]; return table.ma
=> (row.map((cell, i) => { const width = cellWidth[i]; return i ? c
Object: window: timers, dialogs...
window.setTimeout window.clearTimeout
window.setInterval window.clearInterval
window.setImmediate window.clearImmediate
window.alert
window.confirm
window.prompt
window.fetch window.performance
window.history window.speechSynthesis

15. const fs = require('fs'); const compose = (...funcs) => x => funcs.
reduce((x, fn) => fn(x), x); const DENSITY_COL = 3; const renderTab
table => { const cellWidth = [18, 10, 8, 8, 18, 6]; return table.ma
=> (row.map((cell, i) => { const width = cellWidth[i]; return i ? c
Object: window
window.innerHeight window.innerWidth
window.outerHeight window.outerWidth
window.screenX window.screenY
window.screenLeft window.screenTop
window.scrollX window.scrollY
window.scroll(x, y)
window.scrollBy(x, y)
window.scrollTo(x, y)
window.scrollTo({ top, left, behavior })

16. const fs = require('fs'); const compose = (...funcs) => x => funcs.
reduce((x, fn) => fn(x), x); const DENSITY_COL = 3; const renderTab
table => { const cellWidth = [18, 10, 8, 8, 18, 6]; return table.ma
=> (row.map((cell, i) => { const width = cellWidth[i]; return i ? c
Object: window
window.scrollbars, .menuBar, .personalbar, .sidebar,
.statusbar, .toolbar, .name, .opener, .parent,
.visualViewport, .stop, .blur, .close, .focus,
.find, .getSelection, .open, .moveBy, .moveTo,
.resizeBy, .resizeTo, .postMessage, .print ...
Reflect.ownKeys(window) 963
Reflect.ownKeys(document) 39
Reflect.ownKeys(Reflect.getPrototypeOf(navigator)) 35
Reflect.ownKeys(console) 25