SlideShare a Scribd company logo
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
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
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 });
});
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']);
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';
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
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';
});
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';
});
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
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);
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 }
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
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
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
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 })
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

More Related Content

PDF
Node.js in 2020 - part 3
PDF
Private cloud without vendor lock // Serverless
PDF
Node.js in 2020 - part 1
PDF
Race-conditions-web-locks-and-shared-memory
PDF
Patterns and antipatterns
PDF
Node.js in 2020
PDF
Programming Languages: comparison, history, future
PDF
Новое в JavaScript: ES.Next, ECMAScript 2020, ES11, ES10, ES9, ES8, ES7, ES6,...
Node.js in 2020 - part 3
Private cloud without vendor lock // Serverless
Node.js in 2020 - part 1
Race-conditions-web-locks-and-shared-memory
Patterns and antipatterns
Node.js in 2020
Programming Languages: comparison, history, future
Новое в JavaScript: ES.Next, ECMAScript 2020, ES11, ES10, ES9, ES8, ES7, ES6,...

What's hot (20)

PDF
How are Race Conditions in single threaded JavaScript possible?
PDF
How to keep control and safety in the clouds
PDF
Serverless Clouds (FaaS) and request context isolation in Node.js
PDF
Prototype programming in JavaScript
PDF
Node.js in 2020 - part 2
PDF
Web Locks API
PDF
Введение в SQL
PDF
Asynchronous programming and mutlithreading
PDF
Asynchronous programming with java script and node.js
PDF
Node.js middleware: Never again!
PDF
Metarhia KievJS 22-Feb-2018
PDF
JS Fest 2019 Node.js Antipatterns
PDF
Duralexsedregex
PPTX
Building HTML5 enabled web applications with Visual Studio 2011
PDF
Byterun, a Python bytecode interpreter - Allison Kaptur at NYCPython
PDF
"A 1,500 line (!!) switch statement powers your Python!" - Allison Kaptur, !!...
PDF
Bytes in the Machine: Inside the CPython interpreter
PDF
Зависимые типы в GHC 8. Максим Талдыкин
DOCX
How are Race Conditions in single threaded JavaScript possible?
How to keep control and safety in the clouds
Serverless Clouds (FaaS) and request context isolation in Node.js
Prototype programming in JavaScript
Node.js in 2020 - part 2
Web Locks API
Введение в SQL
Asynchronous programming and mutlithreading
Asynchronous programming with java script and node.js
Node.js middleware: Never again!
Metarhia KievJS 22-Feb-2018
JS Fest 2019 Node.js Antipatterns
Duralexsedregex
Building HTML5 enabled web applications with Visual Studio 2011
Byterun, a Python bytecode interpreter - Allison Kaptur at NYCPython
"A 1,500 line (!!) switch statement powers your Python!" - Allison Kaptur, !!...
Bytes in the Machine: Inside the CPython interpreter
Зависимые типы в GHC 8. Максим Талдыкин
Ad

Similar to JavaScript в браузере: Web API (часть 1) (20)

PDF
Everything is composable
PDF
Marrow: A Meta-Framework for Python 2.6+ and 3.1+
PDF
Consuming Web Services with Swift and Rx
PDF
Building a Mobile App with Sencha Touch
PDF
The Browser Environment - A Systems Programmer's Perspective [sinatra edition]
PDF
Is HTML5 Ready? (workshop)
PDF
Is html5-ready-workshop-110727181512-phpapp02
PDF
Node.js - iJS 2019
PPT
JQuery Flot
PDF
mobl - model-driven engineering lecture
PDF
So I already have most of the code and now I have to1. create an .pdf
PDF
JavaScript - Agora nervoso
PDF
Finch.io - Purely Functional REST API with Finagle
PDF
HelsinkiJS meet-up. Dmitry Soshnikov - ECMAScript 6
PPTX
Oh Composable World!
DOCX
bbyopenApp_Code.DS_StorebbyopenApp_CodeVBCodeGoogleMaps.docx
PDF
The Web map stack on Django
PPTX
Object Oriented Programming Using C++: C++ Namespaces.pptx
PDF
Houdini - What lies ahead
PPTX
How to make a video game
Everything is composable
Marrow: A Meta-Framework for Python 2.6+ and 3.1+
Consuming Web Services with Swift and Rx
Building a Mobile App with Sencha Touch
The Browser Environment - A Systems Programmer's Perspective [sinatra edition]
Is HTML5 Ready? (workshop)
Is html5-ready-workshop-110727181512-phpapp02
Node.js - iJS 2019
JQuery Flot
mobl - model-driven engineering lecture
So I already have most of the code and now I have to1. create an .pdf
JavaScript - Agora nervoso
Finch.io - Purely Functional REST API with Finagle
HelsinkiJS meet-up. Dmitry Soshnikov - ECMAScript 6
Oh Composable World!
bbyopenApp_Code.DS_StorebbyopenApp_CodeVBCodeGoogleMaps.docx
The Web map stack on Django
Object Oriented Programming Using C++: C++ Namespaces.pptx
Houdini - What lies ahead
How to make a video game
Ad

More from Timur Shemsedinov (15)

PDF
How to use Chat GPT in JavaScript optimizations for Node.js
PDF
IT Revolution in 2023-2024: AI, GPT, business transformation, future professi...
PDF
Multithreading in Node.js and JavaScript
PDF
Node.js threads for I/O-bound tasks
PDF
Node.js Меньше сложности, больше надежности Holy.js 2021
PDF
Rethinking low-code
PDF
Hat full of developers
PDF
FwDays 2021: Metarhia Technology Stack for Node.js
PDF
Node.js for enterprise - JS Conference
PDF
Node.js for enterprise 2021 - JavaScript Fwdays 3
PDF
Node.js in 2021
PDF
Information system structure and architecture
PDF
Базы данных в 2020
PDF
Почему хорошее ИТ-образование невостребовано рыночком
PDF
Node.js security
How to use Chat GPT in JavaScript optimizations for Node.js
IT Revolution in 2023-2024: AI, GPT, business transformation, future professi...
Multithreading in Node.js and JavaScript
Node.js threads for I/O-bound tasks
Node.js Меньше сложности, больше надежности Holy.js 2021
Rethinking low-code
Hat full of developers
FwDays 2021: Metarhia Technology Stack for Node.js
Node.js for enterprise - JS Conference
Node.js for enterprise 2021 - JavaScript Fwdays 3
Node.js in 2021
Information system structure and architecture
Базы данных в 2020
Почему хорошее ИТ-образование невостребовано рыночком
Node.js security

Recently uploaded (20)

PPTX
durere- in cancer tu ttresjjnklj gfrrjnrs mhugyfrd
PDF
WebRTC in SignalWire - troubleshooting media negotiation
PPTX
Job_Card_System_Styled_lorem_ipsum_.pptx
PPTX
PPT_M4.3_WORKING WITH SLIDES APPLIED.pptx
PDF
LABUAN4D EXCLUSIVE SERVER STAR GAMING ASIA NO.1
PPTX
innovation process that make everything different.pptx
PDF
Testing WebRTC applications at scale.pdf
PDF
Decoding a Decade: 10 Years of Applied CTI Discipline
PPTX
CSharp_Syntax_Basics.pptxxxxxxxxxxxxxxxxxxxxxxxxxxxx
PPTX
CHE NAA, , b,mn,mblblblbljb jb jlb ,j , ,C PPT.pptx
PPTX
Slides PPTX World Game (s) Eco Economic Epochs.pptx
PDF
Slides PDF The World Game (s) Eco Economic Epochs.pdf
PDF
Tenda Login Guide: Access Your Router in 5 Easy Steps
PPTX
522797556-Unit-2-Temperature-measurement-1-1.pptx
PPTX
presentation_pfe-universite-molay-seltan.pptx
PPTX
Digital Literacy And Online Safety on internet
PPTX
introduction about ICD -10 & ICD-11 ppt.pptx
PDF
An introduction to the IFRS (ISSB) Stndards.pdf
PPTX
Introduction to Information and Communication Technology
PDF
RPKI Status Update, presented by Makito Lay at IDNOG 10
durere- in cancer tu ttresjjnklj gfrrjnrs mhugyfrd
WebRTC in SignalWire - troubleshooting media negotiation
Job_Card_System_Styled_lorem_ipsum_.pptx
PPT_M4.3_WORKING WITH SLIDES APPLIED.pptx
LABUAN4D EXCLUSIVE SERVER STAR GAMING ASIA NO.1
innovation process that make everything different.pptx
Testing WebRTC applications at scale.pdf
Decoding a Decade: 10 Years of Applied CTI Discipline
CSharp_Syntax_Basics.pptxxxxxxxxxxxxxxxxxxxxxxxxxxxx
CHE NAA, , b,mn,mblblblbljb jb jlb ,j , ,C PPT.pptx
Slides PPTX World Game (s) Eco Economic Epochs.pptx
Slides PDF The World Game (s) Eco Economic Epochs.pdf
Tenda Login Guide: Access Your Router in 5 Easy Steps
522797556-Unit-2-Temperature-measurement-1-1.pptx
presentation_pfe-universite-molay-seltan.pptx
Digital Literacy And Online Safety on internet
introduction about ICD -10 & ICD-11 ppt.pptx
An introduction to the IFRS (ISSB) Stndards.pdf
Introduction to Information and Communication Technology
RPKI Status Update, presented by Makito Lay at IDNOG 10

JavaScript в браузере: Web API (часть 1)

  • 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