Сергей

document - текущий документ
getElementById() - метод получения элемента используя id
onchange  - свойство элемента для обработчика события
function (event){} - анонимная функция (обработчик события)

event - локальная переменная в контексте анонимной функции
target - таргет он и в африке таргет (целевой элемент, где происходит туса)
parentNode - родительская нода
childNodes[1] - у родителя есть дети
data - у детей есть данные
slice(1) - отхренашить кусочек
 
currentKey - отхренашеный кусочек

У верстальщиков есть негласное правило - то, что можно сделать CSS'ом (т.е. обойтись без JS) - стоит делать именно CSS'ом. Главное, не гиперболизировать это правило и не возводить его в степень абсолюта. Оно работает в тех случаях, когда трудозатраты на оба варианта (JS/CSS) соизмеримы и вариант с CSS'ом не влечёт за собой замусоривание кода (например, слайдеры можно делать в т.ч. и на "чистом CSS", но такой подход вряд ли можно будет считать хорошим решением в большинстве случаев).

Если Вы имеете в виду то, что написано слева от Современные технологии MICE-мероприятий", то это в фотошопе делается.
То что Вы показали можно ТОЖЕ в фотошопе сделать, если что.
Если Вам позарез нужно современными техниками, то в СВГ такое накидать можно.
или вот так примерно:
https://jsfiddle.net/o6uh9gcw/
вставить в дивку с тем серым бекграундом

https://bennettfeely.com/clippy/