Редактор HTML+CSS+JS в стиле JSfiddle, код которого состоит из 230 символов

сегодня в 19:50

Хотя неделя 30-строчников закончилась, рискну привести ещё один пример сверхлаконичного кода JavaScript. Встречайте четырёхпанельный редактор HTML/CSS/JS, с превью в реальном времени, код которого умещается в 230 символов:

<x id=e><script>for(i=4;i--;)e.innerHTML+=(i?'<textarea id=t'+i:'<iframe')+' style=width:49%;height:48% oninput=\'e.lastChild.src="data:text/html;base64,"+btoa(t3[v="value"]+"<script>"+t1[v]+"<\/script><style>"+t2[v])\'>'</script>

Посмотреть демо можно по этой ссылке. А можно просто вставить вот этот текст с кодом в адресную строку браузера:

data:text/html,%20<x%20id=e><script>for(i=4;i--;)e.innerHTML+=(i?'<textarea%20id=t'+i:'<iframe')+'%20style=width:49%;height:48%%20oninput=\'e.lastChild.src="data:text/html;base64,"+btoa(t3[v="value"]+"<script>"+t1[v]+"<\/script><style>"+t2[v])\'>'</script>

Логика работы скрипта довольно проста — в цикле создаются три элемента textarea и один iframe, причём переменная цикла используется в качестве флага для переключения между созданием textarea и iframe. Затем на событие oninput вешается добавление текста из трех текстовых областей в соответствующие части документа во фрейме.

Если вдруг кто-то пропустил, вот ещё пара примеров креативного использования JavaScript и встроенных возможностей браузеров, которые были опубликованы на Хабре:

Developers, stick with Russians – work in London

Переводы с

карты на карту

Переводы

через QR-Код

Новая функция

«Мой контроль»

Возьми Lumia 925 на тест-драйв сейчас.

Впечатляющие возможности

в стильном тонком корпусе из металла

Boomburum

исследует LTE

Эволюция средств связи

в путешествии по России

Проблемы коммуникации внутри бизнеса?

Смотри бесплатные курсы

и выиграй Xbox

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.

This entry passed through the Full-Text RSS service — if this is your content and you're reading it on someone else's site, please read the FAQ at fivefilters.org/content-only/faq.php#publishers.