{"id":305610,"date":"2020-06-19T09:01:24","date_gmt":"2020-06-19T09:01:24","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=305610"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=305610","title":{"rendered":"\u0424\u0438\u0447\u0438 JavaScript. \u0427\u0430\u0441\u0442\u044c 1"},"content":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/507298\/\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/k3\/rw\/1w\/k3rw1wf96s_ci5d78w8slilkihu.png\"><\/p>\n<p>  \u0414\u043e\u0431\u0440\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0441\u0443\u0442\u043e\u043a, \u0434\u0440\u0443\u0437\u044c\u044f!<\/p>\n<p>  \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0445\u043e\u0447\u0443 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441 \u0412\u0430\u043c\u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043d\u0430\u0445\u043e\u0434\u043a\u0430\u043c\u0438, \u0441\u0434\u0435\u043b\u0430\u043d\u043d\u044b\u043c\u0438 \u043c\u043d\u043e\u0439 \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044f JavaScript. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0412\u044b \u043d\u0430\u0439\u0434\u0435\u0442\u0435 \u0434\u043b\u044f \u0441\u0435\u0431\u044f \u0447\u0442\u043e-\u0442\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0435. \u0414\u0430\u043d\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0441\u0435\u0440\u0438\u0438 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0441\u0432\u044f\u0449\u0435\u043d\u0430, \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 DOM.<\/p>\n<p>  \u041d\u0430\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u043a body \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0441\u0442\u0438\u043b\u0438:<\/p>\n<pre><code class=\"javascript\">body {     margin: 0;     min-height: 100vh;     overflow: hidden; } <\/code><\/pre>\n<p>  \u0415\u0441\u043b\u0438 \u043f\u043b\u0430\u043d\u0438\u0440\u0443\u0435\u0442\u0435 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u044b, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u044d\u0442\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0434\u043b\u044f \u043e\u0447\u0438\u0441\u0442\u043a\u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0439:<\/p>\n<pre><code class=\"javascript\">const clear = () =&gt; document.body.innerHTML = '' clear() <\/code><\/pre>\n<p>  <\/p>\n<h3>1. \u0410\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442<\/h3>\n<p>  \u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/API\/Document\/activeElement\" rel=\"nofollow\">activeElement<\/a> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0438\u0439\u0441\u044f \u0432 \u0444\u043e\u043a\u0443\u0441\u0435.<\/p>\n<pre><code class=\"javascript\">const input = document.createElement('input') input.setAttribute('type', 'text') input.setAttribute('placeholder', '\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0441\u0432\u043e\u0435 \u0438\u043c\u044f') input.className = 'username' document.body.append(input)  input.focus()  console.log(document.activeElement) \/\/ &lt;input type=&quot;text&quot; placeholder=&quot;\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0441\u0432\u043e\u0435 \u0438\u043c\u044f&quot; class=&quot;username&quot;&gt; <\/code><\/pre>\n<p>  <\/p>\n<h3>2. \u0420\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/h3>\n<p>  \u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/API\/Document\/designMode\" rel=\"nofollow\">designMode<\/a> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u043e\u0442\u043a\u0440\u044b\u0442\u0443\u044e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435.<\/p>\n<pre><code class=\"javascript\">document.designMode = 'on' <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/o3\/2d\/1c\/o32d1cceek62jtpyjcwt7x-bwm8.png\"><br \/>  <a name=\"habracut\"><\/a>  <\/p>\n<h3>3. \u0421\u0442\u0438\u043b\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430<\/h3>\n<p>  \u041c\u0435\u0442\u043e\u0434 <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/API\/Window\/getComputedStyle\" rel=\"nofollow\">getComputedStyle()<\/a> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0441\u0442\u0438\u043b\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u0414\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c getPropertyValue().<\/p>\n<pre><code class=\"javascript\">\/\/ \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \/\/ \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0435 \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445 const getStyle = (element, property) =&gt; getComputedStyle(element).getPropertyValue(property)  \/\/ \u0432\u043e\u0437\u044c\u043c\u0435\u043c \u0438\u043d\u043f\u0443\u0442 \u0438\u0437 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \/\/ \u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u0435\u0433\u043e \u0448\u0438\u0440\u0438\u043d\u0443 \u0438 \u0432\u044b\u0441\u043e\u0442\u0443 const inputWidth = getStyle(input, 'width') const inputHeight = getStyle(input, 'height') console.log(`\u0428\u0438\u0440\u0438\u043d\u0430: ${inputWidth}\\n\u0412\u044b\u0441\u043e\u0442\u0430: ${inputHeight}`) \/\/ \u0428\u0438\u0440\u0438\u043d\u0430: 156.8px \/\/ \u0412\u044b\u0441\u043e\u0442\u0430: 16px  \/\/ \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u0443\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \/\/ \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c, \u0447\u0442\u043e \u043c\u044b \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c\u0441\u044f \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \/\/ \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0435 \u0445\u043e\u0442\u0438\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c transform: translate(-50%, -50%) \/\/ \u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c \u0442\u0430\u043a\u0436\u0435, \u0447\u0442\u043e \u043c\u044b \u043d\u0435 \u0437\u043d\u0430\u0435\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \/\/ \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c calc(50% - \u0448\u0438\u0440\u0438\u043d\u0430\/\u0432\u044b\u0441\u043e\u0442\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430) input.setAttribute('style',     `position: absolute; top: calc(50% - ${inputHeight.replace('px', '') \/ 2}px); left: calc(50% - ${inputWidth.replace('px', '') \/ 2}px);` ) <\/code><\/pre>\n<p>  <\/p>\n<h3>4. \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430<\/h3>\n<p>  \u041e\u0431\u044a\u0435\u043a\u0442 <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/API\/Navigator\" rel=\"nofollow\">Navidator<\/a>, \u0432 \u0447\u0438\u0441\u043b\u0435 \u043f\u0440\u043e\u0447\u0435\u0433\u043e, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.<\/p>\n<pre><code class=\"javascript\">let browser const agent = navigator.userAgent  if (agent.indexOf('Google')) {     browser = 'Google Chrome' } else if (agent.indexOf('Safari')) {     browser = 'Apple Safari' } else if (agent.indexOf('Opera')) {     browser = 'Opera' } else if (agent.indexOf('Firefox')) {     browser = 'Mozilla Firefox' } else if (agent.indexOf('MSIE')) {     browser = 'Microsoft Interner Explorer' } console.log(browser) \/\/ Google Chrome \/\/ \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e, \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0430\u0434\u043e \u0431\u044b\u043b\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c switch  if (browser === 'Google Chrome' || browser === 'Mozilla Firefox') {     console.log('ok') \/\/ ok } else if (browser === 'Opera' || browser === 'Apple Safari') {     console.log('50\/50') } else if (browser === 'Microsoft Interner Explorer') {     console.log('!ok') } <\/code><\/pre>\n<p>  <\/p>\n<h3>5. \u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442<\/h3>\n<p>  \u041e\u0431\u044a\u0435\u043a\u0442 Navigator \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u043c\u0435\u0441\u0442\u043e\u043d\u0430\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u0442.\u0435. \u0435\u0433\u043e \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b.<\/p>\n<pre><code class=\"javascript\">const success = position =&gt; {     \/\/ \u0434\u0435\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0440\u0443\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442     const {         latitude,         longitude,         altitude,         speed     } = position.coords     console.log(`${latitude.toFixed(2)}\\n${longitude.toFixed(2)}\\n${altitude}\\n${speed}`)      \/\/ \u043e\u0431 \u044d\u0442\u043e\u043c \u043d\u0438\u0436\u0435     getCityAndWeather(latitude, longitude) }  navigator.geolocation.getCurrentPosition(success) \/*     56.90     60.63     null     null *\/  \/\/ \u0432\u043e\u0442 \u043a\u0430\u043a \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u0433\u043e\u0440\u043e\u0434 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438 \u043f\u043e\u0433\u043e\u0434\u0443 const getCityAndWeather = (latitude, longitude) =&gt; {     \/\/ \u043f\u0440\u043e\u043a\u0441\u0438 \u0434\u043b\u044f \u043f\u0440\u0435\u043e\u0434\u043e\u043b\u0435\u043d\u0438\u044f CORS     const proxy = 'https:\/\/cors-anywhere.herokuapp.com\/'     \/\/ \u0434\u0430\u043d\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0438\u0441 \u0431\u044b\u043b \u043a\u0443\u043f\u043b\u0435\u043d Facebook \u0438 \u0441\u0442\u0430\u043d\u0435\u0442 \u043f\u043b\u0430\u0442\u043d\u044b\u043c \u0432 2021 \u0433\u043e\u0434\u0443     const api = `${proxy}https:\/\/api.darksky.net\/forecast\/fd9d9c6418c23d94745b836767721ad1\/${latitude}, ${longitude}`      fetch(api)         .then(response =&gt; response.json())         .then(data =&gt; {             console.log(data) \/\/ \u043c\u043d\u043e\u0433\u043e \u0432\u0441\u0435\u0433\u043e              \/\/ \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0433\u043e\u0440\u043e\u0434             const city = data.timezone              \/\/ \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0442\u0435\u043c\u043f\u0435\u0440\u0430\u0442\u0443\u0440\u0443             const { temperature, summary } = data.currently              \/\/ \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0438\u043c \u0444\u0430\u0440\u0435\u043d\u0433\u0435\u0439\u0442 \u0432 \u0446\u0435\u043b\u044c\u0441\u0438\u0439             const celsius = Math.floor((temperature - 32) * (5 \/ 9)).toFixed()              \/\/ \u0432\u044b\u0432\u043e\u0434\u0438\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442             console.log(                 `${city}\\n${celsius}\u00b0C\\n${summary}`             )             \/*                 Asia\/Yekaterinburg                 15\u00b0C                 Overcast             *\/         }) } <\/code><\/pre>\n<p>  <\/p>\n<h3>6. \u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432<\/h3>\n<p>  \u041a\u0430\u043a \u043d\u0430\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b DOM? \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0440\u0435\u043a\u0443\u0440\u0441\u0438\u044e.<\/p>\n<pre><code class=\"javascript\">const template =  `&lt;div&gt;     &lt;p&gt; Lorem ispum         &lt;span&gt;dolor sit amet&lt;\/span&gt;     &lt;\/p&gt; &lt;\/div&gt; &lt;a href=&quot;#&quot;&gt;link&lt;\/a&gt;`  document.body.innerHTML = template  const getElements = element =&gt; {     for (const i of element.children) {         console.log(i.tagName)          \/\/ 0 -&gt; ! -&gt; false -&gt; ! -&gt; true         if (!!i.children.length) {             console.log('\u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442')             getElements(i)         }     } } getElements(document.body) \/*     DIV     \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442     P       \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442     SPAN     A *\/ <\/code><\/pre>\n<p>  <\/p>\n<h3>7. \u0420\u0430\u0437\u0431\u043e\u0440 URL<\/h3>\n<p>  \u041a\u0430\u043a \u043d\u0430\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0447\u0430\u0441\u0442\u0438 URL? \u042d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0434\u0432\u0443\u043c\u044f \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438.<\/p>\n<pre><code class=\"javascript\">\/\/ \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043a\u0438 const regex = \/(\\w+):\\\/\\\/([\\w.]+)\\\/(\\S*)\/ const url = 'https:\/\/example.com\/index.html' const result = url.match(regex) \/\/ \u043f\u043e\u043b\u043d\u044b\u0439 \u0430\u0434\u0440\u0435\u0441 (\u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u044b\u0439 \u043f\u0443\u0442\u044c), \u043f\u0440\u043e\u0442\u043e\u043a\u043e\u043b, \u0445\u043e\u0441\u0442, \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 console.log(result[0], result[1], result[2], result[3]) \/\/ https:\/\/example.com\/index.html https example.com index.html  \/\/ \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430 URL const url2 = new URL('https:\/\/example.com\/search?query=fetch&amp;page=2#awesome-page') console.log(url2) \/\/ \u043c\u043d\u043e\u0433\u043e \u0432\u0441\u0435\u0433\u043e  const {     origin,     protocol,     host,     pathname } = url2 console.log(     `${origin} ${protocol} ${host} ${pathname}` ) \/\/ https:\/\/example.com https: example.com \/search  \/\/ \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u043f\u0440\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e searchParams \/\/ searchParams.get(), searchParams.append(), searchParams.has(), searchParams.delete() \u0438 \u0442.\u0434. <\/code><\/pre>\n<p>  <\/p>\n<h3>8. \u041f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u0440\u0443\u0433\u043e\u0433\u043e<\/h3>\n<p>  <\/p>\n<pre><code class=\"javascript\">const toCenter = (element, parent) =&gt; {     element.style.position = 'relative'      element.style.left = (parent.clientWidth - element.offsetWidth) \/ 2 + 'px'     element.style.top = (parent.clientHeight - element.offsetHeight) \/ 2 + 'px' } const div = document.createElement('div') div.setAttribute('style', 'width: 150px; height: 150px; background: red;') document.body.append(div)  const div2 = document.createElement('div') div2.setAttribute('style', 'width: 100px; height: 100px; background: green;') div.append(div2)  const div3 = document.createElement('div') div3.setAttribute('style', 'width: 50px; height: 50px; background: blue;') div2.append(div3)  toCenter(div, document.body) toCenter(div2, div) toCenter(div3, div2) <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/tq\/wg\/ve\/tqwgvey5y3lavydxltdbzqbbwua.png\">  <\/p>\n<h3>9. \u0428\u0438\u0440\u0438\u043d\u0430 \u0438 \u0432\u044b\u0441\u043e\u0442\u0430 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430<\/h3>\n<p>  \u041a\u0430\u043a \u043d\u0430\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043f\u043e\u043b\u043d\u0443\u044e \u0448\u0438\u0440\u0438\u043d\u0443 \u0438 \u0432\u044b\u0441\u043e\u0442\u0443 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430?<\/p>\n<pre><code class=\"javascript\">const pageWidth = Math.max(     document.body.scrollWidth, document.documentElement.scrollWidth,     document.body.offsetWidth, document.documentElement.offsetWidth,     document.body.clientWidth, document.documentElement.clientWidth ) const pageHeight = Math.max(     document.body.scrollHeight, document.documentElement.scrollHeight,     document.body.offsetHeight, document.documentElement.offsetHeight,     document.body.clientHeight, document.documentElement.clientHeight )  \/\/ \u043e\u0434\u0438\u043d \u0438\u0437 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0446\u0435\u043d\u0442\u0440 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b const pageCenter = [pageWidth \/ 2, pageHeight \/ 2] console.log(pageCenter)  \/\/ \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f const p = document.createElement('p') p.textContent = 'Lorem ipsum dolor sit amet' document.body.append(p) p.style.position = 'absolute'  \/\/ \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0448\u0438\u0440\u0438\u043d\u0443 \u0438 \u0432\u044b\u0441\u043e\u0442\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f getStyle const elementWidth = getStyle(p, 'width').replace('px', '') const elementHeight = getStyle(p, 'height').replace('px', '')  \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0446\u0435\u043d\u0442\u0440 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 const elementCenter = [elementWidth \/ 2, elementHeight \/ 2] console.log(elementCenter)  \/\/ \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u0443\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 p.style.top = pageCenter[1] - elementCenter[1] + 'px' p.style.left = pageCenter[0] - elementCenter[0] + 'px' <\/code><\/pre>\n<p>  <\/p>\n<h3>10. \u041a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430<\/h3>\n<p>  \u041c\u0435\u0442\u043e\u0434 <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/API\/Element\/getBoundingClientRect\" rel=\"nofollow\">getBoundingClientRect()<\/a> \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0438 \u0435\u0433\u043e \u043f\u043e\u0437\u0438\u0446\u0438\u044e \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430.<\/p>\n<pre><code class=\"javascript\">\/\/ \u0432\u043e\u0437\u044c\u043c\u0435\u043c p \u0438\u0437 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430 console.log(p.getBoundingClientRect()) \/\/ \u043c\u043d\u043e\u0433\u043e \u0432\u0441\u0435\u0433\u043e console.log(     `\u041e\u0442\u0441\u0442\u0443\u043f \u0441\u0432\u0435\u0440\u0445\u0443 =&gt; ${p.getBoundingClientRect().top.toFixed()}\\n\u041e\u0442\u0441\u0442\u0443\u043f \u0441\u043b\u0435\u0432\u0430 =&gt; ${p.getBoundingClientRect().left.toFixed()}` ) \/*     \u041e\u0442\u0441\u0442\u0443\u043f \u0441\u0432\u0435\u0440\u0445\u0443 =&gt; 352     \u041e\u0442\u0441\u0442\u0443\u043f \u0441\u043b\u0435\u0432\u0430 =&gt; 288 *\/  \/\/ \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0434\u0432\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \/\/ \u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c, \u0432 \u043a\u0430\u043a\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043d\u0438\u0445 const div = document.createElement('div') div.setAttribute('style', 'width: 100px; height: 100px; background: #222; position: absolute; top: calc(50% - 50px); left: calc(25% - 50px);') document.body.append(div)  const div2 = document.createElement('div') div2.setAttribute('style', 'width: 100px; height: 100px; background: #222; position: absolute; top: calc(50% - 50px); left: calc(75% - 50px);') document.body.append(div2)  document.querySelectorAll('div').forEach(div =&gt; div.addEventListener('click', event =&gt; {     const x = event.target.getBoundingClientRect().x     const width = event.target.getBoundingClientRect().width      \/\/ \u0440\u0430\u0441\u0447\u0435\u0442\u044b \u043f\u0440\u0438\u0431\u043b\u0438\u0437\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435     x + width &lt; innerWidth \/ 2     ? console.log('\u042d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043b\u0435\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.')     : console.log('\u042d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043f\u0440\u0430\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.') }))  div.click() \/\/ \u042d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043b\u0435\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. div2.click() \/\/ \u042d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043f\u0440\u0430\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.  \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438 const distanceBetweenDivs = (div, div2) =&gt; console.log((div2.getBoundingClientRect().x - div.getBoundingClientRect().x + div.getBoundingClientRect().width).toFixed())  distanceBetweenDivs(div, div2) \/\/ 477 <\/code><\/pre>\n<p>  <\/p>\n<h3>11. \u041a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u043a\u0443\u0440\u0441\u043e\u0440\u0430<\/h3>\n<p>  \u041a\u0430\u043a \u043d\u0430\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u043a\u0443\u0440\u0441\u043e\u0440\u0430? \u041e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e.<\/p>\n<pre><code class=\"javascript\">\/\/ document.addEventListener('click', ev =&gt; console.log(`X =&gt; ${ev.clientX}\\nY =&gt; ${ev.clientY}`)) \/*     X =&gt; 348     Y =&gt; 304 *\/  \/\/ \u0432\u043e\u0442 \u043a\u0430\u043a \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u044d\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \/\/ \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0445\u043e\u043b\u0441\u0442 \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 const canvas = document.createElement('canvas') document.body.append(canvas) const $ = canvas.getContext('2d')  \/\/ \u0440\u0430\u0437\u043c\u0435\u0440 \u0445\u043e\u043b\u0441\u0442\u0430 - \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 canvas.width = innerWidth canvas.height = innerHeight  \/\/ \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e\u0433\u043e \u0446\u0435\u043b\u043e\u0433\u043e \u0447\u0438\u0441\u043b\u0430 \u0432 \u0437\u0430\u0434\u0430\u043d\u043d\u043e\u043c \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0435 const randomInt = (min, max) =&gt; Math.floor(min + Math.random() * (max + 1 - min))  \/\/ \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430 const randomColor = () =&gt; `#${((Math.random()*0xfff)&lt;&lt;0).toString(16)}`  \/\/ \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0440\u0438\u0441\u0443\u0435\u043c \/\/ \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u0435 \u0444\u0438\u0433\u0443\u0440 \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u043e \u043a\u043b\u0438\u043a\u0443 \/\/ \u0446\u0435\u043d\u0442\u0440 \u0444\u0438\u0433\u0443\u0440\u044b - \u043c\u0435\u0441\u0442\u043e \u043a\u043b\u0438\u043a\u0430 \/\/ \u0444\u043e\u0440\u043c\u0430 \u0444\u0438\u0433\u0443\u0440\u044b - \u043a\u0440\u0443\u0433 \u0438\u043b\u0438 \u043a\u0432\u0430\u0434\u0440\u0430\u0442 let i = 0  canvas.addEventListener('click', ev =&gt; {     $.beginPath()     \/\/ \u0435\u0441\u043b\u0438 i - \u0447\u0435\u0442\u043d\u043e\u0435 \u0447\u0438\u0441\u043b\u043e, \u0442\u043e \u0440\u0438\u0441\u0443\u0435\u043c \u043a\u0440\u0443\u0433     \/\/ \u0435\u0441\u043b\u0438 \u043d\u0435\u0447\u0435\u0442\u043d\u043e\u0435 - \u043a\u0432\u0430\u0434\u0440\u0430\u0442     if (i % 2 === 0) {         \/\/ $.arc(x, y, \u0440\u0430\u0434\u0438\u0443\u0441, \u0443\u0433\u043e\u043b)         $.arc(ev.clientX, ev.clientY, randomInt(10, 30), 0, 2 * Math.PI)         $.fillStyle = randomColor()         $.fill()     } else {         let randomSize = randomInt(20, 60)          $.fillStyle = randomColor()         \/\/ $.fillRect(x, y, \u0448\u0438\u0440\u0438\u043d\u0430, \u0432\u044b\u0441\u043e\u0442\u0430)         $.fillRect(ev.clientX - randomSize \/ 2, ev.clientY - randomSize \/ 2, randomSize, randomSize)     }     $.closePath()      i++ }) <\/code><\/pre>\n<p>  \u041d\u0430\u043f\u043e\u0441\u043b\u0435\u0434\u043e\u043a \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0444\u0438\u0433\u0443\u0440.<\/p>\n<pre><code class=\"javascript\">const manyShapes = number =&gt; {     \/\/ \u043e\u0447\u0438\u0449\u0430\u0435\u043c \u0445\u043e\u043b\u0441\u0442     $.clearRect(0, 0, canvas.width, canvas.height)      for (let i = 0; i &lt; number; i++) {         let randomX = randomInt(0, innerWidth)         let randomY = randomInt(0, innerHeight)         if (i % 2 === 0) {             $.beginPath()             $.arc(randomX, randomY, randomInt(10, 30), 0, 2 * Math.PI)             $.fillStyle = randomColor()             $.fill()         } else {             let randomSize = randomInt(20, 60)             $.beginPath()             $.rect(randomX, randomY, randomSize, randomSize)             $.fillStyle = randomColor()             $.fill()         }     } } manyShapes(100) <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/x3\/eb\/fz\/x3ebfzp8fksuqzvdzpba9reb3js.png\"><\/p>\n<p>  \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044e \u0437\u0430 \u043f\u043e\u0442\u0440\u0430\u0447\u0435\u043d\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f. \u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u043e\u043d\u043e \u0431\u044b\u043b\u043e \u043f\u043e\u0442\u0440\u0430\u0447\u0435\u043d\u043e \u043d\u0435 \u0437\u0440\u044f.<\/p>\n<p>  \u041f\u0440\u043e\u0434\u043e\u043b\u0436\u0435\u043d\u0438\u0435 \u0441\u043b\u0435\u0434\u0443\u0435\u0442\u2026<\/p><\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/507298\/\"> https:\/\/habr.com\/ru\/post\/507298\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/507298\/\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/k3\/rw\/1w\/k3rw1wf96s_ci5d78w8slilkihu.png\"><\/p>\n<p>  \u0414\u043e\u0431\u0440\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0441\u0443\u0442\u043e\u043a, \u0434\u0440\u0443\u0437\u044c\u044f!<\/p>\n<p>  \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0445\u043e\u0447\u0443 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441 \u0412\u0430\u043c\u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043d\u0430\u0445\u043e\u0434\u043a\u0430\u043c\u0438, \u0441\u0434\u0435\u043b\u0430\u043d\u043d\u044b\u043c\u0438 \u043c\u043d\u043e\u0439 \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044f JavaScript. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0412\u044b \u043d\u0430\u0439\u0434\u0435\u0442\u0435 \u0434\u043b\u044f \u0441\u0435\u0431\u044f \u0447\u0442\u043e-\u0442\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0435. \u0414\u0430\u043d\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0441\u0435\u0440\u0438\u0438 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0441\u0432\u044f\u0449\u0435\u043d\u0430, \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 DOM.<\/p>\n<p>  \u041d\u0430\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u043a body \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0441\u0442\u0438\u043b\u0438:<\/p>\n<pre><code class=\"javascript\">body {     margin: 0;     min-height: 100vh;     overflow: hidden; } <\/code><\/pre>\n<p>  \u0415\u0441\u043b\u0438 \u043f\u043b\u0430\u043d\u0438\u0440\u0443\u0435\u0442\u0435 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u044b, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u044d\u0442\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0434\u043b\u044f \u043e\u0447\u0438\u0441\u0442\u043a\u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0439:<\/p>\n<pre><code class=\"javascript\">const clear = () =&gt; document.body.innerHTML = '' clear() <\/code><\/pre>\n<p>  <\/p>\n<h3>1. \u0410\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442<\/h3>\n<p>  \u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/API\/Document\/activeElement\" rel=\"nofollow\">activeElement<\/a> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0438\u0439\u0441\u044f \u0432 \u0444\u043e\u043a\u0443\u0441\u0435.<\/p>\n<pre><code class=\"javascript\">const input = document.createElement('input') input.setAttribute('type', 'text') input.setAttribute('placeholder', '\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0441\u0432\u043e\u0435 \u0438\u043c\u044f') input.className = 'username' document.body.append(input)  input.focus()  console.log(document.activeElement) \/\/ &lt;input type=&quot;text&quot; placeholder=&quot;\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0441\u0432\u043e\u0435 \u0438\u043c\u044f&quot; class=&quot;username&quot;&gt; <\/code><\/pre>\n<p>  <\/p>\n<h3>2. \u0420\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/h3>\n<p>  \u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/API\/Document\/designMode\" rel=\"nofollow\">designMode<\/a> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u043e\u0442\u043a\u0440\u044b\u0442\u0443\u044e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435.<\/p>\n<pre><code class=\"javascript\">document.designMode = 'on' <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/o3\/2d\/1c\/o32d1cceek62jtpyjcwt7x-bwm8.png\">  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-305610","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/305610","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=305610"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/305610\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=305610"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=305610"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=305610"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}