{"draftJsState":{"blocks":[{"data":{"image":{"id":"64a4879a5e66ef1e3cf6e44a"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"6q8c"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":22,"offset":10}],"inlineStyleRanges":[],"text":"Источник: Nuances of Programming","type":"unstyled","key":"3s8r6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Браузер","type":"header-three","key":"cufm3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":30,"offset":0,"style":"BOLD"}],"text":"Переход на полноэкранный режим","type":"header-three","key":"cv1i4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы перейти к полноэкранному режиму:","type":"unstyled","key":"a2gjo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"function fullScreen() { \n const el = document.documentElement\n const rfs = \n el.requestFullScreen || \n el.webkitRequestFullScreen || \n el.mozRequestFullScreen || \n el.msRequestFullscreen\n if(typeof rfs != \"undefined\" && rfs) {\n rfs.call(el)\n }\n}\nfullScreen()","type":"blockquote","key":"79ceq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":30,"offset":0,"style":"BOLD"}],"text":"Выход из полноэкранного режима","type":"header-three","key":"b8bce"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы выйти из полноэкранного режима:","type":"unstyled","key":"4959n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"function exitScreen() {\n if (document.exitFullscreen) { \n document.exitFullscreen()\n } \n else if (document.mozCancelFullScreen) { \n document.mozCancelFullScreen()\n } \n else if (document.webkitCancelFullScreen) { \n document.webkitCancelFullScreen()\n } \n else if (document.msExitFullscreen) { \n document.msExitFullscreen()\n } \n if(typeof cfs != \"undefined\" && cfs) {\n cfs.call(el)\n }\n}\nexitScreen()","type":"blockquote","key":"2euu3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"Вывод страницы","type":"header-three","key":"k5fa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы вывести текущую страницу:","type":"unstyled","key":"8g98t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"window.print()","type":"blockquote","key":"eb41g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":35,"offset":0,"style":"BOLD"}],"text":"Изменение стиля выводимого контента","type":"header-three","key":"641r0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы при выводе страницы изменить текущий макет:","type":"unstyled","key":"ehlq2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n

noprint

","type":"blockquote","key":"41uq1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":0,"style":"BOLD"}],"text":"Блокировка события закрытия","type":"header-three","key":"64tqr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы оградить пользователя от обновления или закрытия браузера, запустите событие beforeunload (некоторые браузеры не кастомизируют текстовой контент):","type":"unstyled","key":"987gt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"window.onbeforeunload = function(){\n return 'Are you sure you want to leave the haorooms blog？';\n};","type":"blockquote","key":"a0gmu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"}],"text":"Запись экрана","type":"header-three","key":"6eqe6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы сделать запись текущего экрана для ее передачи или загрузки:","type":"unstyled","key":"bfd8u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const streamPromise = navigator.mediaDevices.getDisplayMedia()\nstreamPromise.then(stream => {\n var recordedChunks = [];// записанные видеоданные \nvar options = { mimeType: \"video/webm; codecs=vp9\" };// Установите формат кодирования\n var mediaRecorder = new MediaRecorder(stream, options);// Инициализируйте экземпляр MediaRecorder\n mediaRecorder.ondataavailable = handleDataAvailable;// Установите обратный вызов, когда данные будут доступны (конец записи экрана)\n mediaRecorder.start();\n // Фрагментация видео \n function handleDataAvailable(event) {\n if (event.data.size > 0) {\n recordedChunks.push(event.data);// Добавление данных, event.data - объект BLOB\n download();// Инкапсуляция в объект BLOB и загрузка\n }\n }\n// Загрузка файла \n function download() {\n var blob = new Blob(recordedChunks, {\n type: \"video/webm\"\n });\n // Видео можно загрузить здесь в бэкенд \n var url = URL.createObjectURL(blob);\n var a = document.createElement(\"a\");\n document.body.appendChild(a);\n a.style = \"display: none\";\n a.href = url;\n a.download = \"test.webm\";\n a.click();\n window.URL.revokeObjectURL(url);\n }\n})","type":"blockquote","key":"a7i98"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":61,"offset":0,"style":"BOLD"}],"text":"Определение состояния горизонтального и вертикального экранов","type":"header-three","key":"6ugr0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы оценить состояние горизонтального или вертикального экрана мобильного телефона:","type":"unstyled","key":"38j6l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"function hengshuping(){\n if(window.orientation==180||window.orientation==0){\n alert(\"Portrait state！\")\n }\n if(window.orientation==90||window.orientation==-90){\n alert(\"Landscape state！\")\n }\n}\nwindow.addEventListener(\"onorientationchange\" in window ? \"orientationchange\" : \"resize\", hengshuping, false);","type":"blockquote","key":"4mis6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":61,"offset":0,"style":"BOLD"}],"text":"Различение стилей для горизонтального и вертикального экранов","type":"header-three","key":"bggv9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы установить разные стили для горизонтального и вертикального экранов:","type":"unstyled","key":"5m4hh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"1ti0l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":0,"style":"BOLD"}],"text":"Скрытие страницы вкладок","type":"header-three","key":"ena0f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы отслеживать события отображения и скрытия вкладок:","type":"unstyled","key":"79oav"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const {hidden, visibilityChange} = (() => {\n let hidden, visibilityChange;\n if (typeof document.hidden !== \"undefined\") {\n // Поддержка версий Opera 12.10, Firefox 18 и выше \n hidden = \"hidden\";\n visibilityChange = \"visibilitychange\";\n } else if (typeof document.msHidden !== \"undefined\") {\n hidden = \"msHidden\";\n visibilityChange = \"msvisibilitychange\";\n } else if (typeof document.webkitHidden !== \"undefined\") {\n hidden = \"webkitHidden\";\n visibilityChange = \"webkitvisibilitychange\";\n }\n return {\n hidden,\n visibilityChange\n }\n})();\n\nconst handleVisibilityChange = () => {\n console.log(\"currently hidden\", document[hidden]);\n};\ndocument.addEventListener(\n visibilityChange,\n handleVisibilityChange,\n false\n);","type":"blockquote","key":"4vhjr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Изображение","type":"header-three","key":"el695"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":47,"offset":0,"style":"BOLD"}],"text":"Предварительный просмотр локального изображения","type":"header-three","key":"3vdll"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы перед загрузкой на сервер просмотреть полученное от клиента изображение:","type":"unstyled","key":"ce7oa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

\n \n $\"\"$ \n

\n","type":"blockquote","key":"bc7pm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":36,"offset":0,"style":"BOLD"}],"text":"Предварительная загрузка изображений","type":"header-three","key":"4ci45"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы предварительно загрузить большое количество изображений и избежать белого экрана:","type":"unstyled","key":"cmgqq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const images = []\nfunction preloader(args) {\n for (let i = 0, len = args.length; i < len; i++) { \n images[i] = new Image() \n images[i].src = args[i]\n } \n} \npreloader(['1.png', '2.jpg'])","type":"blockquote","key":"60dlc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"JS","type":"header-three","key":"e6iae"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":0,"style":"BOLD"}],"text":"Создание строковых скриптов","type":"header-three","key":"2jbbp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы преобразовать строку/строки в js-скрипт (этот метод отличается xss-уязвимостью, поэтому требует осмотрительности):","type":"unstyled","key":"3a3j5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const obj = eval('({ name: \"jack\" })')\n// obj будет преобразован в object{ name: \"jack\" }\nconst v = eval('obj')\n// v станет переменной obj","type":"blockquote","key":"7gk0e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":35,"offset":0,"style":"BOLD"}],"text":"Разделение имен рекурсивной функции","type":"header-three","key":"3pm86"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы после изменения имени рекурсивной функции изменить внутреннее имя функции (argument — это внутренний объект функции, включающий все параметры, переданные в функцию, а arguments.callee представляет имя функции):","type":"unstyled","key":"9tji5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// Это базовая последовательность Фибоначчи\nfunction fibonacci (n) {\n const fn = arguments.callee\n if (n <= 1) return 1\n return fn(n - 1) + fn(n - 2)\n}","type":"blockquote","key":"emet0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"DOM-элементы","type":"header-three","key":"cur2f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":38,"offset":0,"style":"BOLD"}],"text":"Проверка неявно определенного элемента","type":"header-three","key":"fgh99"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы определить, появляется ли DOM-элемент в данный момент в представлении страницы, используйте IntersectionObserver:","type":"unstyled","key":"843i5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n\n

Invisible

\n","type":"blockquote","key":"k580"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":0,"style":"BOLD"}],"text":"Редактирование DOM-элемента","type":"header-three","key":"693ag"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы отредактировать DOM-элемент, кликните на него, как на текстовую область:","type":"unstyled","key":"ecmlh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

here can be edited

","type":"blockquote","key":"b7m0i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":30,"offset":0,"style":"BOLD"}],"text":"Мониторинг атрибутов элементов","type":"header-three","key":"ci411"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

test

\n\n\n","type":"blockquote","key":"8kdcj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"}],"text":"Вывод DOM-элемента","type":"header-three","key":"15tie"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы в процессе разработки вывести DOM-элемент с внутренними атрибутами, используйте console.dir (console.log часто выводит DOM-элемент, но не позволяет просмотреть его внутренние атрибуты):","type":"unstyled","key":"1f0kh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"console.dir(document.body)","type":"blockquote","key":"3jsci"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Прочее","type":"header-three","key":"8u0vt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":0,"style":"BOLD"}],"text":"Активирование приложений","type":"header-three","key":"41qtl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы при разработке мобильного приложения открывать другие приложения, используйте следующие методы присвоения location.href:","type":"unstyled","key":"28q93"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"phone\nandroid message \nios message\nios message","type":"blockquote","key":"8e76h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Читайте также:","type":"unstyled","key":"8mjh2"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":83,"offset":0}],"inlineStyleRanges":[],"text":"6 современных возможностей JavaScript, о которых не знает большинство разработчиков","type":"unordered-list-item","key":"4pv32"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":61,"offset":0}],"inlineStyleRanges":[],"text":"5 советов по оптимизации производительности приложения NodeJS","type":"unordered-list-item","key":"63gnv"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":59,"offset":0}],"inlineStyleRanges":[],"text":"Из финансов в разработку: как стать инженером-программистом","type":"unordered-list-item","key":"8ha4d"},{"data":{},"depth":0,"entityRanges":[{"key":4,"length":8,"offset":14},{"key":5,"length":2,"offset":24}],"inlineStyleRanges":[],"text":"Читайте нас в Telegram, VK","type":"unstyled","key":"2612p"},{"data":{},"depth":0,"entityRanges":[{"key":6,"length":9,"offset":15},{"key":7,"length":49,"offset":26}],"inlineStyleRanges":[{"length":14,"offset":0,"style":"ITALIC"}],"text":"Перевод статьи Xiuer Old: 18 Powerful JavaScript Skills for Senior Engineer","type":"unstyled","key":"a0c1t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"hD5LKZNvMUnnNwORvjmp"}],"entityMap":{"0":{"data":{"url":"https://nuancesprog.ru/p/18028/"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://nuancesprog.ru/p/17873/","url":"https://nuancesprog.ru/p/17873/"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"https://nuancesprog.ru/p/17367/","url":"https://nuancesprog.ru/p/17367/"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"href":"https://nuancesprog.ru/p/17756/","url":"https://nuancesprog.ru/p/17756/"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"href":"https://t.me/nuancesprog","url":"https://t.me/nuancesprog"},"mutability":"MUTABLE","type":"LINK"},"5":{"data":{"href":"https://vk.com/nuancesprog","url":"https://vk.com/nuancesprog"},"mutability":"MUTABLE","type":"LINK"},"6":{"data":{"href":"https://xiuer.medium.com/","url":"https://xiuer.medium.com/"},"mutability":"MUTABLE","type":"LINK"},"7":{"data":{"href":"https://javascript.plainenglish.io/18-powerful-javascript-skills-for-senior-engineers-17c51990997e","url":"https://javascript.plainenglish.io/18-powerful-javascript-skills-for-senior-engineers-17c51990997e"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}