Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>30 май 2022</li>

3 <li>0</li>

4 </ul>Знакомимся с главным языком фронтенд-разработки, сравниваем его с Java и запускаем первую программу.

5 Иллюстрация: Merry Mary для Skillbox Media

6 Шеф-редактор Skillbox Media "Код". Пишет о разработке, софт-скиллах и культовых личностях в IT. Обожает Swift, продукты Apple и мемы про код.

7 На JavaScript написан практически весь фронтенд - всё, что мы можем увидеть в интернете. А относительно недавно он обосновался в бэкенде, на смартфонах и даже в прошивках умных чайников. Язык востребован и регулярно занимает первое место в рейтинге<a>Stack Overflow</a>.

8 Разбираемся, чем хорош JavaScript, где применяется и подходит ли он новичкам.

9 JavaScript - это язык управления элементами на сайте. Он умеет красить кнопки, запускать анимации, загружать эффекты, и всё это - без перезагрузки страницы. Например, вы нажали кнопку "Нравится" - вспыхнуло красное сердечко. Или навели курсор на три точки, и выпало меню. В обоих случаях на странице сработал скрипт. А JavaScript как раз главный по ним в интернете - отсюда и его название.

10 JavaScript появился в далёкие девяностые, когда интернет был совсем юным и состоял в основном из текста и гиперссылок. Тогда компания Netscape захотела себе новый язык для веба в дополнение к HTML и CSS.

11 На то было две причины:

12 <ul><li>Благородная - чтобы люди в браузере могли не только читать текст, но и запускать разные меню, окошки, мигающие кнопки и так далее.</li>

13 <li>Коммерческая - чтобы утереть нос Microsoft. В то время между Netscape Navigator и Internet Explorer шла "браузерная война", и Netscape решила привлечь разработчиков к работе в своём браузере с помощью нового языка.</li>

14 </ul>После этого сайты стали выглядеть примерно так:

15 На GIF - сайт-мем<a>lingscars.com</a>, мы писали о нём<a>в этой статье</a>Источник:сайт<a>LINGsCARS</a>А ещё Netscape договорилась с Sun Microsystems, чтобы язык считался "младшим братом" Java для браузеров. Так появилось название JavaScript - не потому, что языки сильно похожи, а потому, что Java тогда был на хайпе. В общем, во всём вините маркетологов :)

16 Для начала небольшой ликбез. Все языки программирования делятся на компилируемыеи интерпретируемые. Чтобы запустить программу, написанную на компилируемом языке, код предварительно прогоняют через компилятор. А вот код на интерпретируемом языке прогонять не надо - передал интерпретатору, и тот его сразу же исполняет.

17 JavaScript относится ко второму типу языков. С одной стороны, это удобно - меньше мороки и рутины, больше творчества. С другой - без интерпретатора он просто не запустится. К счастью, все современные веб-браузеры дружат c JavaScript.

18 Вот как запустить скрипт в браузере:

19 <ul><li>Берём код.</li>

20 <li>Вставляем в браузер.</li>

21 <li>Запускаем.</li>

22 </ul>Кажется, звучит несложно. Давайте что-нибудь напишем. Откроем консоль браузера (Ctrl + Shift + J или Cmd + Opt + J) и вставим туда вот этот код:

23 var userName=prompt("Как вас зовут?", "Введите имя"); confirm("Привет, " + userName + "!");Введите своё имя и нажмите OK. Теперь сайт умеет с нами здороваться!

24 Скриншот: Skillbox MediaВозьмём задачу посложнее. Допустим, у вашего учителя музыки юбилей, и вы готовите ему в подарок небольшой сайт-открытку. Добавили туда красивую надпись, фотографии, стихи. Вроде всё есть, но чего-то не хватает - ну, точно, воздушных шариков! Непорядок. Берём этот код и вставляем в консоль:

25 var js = document.createElement('script'); js.src = "https://safronovmax.github.io/LoveCursor/birthday.js"; document.body.appendChild(js);Вжух - и вы гроза интернета, шальной веб-император нулевых. А шарики исчезнут сами, через десять секунд - можно продолжать читать статьи.

26 Скриншот: Skillbox MediaВеселье весельем, но JavaScript - это серьёзный и мощный язык, на котором можно не только красивые анимации рисовать, но и писать сложные программы для бизнеса.

27 Возьмём, к примеру, "Google Документы". Вспомните, как много там функций: можно менять шрифт, выравнивать абзацы, вставлять картинки. Без JavaScript нам бы пришлось перезагружать страницу после каждого действия - проще плюнуть и уйти в Word. А так у нас есть удобная облачная альтернатива.

28 JavaScript умеет запускаться на сервере и может быть полноценным бэкенд-языком - как Python, С# и Java. Подключаем к нему специальный движок<a>Node.js</a>, и можно писать вообще что угодно: чаты, соцсети, компьютерные программы и так далее. В Netflix, например, пишут на нём и серверную логику, и интерфейс.

29 Расширения - это простые скрипты, которые добавляют в браузер новые функции. Они умеют блокировать рекламу, делать скриншоты, обходить блокировки сайтов (мы этого не говорили). Все расширения пишут на JavaScript - достаточно выучить его, и расширяйте сколько вздумается.

30 Допустим, вы работаете тимлидом в небольшой IT-компании, создаёте облачное хранилище. Однажды к вам приходит продакт-менеджер и требует приложение для Android - чтобы клиенты могли заходить в хранилище с телефона. А у вас вообще-то стартап, и денег на Android-разработчика нет.

31 Можно пойти сложным путём и обучить команду программировать на Kotlin. А можно схитрить и попросить фронтендера написать программу на JavaScript. Потом просто компилируете её под Android с помощью React Native и получаете нативное приложение.

32 Помните динозаврика из Google Chrome? Который прыгает через кактусы, если пропал интернет. Вы тоже можете написать такого на JavaScript, и ещё много других простых игрушек:<a>гонок</a>, бродилок, головоломок, стратегий и так далее.

33 Ремейк Road Fighter на JavaScriptИсточник: Skillbox MediaМногие начинающие разработчики думают, что Java и JavaScript - родственники. Мол, сначала нужно выучить Джаву, а придачу к ней ещё Скрипт, и дело в шляпе :) На самом деле это совсем разные языки - они по-разному устроены и используются для разных задач.

34 В любом компьютерном языке есть типы данных: строки, числа, символы и так далее. Но каждый язык по-разному себя с ними ведёт - это называетсятипизацией. В языках вроде Java онастатическая- если мы вводим числовую переменную, нужно сначала задать её тип. Компьютер смотрит на тип и понимает: сейчас будет математика.

35 А в JavaScript типизациядинамическая, поэтому типы задавать не нужно. С одной стороны, свобода и рок-н-ролл, а с другой - возможны разные аномалии. Например, у JavaScript можно спросить, что больше - банан или 150, и получить ответ:

36 var x = 'banana'; var y = '150'; if (x > y) console.log('Привет'); // JavaScript выдаст "Привет", очевидно, сделав выбор в пользу банана.Java на такие фокусы начнёт ругаться:

37 Скриншот: Skillbox MediaЗато так безопаснее - язык защищает программиста от его собственных ошибок. Не сравнивайте бананы с числами!

38 В отличие от JavaScript, Java - это компилируемый язык. Перед тем как запустить Java-код, его нужно скомпилировать - то есть перевести на машинный язык. Зато потом, когда мы кликнем на иконку программы, код сразу начнёт выполняться. При повторном запуске ничего компилировать не нужно.

39 Скрипты же сначала перехватывает интерпретатор, который делает примерно то же самое, но в режиме реального времени. То есть при каждом запуске скрипта код JavaScript переводится в машинный.

40 Магия языка Java - в его<a>виртуальной машине</a>(JVM). Виртуальная машина позволяет запускать код на любом устройстве, где она установлена. Удалось запустить машину - запустится и программа. Поэтому на Java удобно писать софт для самых разных устройств: серверов, компьютеров, смартфонов, банкоматов и даже роботов.

41 У JavaScript совсем другая задача - управлять элементами страницы. Можно написать полезный скрипт и добавить функций на сайт. А если ещё<a>освоить Node.js</a>, то вообще никакой другой язык не нужен - можно хоть розетку запрограммировать.

42 Короткий ответ - JavaScript. Чтобы написать первый скрипт, не нужно тратить время на установку виртуальной машины и разбираться в типах данных. А из инструментов понадобятся лишь блокнот и браузер. Выбирайте его, если вы совсем новичок и хотите быстро вкатиться в разработку.

43 С Java на первых порах придётся попотеть, зато потом вы сможете запускать сложные системы. А ещё с Java легко перейти на другие языки - Kotlin или C#.

44 Программисты на JavaScript всегда востребованны - они нужны банкам, IT-компаниям, рекламным агентствам и всем, кто ведёт бизнес в интернете. Да и платить им готовы неплохо - в среднем 156 000 рублей в месяц (по <a>данным "Хабр Карьеры"</a>). А джун без опыта может получать около 60 000 рублей.

45 Скриншот: Skillbox MediaЕсли сравнивать разные грейды, то зарплаты JavaScript-разработчиков выглядят так:

46 <ul><li>от 40 до 100 тысяч - джуны;</li>

47 <li>от 80 до 225 тысяч - мидлы;</li>

48 <li>от 200 до 450 тысяч - сеньоры.</li>

49 </ul>Работы у "джаваскриптеров" хоть отбавляй. Согласно hh.ru, в Петербурге и Москве для них открыто 5000 вакансий - это больше, чем для программистов на Java, PHP или C#.

50 Скриншот: Skillbox MediaПочитайте книгу "Выразительный JavaScript" Марейна Хавербеке - это отличное пособие по языку с примерами, заданиями и без воды. Хороший<a>онлайн-учебник</a>у программиста Ильи Кантора - по нему можно дойти от азов до продвинутых концепций вроде ООП и прототипов.

51 Дальнейший путь зависит от вашего стека. Если метите во фронтенд, начните с HTML и CSS. На сайте<a>Code Basics</a>есть бесплатные курсы по ним - с понятной теорией и тренажёрами. Потом разберитесь в работе браузера, сетевой безопасности и определитесь с фреймворком:<a>React.js</a>,<a>Vue.js</a>или<a>Angular.JS</a>.

52 Если больше нравится бэкенд,в первую очередь изучите Node.js - он позволяет разворачивать JavaScript на сервере. Во-вторых, освойте SQL-запросы, базы данных и сетевые протоколы. По последней теме посоветуем бессмертную классику Эндрю Таненбаума "Компьютерные сети", которая обновляется каждые 3-5 лет.

53 JavaScript отлично подходит для "вкатывания" в IT. На первых порах с ним не нужно погружаться в технические детали и сложные концепции, а писать код можно в блокноте или простом редакторе. На JavaScript написан фронтенд большинства сайтов, а у некоторых - даже серверная часть. Поэтому программисты, которые освоили этот язык, будут востребованны, пока жив интернет :)

54 <a>Бесплатный курс по Python ➞Мини-курс для новичков и для опытных кодеров. 4 крутых проекта в портфолио, живое общение со спикером. Кликните и узнайте, чему можно научиться на курсе. Смотреть программу</a>