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

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