Сергей Мартыненко

Конкретно этот пример самый дефолтный на чистом коде. Не знаю по какой причине он может у вас не работать. Его достаточно просто скопировать и вставить в свой HTML-файл. Часто бывает, что написанный код использует какой-то процессор. То есть это не чистый код и по дефолту браузер его обработать не сможет. Он не будет работать если вы его просто вставите без обработки. Используемый процессор будет приписан в скобках в заголовке. Например HTML (Pug) - CSS (Stylus) - JS (Babel) и так далее. Если используется процессор, то чтобы получить чистый код прямо в окне Codepen достаточно просто выбрать в выпадающем меню блока (стрелка вниз) пункт View Compiled ... и код будет сразу же преобразован. Преобразованный код уже можно смело вставлять к себе и он будет обрабатываться браузером по дефолту. Так же могут быть подключены дополнительные библиотеки без которых код не будет работать. Чтобы посмотреть список подключенных библиотек надо нажать на настройки блока (шестеренка) и посмотреть есть ли в списке ссылки на них. Если есть ссылки на библиотеки соответственно вам тоже нужно их подключить в код. Ну а проще всего конечно зарегистрироваться на сайте. Нажать в правом нижнем углу Export -> Export .zip и получить архив с содержимым. Соответственно index.html это будет HTML-код. В папке css будет файл с CSS-кодом. В папке js будет скрипт с JS-кодом. Все эти файлы будут на чистом коде. Если использовались дополнительные процессоры, то код под них будет в соответствующих папках.

https://learn.javascript.ru/behavior

if ($var > 1) {
    myCode1();
    myCode2();
}
else {
    myCode2();
    myCode1();
}

Да, фактически это узаконенный хак.
Изначально их придумали для задач типа нумерации заголовков, а сегодня уже как только не используют.