Предыстория
Женя проснулась и посмотрела на часы, было 05:48, 1 июля, пятница. На работу только через 5 часов, а спать совсем не хотелось. Сегодня был важный день, день финальной сдачи проекта, над которым команда работала последние 2 месяца. Код давно написан, правки внесены. Сегодня должна состоятся последняя встреча с заказчиком. И подписаны закрывающие документы. И наконец-то все смогут выдохнуть. Да, это были непростые 2 месяца, но они справились! Уложились в сроки. И если сегодня переговоры пройдут как положено, все будут молодцы!
В таком взволнованном и приподнятом настроении Женя встала с кровати и пошла в ванную…
***
Сергей сидел в офисе и просто втыкал в монитор своего мака, когда вошла Настя.
— Они ещё не вернулись? — спросила она.
— Ещё вот только недавно ушли, — ответил Сергей, — я хотел пойти с ними, но они сказали, что вдвоем вполне справятся. А мне вот тут сиди, скучай. Может пошли кофе попьем?
— А если они как раз вернутся? Сегодня всё должно быть быстро. Заказчики уже 5-й раз смотрят проект. И в прошлый раз у них не было нареканий. Так что, по идее, Леша просто ещё раз всё им покажет, они всё подпишут, и мы свободны! На всё про всё минут 30… Когда, говоришь, они ушли?
— Минут 15 назад, я не посмотрел точно, — ответил Сергей. — Слушай, я, наверное, всё-таки пойду возьму нам всем кофе, а то проснулся сегодня в 9 утра, спать хочу! Сто лет так рано не вставал…
Сергей встал и направился к двери. Не успел он взяться за ручку, как дверь резко распахнулась, и в офис влетел Лёша. По его лицу в принципе было понятно, как всё прошло!
— Мы сделали это! — провозгласил Леша и сходу обнял Сергея.
— Ура! — закричали Сергей и Настя, они уже все обнимались возле входа.
Женя вошла через секунд десять после влета Лёши, и сразу попала в общую кутерьму.
— Народ, — сказал Леша, когда все немного успокоились, — нам надо это отметить! Мы уже 2 месяца нормально не отдыхали! Предлагаю сейчас закупиться и поехать за город на выходные! Тем более, Женя говорила, что у нее дача есть, Жень?..
В таком взволнованном и приподнятом настроении Женя встала с кровати и пошла в ванную…
***
Сергей сидел в офисе и просто втыкал в монитор своего мака, когда вошла Настя.
— Они ещё не вернулись? — спросила она.
— Ещё вот только недавно ушли, — ответил Сергей, — я хотел пойти с ними, но они сказали, что вдвоем вполне справятся. А мне вот тут сиди, скучай. Может пошли кофе попьем?
— А если они как раз вернутся? Сегодня всё должно быть быстро. Заказчики уже 5-й раз смотрят проект. И в прошлый раз у них не было нареканий. Так что, по идее, Леша просто ещё раз всё им покажет, они всё подпишут, и мы свободны! На всё про всё минут 30… Когда, говоришь, они ушли?
— Минут 15 назад, я не посмотрел точно, — ответил Сергей. — Слушай, я, наверное, всё-таки пойду возьму нам всем кофе, а то проснулся сегодня в 9 утра, спать хочу! Сто лет так рано не вставал…
Сергей встал и направился к двери. Не успел он взяться за ручку, как дверь резко распахнулась, и в офис влетел Лёша. По его лицу в принципе было понятно, как всё прошло!
— Мы сделали это! — провозгласил Леша и сходу обнял Сергея.
— Ура! — закричали Сергей и Настя, они уже все обнимались возле входа.
Женя вошла через секунд десять после влета Лёши, и сразу попала в общую кутерьму.
— Народ, — сказал Леша, когда все немного успокоились, — нам надо это отметить! Мы уже 2 месяца нормально не отдыхали! Предлагаю сейчас закупиться и поехать за город на выходные! Тем более, Женя говорила, что у нее дача есть, Жень?..
ГЛАВА 1
- Вам сюда? - спросил таксист.
Машина остановилась возле больших черных металлических ворот с надписью: "д. Ратомка, ул. Подгорная, 22".
- Да, это здесь, спасибо большое - ответила Женя.
Ребята вышли из машины и вошли в ворота. Каменная дорожка вела к высокому крыльцу 3-х этажного особняка, построенного, наверное, лет 100 назад.
- Ого, нормальная дача. - сказал Сергей.
- Это дом моего деда, он жил здесь года до 2005-го. Тоже был программистом, одним из первых в Беларуси. Сейчас тут никто не живет, только приезжаем отдохнуть несколько раз в год и заодно в порядок всё привести…
***
- Жееееень! – услышала Женя, как Сергей зовет ее откуда-то сверху. - Жеееень, ты там?
Женя отдала удивленной Насте кастрюлю с шашлыком и пошла посмотреть, что там случилось. Женя нашла Сергея в центре небольшой дальней комнаты на третьем этаже. Он стоял и внимательно что-то рассматривал.
- Как ты тут оказался? – спросила Женя.
- Да вот, пошел поискать чем камин разжечь, а тут это. Твое железо?
Сергей рассматривал пять старинных мониторов, занимающих одну из стен в комнате. Кроме мониторов тут был большой дубовый стол, системный блок под столом, много проводов и старое белое геймерское кресло с потёртой кожей. Окон в комнате не было. Но было свежо. И как-то уютно.
- Это железо моего деда, - ответила Женя.
- Когда его включали последний раз?
- Не помню, чтобы его вообще кто-то включал после того как деда не стало...
- И что, разве никому было не интересно над чем он работал!?
- Ну, я тогда ещё ничего в этом не понимала. А потом сюда никто не ходил и все как-то забыли про этот комп.
- А можно я его запущу? Пожалуйста.. - попросил Сергей.
Жене и самой было чертовски любопытно, над чем работал ее дед. Она кивнула.
- Я разберу системник, - сказал Сергей, - почищу его от пыли, проверю контакты и попробую включить. Надеюсь всё получится.
***
Когда Сергей нажал на кнопку запуска, он услышал привычное жужжание кулера, и ощутил приятное волнение.
- Ну давай, запускайся!
На экране выскочила картинка запуска Windows XP и побежала строка загрузки. Через минуту экран озарило такое ностальгическое "ПРИВЕТСТВИЕ" на голубом фоне и появились Зеленые Холмы.
- Так, ну давай посмотрим, над чем Вы работали, уважаемый Пал Палыч, - сказал сам себе Сергей и нажал на Мой Компьютер.
Через 5 минут изучения всех дисков старинного ПК, Сергей с удивлением обнаружил, что все диски пустые. Как будто кто-то специально всё почистил. Может следы заметали? На компьютере остались только стандартные и системные файлы Windows.
А потом Сергей увидел один единственный файл, на рабочем столе, в верхнем правом углу. И как он его сразу не заметил? Файл назывался "Zhene.html". Интересно.
- Жееееень! - закричал Сергей, - кажется тут тебе послание...
Настя и Женя пришли на 3-ий этаж на зов Сергея.
***
Тем временем, пока Серёжа занимался компьютером, Лёша жарил мясо.
- Народ, шашлык готов, идите есть, в конце концов! - закричал Лёша. - Настя, неси вино, давайте уже отмечать!
На его крик никто не откликнулся.
- Настя! Женя! Вы куда пропали?! Только что ж тут были.
Лёша вспомнил что Сергей уже 1.5 часа возится с каким-то старьем на 3-м этаже. Может они все там? Лёша нашел всех стоящими перед пятью голубыми мониторами с заставкой Зеленых Холмов Windows XP.
- Ничего себе у вас тут рабочее место. – сказал Леша, но на него никто не обратил внимание.
- Это 100% код HTML, - сказал Сергей, - только какой-то странный. Половина тегов поломана. Как будто кто-то писал наспех с дрожащими руками. Да ещё и в блокноте.
***
Сергей, Женя и Настя склонились над монитором, в котором был открыт файл Блокнота с до боли знакомыми символами в нем: "div", "h1", "p", "meta".
- Это код HTML, - повторил еще раз Сергей, - только какой-то странный. Половина тегов "поломана" да и еще какие-то цифры на экране, похоже, что это какой-то шифр. Как будто кто-то писал в спешке, боялся не успеть.
- А что там в заголовках написано? - спросил Лёша.
- Так, сейчас найдем... ага, h1, ага. "Сообщение для Жени:".
Все обернулись на Женю. Она стояла в недоумении и была слегка удивлена.
- Но текст зашифрован. - сказала Настя.
- Нас тут 4-ро разработчиков, как-нибудь починим! - ответил Сергей.
- Да, не судьба нам шашлыков поесть. - тяжело вздохнул Лёша…
Машина остановилась возле больших черных металлических ворот с надписью: "д. Ратомка, ул. Подгорная, 22".
- Да, это здесь, спасибо большое - ответила Женя.
Ребята вышли из машины и вошли в ворота. Каменная дорожка вела к высокому крыльцу 3-х этажного особняка, построенного, наверное, лет 100 назад.
- Ого, нормальная дача. - сказал Сергей.
- Это дом моего деда, он жил здесь года до 2005-го. Тоже был программистом, одним из первых в Беларуси. Сейчас тут никто не живет, только приезжаем отдохнуть несколько раз в год и заодно в порядок всё привести…
***
- Жееееень! – услышала Женя, как Сергей зовет ее откуда-то сверху. - Жеееень, ты там?
Женя отдала удивленной Насте кастрюлю с шашлыком и пошла посмотреть, что там случилось. Женя нашла Сергея в центре небольшой дальней комнаты на третьем этаже. Он стоял и внимательно что-то рассматривал.
- Как ты тут оказался? – спросила Женя.
- Да вот, пошел поискать чем камин разжечь, а тут это. Твое железо?
Сергей рассматривал пять старинных мониторов, занимающих одну из стен в комнате. Кроме мониторов тут был большой дубовый стол, системный блок под столом, много проводов и старое белое геймерское кресло с потёртой кожей. Окон в комнате не было. Но было свежо. И как-то уютно.
- Это железо моего деда, - ответила Женя.
- Когда его включали последний раз?
- Не помню, чтобы его вообще кто-то включал после того как деда не стало...
- И что, разве никому было не интересно над чем он работал!?
- Ну, я тогда ещё ничего в этом не понимала. А потом сюда никто не ходил и все как-то забыли про этот комп.
- А можно я его запущу? Пожалуйста.. - попросил Сергей.
Жене и самой было чертовски любопытно, над чем работал ее дед. Она кивнула.
- Я разберу системник, - сказал Сергей, - почищу его от пыли, проверю контакты и попробую включить. Надеюсь всё получится.
***
Когда Сергей нажал на кнопку запуска, он услышал привычное жужжание кулера, и ощутил приятное волнение.
- Ну давай, запускайся!
На экране выскочила картинка запуска Windows XP и побежала строка загрузки. Через минуту экран озарило такое ностальгическое "ПРИВЕТСТВИЕ" на голубом фоне и появились Зеленые Холмы.
- Так, ну давай посмотрим, над чем Вы работали, уважаемый Пал Палыч, - сказал сам себе Сергей и нажал на Мой Компьютер.
Через 5 минут изучения всех дисков старинного ПК, Сергей с удивлением обнаружил, что все диски пустые. Как будто кто-то специально всё почистил. Может следы заметали? На компьютере остались только стандартные и системные файлы Windows.
А потом Сергей увидел один единственный файл, на рабочем столе, в верхнем правом углу. И как он его сразу не заметил? Файл назывался "Zhene.html". Интересно.
- Жееееень! - закричал Сергей, - кажется тут тебе послание...
Настя и Женя пришли на 3-ий этаж на зов Сергея.
***
Тем временем, пока Серёжа занимался компьютером, Лёша жарил мясо.
- Народ, шашлык готов, идите есть, в конце концов! - закричал Лёша. - Настя, неси вино, давайте уже отмечать!
На его крик никто не откликнулся.
- Настя! Женя! Вы куда пропали?! Только что ж тут были.
Лёша вспомнил что Сергей уже 1.5 часа возится с каким-то старьем на 3-м этаже. Может они все там? Лёша нашел всех стоящими перед пятью голубыми мониторами с заставкой Зеленых Холмов Windows XP.
- Ничего себе у вас тут рабочее место. – сказал Леша, но на него никто не обратил внимание.
- Это 100% код HTML, - сказал Сергей, - только какой-то странный. Половина тегов поломана. Как будто кто-то писал наспех с дрожащими руками. Да ещё и в блокноте.
***
Сергей, Женя и Настя склонились над монитором, в котором был открыт файл Блокнота с до боли знакомыми символами в нем: "div", "h1", "p", "meta".
- Это код HTML, - повторил еще раз Сергей, - только какой-то странный. Половина тегов "поломана" да и еще какие-то цифры на экране, похоже, что это какой-то шифр. Как будто кто-то писал в спешке, боялся не успеть.
- А что там в заголовках написано? - спросил Лёша.
- Так, сейчас найдем... ага, h1, ага. "Сообщение для Жени:".
Все обернулись на Женю. Она стояла в недоумении и была слегка удивлена.
- Но текст зашифрован. - сказала Настя.
- Нас тут 4-ро разработчиков, как-нибудь починим! - ответил Сергей.
- Да, не судьба нам шашлыков поесть. - тяжело вздохнул Лёша…
Перейдите по следующей ссылке : https://jsfiddle.net/cvy0jtrd/.
Перед Вами откроется сайт, который называется jsfiddle. Он предназначен для написания и просмотра кода (html, css и js) в режиме онлайн. После перехода Вы увидите следующее: 4 окна, каждое из которых выполняет свою функцию. Эти окна подписаны на изображении:
Задание + инструкция
Перед нашими героями-разработчиками зашифрованное послание от жениного дедушки (в окне с результатом). Мало того, что на экране одни цифры через запятую, так еще и теги "поломаны". Ну с таким html-кодом, конечно, работать не получится.
Для начала Вам нужно "починить" некорректные теги. Кстати, они подсвечиваются красным цветом в окне HTML.
Возникает вопрос что же такое тег? Теги - это своеобразные команды, которые преобразовываются в визуальные объекты у нас в браузере. Всё ещё непонятно? Поясним на примере. Например, мы хотим вставить на веб-страничку какой-то абзац текста, не просто текст, а именно как абзац (с отступами). Для этого недостаточно просто написать нужные строки в html-коде. Еще необходимо поместить этот ТЕКСТ в специальный ТЕГ, который отвечает за создание абзаца. Таким тегом в HTML является <p></p>.
Для начала Вам нужно "починить" некорректные теги. Кстати, они подсвечиваются красным цветом в окне HTML.
Возникает вопрос что же такое тег? Теги - это своеобразные команды, которые преобразовываются в визуальные объекты у нас в браузере. Всё ещё непонятно? Поясним на примере. Например, мы хотим вставить на веб-страничку какой-то абзац текста, не просто текст, а именно как абзац (с отступами). Для этого недостаточно просто написать нужные строки в html-коде. Еще необходимо поместить этот ТЕКСТ в специальный ТЕГ, который отвечает за создание абзаца. Таким тегом в HTML является <p></p>.
В итоге: чтобы разместить на веб-страничке абзац текста. Нужно написать подобную конструкцию:
<p>Это и есть наш абзац. Вместо этого текста внутри этого тега может быть любой другой</p>
Таким образом, текст помещен внутрь тега и получается абзац.
В нашем случае на веб-странице, которую оставил женин дедушка в качестве послания, также есть теги <p></p>. Но они сломаны! В них присутствуют какие-то лишние символы. Эти лишние символы нужно немедленно убрать!
Ещё раз: чтобы разместить абзац на веб-страничке правильно, перед текстом нужно вставить <p>, а после текста - </p> (и никак иначе, таковы правила).
Нужно сказать, что все парные теги теги имеют подобную структуру: открываются таким способом - <p>, а закрываются таким - </p>. Поэтому все теги на странице, которые не в вышеописанном формате, нужно исправить.
При успешном выполнении, исправленный первый тег <p> и тег <h1> должны выглядеть так, как на изображении:
<p>Это и есть наш абзац. Вместо этого текста внутри этого тега может быть любой другой</p>
Таким образом, текст помещен внутрь тега и получается абзац.
В нашем случае на веб-странице, которую оставил женин дедушка в качестве послания, также есть теги <p></p>. Но они сломаны! В них присутствуют какие-то лишние символы. Эти лишние символы нужно немедленно убрать!
Ещё раз: чтобы разместить абзац на веб-страничке правильно, перед текстом нужно вставить <p>, а после текста - </p> (и никак иначе, таковы правила).
Нужно сказать, что все парные теги теги имеют подобную структуру: открываются таким способом - <p>, а закрываются таким - </p>. Поэтому все теги на странице, которые не в вышеописанном формате, нужно исправить.
При успешном выполнении, исправленный первый тег <p> и тег <h1> должны выглядеть так, как на изображении:
Ну вот, html-теги починены. Теперь нужно непосредственно расшифровать эти дурацкие цифры и "превратить их в человеческий текст". Сергей, как самый талантливый разработчик, сразу догадался, что это за шифр. Написать код, для расшифровки послания ему также не составило особого труда. Вот этот код:
let message1 = document.getElementById('message1').textContent;
let message2 = document.getElementById('message2').textContent;
let arrMessage1 = message1.split(',');
let arrMessage2 = message2.split(',');
let arrayBuff1 = new Uint8Array(arrMessage1);
let arrayBuff2 = new Uint8Array(arrMessage2);
let decoder = new TextDecoder('utf-8');
let finalString1 = decoder.decode(arrayBuff1);
let finalString2 = decoder.decode(arrayBuff2);
let p1 = document.getElementById('message1');
let p2 = document.getElementById('message2');
p1.textContent = finalString1;
p2.textContent = finalString2;
Код написан на языке JavaScript. Вчитываться и вдумываться, что он делает, новичкам в программировании ВООБЩЕ не нужно. Это будет позже. Пока что, для расшифровки, этот код просто нужно скопировать и вставить в поле для JavaScript (JS). В итоге, часть html-кода и весь код расшифровки на JS должен выглядеть так, как на изображении:
После необходимо сохранить текущий прогресс. Для этого нужно нажать на кнопку Save на верхней панели:
При выполнении всех вышеописанных условий (а именно: исправлении тегов и вставки js-кода) и сохранении, в окне для вывода результата ты увидишь сообщение от жениного дедушки.
После выполнения этого задания отправляй ссылку на сохраненный результат в форму ответа на задание. И далее переходи к прохождению второго урока! Удачи!
После выполнения этого задания отправляй ссылку на сохраненный результат в форму ответа на задание. И далее переходи к прохождению второго урока! Удачи!