Что написано на javascript
Базис JavaScript: для чего хорош и где применяется
Авторизуйтесь
Базис JavaScript: для чего хорош и где применяется
JavaScript и основы применения
Перед тем как перейти к основам JavaScript, необходимо разобраться с назначением данного языка программирования.
Самое известное применение JS — это, конечно же, веб-разработка. Чаще всего к JS прибегают, когда нужно добавить динамичности на сайт или сделать браузерное приложение, но при желании на нём можно написать и бэкенд.
Итак, в каких областях нашёл себя JavaScript.
Динамические веб-страницы
Всплывающие подсказки, движущиеся картинки, падающие снежинки и прочие анимашки — за всем этим можно идти к JS. JS-код встроен в веб-страницу, и когда пользователь открывает её, скрипт выполняется прямо в браузере.
Без JavaScript почти невозможно создать полноценный сайт. Добавьте к JS знания HTML, CSS, и вы получите неплохой набор навыков начинающего фронтенд-разработчика. Для полноты картины стоит освоить пару популярных фреймворков: например React, Svelte, Vue.js.
Веб-приложения и игры
JavaScript пригодится и здесь. Для примера, Google Maps и веб-клиент Gmail используют JavaScript. А если вы хотите написать игру — возьмите JS, HTML5, одну из готовых библиотек (скажем, EaselJS или PixiJS) и создайте свою браузерную бродилку, «три в ряд» или во что там сейчас все играют.
Расширения для браузера
Раз в основе JavaScript лежит выполнение кода в браузере, это отличный выбор для создания браузерных расширений. Напишите свой чекер почты или, например, счётчик активности, который будет отслеживать, сколько времени вы провели за работой, а сколько за просмотром соцсетей.
Серверные приложения
Да, на JavaScript спокойно можно написать веб-сервер. Но если в браузере у JS практически нет конкурентов, то в мире бэкенда ему приходится соревноваться с другими языками: PHP, Python и прочими. Главное преимущество JavaScript в этой битве — возможность разрабатывать клиентскую и серверную часть на одном и том же языке. Чтобы писать бэкенд на JavaScript, обычно используется движок Node.js — он позволяет выполнять JS-код вне браузера.
Мобильные приложения
Возможно, не самое популярное, но вполне реальное применение JavaScript. Чаще всего мобильные приложения разрабатываются на языках, специфичных для операционной системы (Swift для iOS и Java/Kotlin для Android). JavaScript же хорош тем, что позволяет создавать кроссплатформенные приложения — для этого можно использовать фреймворки React Native, Ionic или PhoneGap. Хотя и тут у JS есть конкуренты — например языки Kotlin и Dart.
Десктоп
JavaScript добрался и до настольных приложений. Так, GitHub соединил упомянутый выше Node.js, движок рендеринга Chromium и разработал фреймворк Electron, на котором можно писать кроссплатформенные десктопные проекты. Среди примеров — GitHub Desktop, Visual Studio Code, Skype, WordPress Desktop. У Electron есть аналог — NW.js, который в основном используется для создания настольных версий сайтов и игр.
Держите бесплатный видеокурс по JavaScript основам и связанным темам.
Руководство по JavaScript, часть 1: первая программа, особенности языка, стандарты
Недавно мы провели опрос, посвящённый целесообразности перевода этого руководства по JavaScript. Как оказалось, около 90% проголосовавших отнеслись к данной идее положительно. Поэтому сегодня публикуем первую часть перевода.
Это руководство, по замыслу автора, рассчитано на тех, кто уже немного знаком JavaScript и хочет привести свои знания в порядок а также узнать о языке что-то новое. Мы решили немного расширить аудиторию этого материала, включить в неё тех, кто совершенно ничего не знает о JS, и начать его с написания нескольких вариантов «Hello, world!».
Hello, world!
Программа, которую по традиции называют «Hello, world!», очень проста. Она выводит куда-либо фразу «Hello, world!», или другую подобную, средствами некоего языка.
JavaScript — это язык, программы на котором можно выполнять в разных средах. В нашем случае речь идёт о браузерах и о серверной платформе Node.js. Если до сих пор вы не написали ни строчки кода на JS и читаете этот текст в браузере, на настольном компьютере, это значит, что вы буквально в считанных секундах от своей первой JavaScript-программы.
Этот текст можно ввести с клавиатуры, можно скопировать и вставить его в консоль. Результат будет одним и тем же, но, если вы учитесь программировать, рекомендуется вводить тексты программ самостоятельно, а не копировать их.
Первая программа в консоли браузера — вывод сообщения в консоль
Ещё один вариант браузерного «Hello, world!» заключается в выводе окна с сообщением. Делается это так:
Вот результат выполнения этой программы.
Вывод сообщения в окне
Обратите внимание на то, что панель инструментов разработчика расположена теперь в нижней части экрана. Менять её расположение можно, воспользовавшись меню с тремя точками в её заголовке и выбирая соответствующую пиктограмму. Там же можно найти и кнопку для закрытия этой панели.
Инструменты разработчика, и, в том числе, консоль, имеются и в других браузерах. Консоль хороша тем, что она, когда вы пользуетесь браузером, всегда под рукой.
15 идей проектов на JavaScript для начинающих
Хочешь проверить свои знания по JS?
Подпишись на наш канал с тестами по JS в Telegram!
Самый быстрый способ стать хорошим веб-разработчиком — практиковаться. А работа над большим количеством разнообразных проектов — лучший вид практики.
Дело в том, что каждый отдельный проект представляет собой уникальную проблему и ее решение. Поэтому чем больше проектов вы создадите, тем больше знаний и опыта наберетесь.
В этот список идей я включил несколько своих любимых проектов для начинающих. Собственно, я сам все это строил, когда приступал к изучению JavaScript. Надеюсь, вам эти проекты принесут такую же пользу, как и мне.
Если, работая над проектом, вам случится застрять — не волнуйтесь: я включил в статью ссылки на соответствующие видеоуроки. В этих видео вы сможете просмотреть решение шаг за шагом.
Но все-таки сначала попытайтесь найти решение самостоятельно, без подсказок. Этот шаг очень важен в становлении разработчика. В программировании нет возможности как-то срезать путь и сразу стать хорошим специалистом. Не будете работать самостоятельно — ваши навыки не улучшатся, сколько бы видео вы ни просмотрели.
Если чувствуете, что информации навалилось слишком много, сделайте перерыв и отдохните. В отдыхе и перезагрузке нуждаются все, даже самые крутые специалисты. Помните, что даже тому разработчику, чьи видео вы смотрите на YouTube, потребовалось долго тренироваться, прежде чем он стал мастером в какой-то теме.
Я также добавлю во все разделы ссылки на готовые проекты. Все они хостятся бесплатно на GitHub Pages. Пройдя по ссылке, вы сможете посмотреть, как должен выглядеть проект, который вам предлагается сделать.
Закончив свой первый проект, вы тоже сможете разместить его на GitHub Pages. Это очень легко сделать, просто следуйте этой инструкции.
Наконец, со времени создания видеоуроков я вносил в проекты некоторые изменения, так что проект в последней версии может слегка отличаться от того, что вы увидите в видео. Последние версии проектов можно найти на GitHub.
1. Hex-цвета
Сделайте веб немножко красивее при помощи простого приложения. Это приложение меняет цвет фона и выводит на экран hex-коды использованных цветов.
Темы JavaScript, которые вы изучите:
Работая над этим проектом, я научился использовать onclick для привязки функции к кнопке. В данном случае функция генерирует рандомный hex-код и делает этот цвет фоновым.
Изучение этой темы было очень полезным, потому что буквально любое современное веб-приложение использует кнопки. Подозреваю, что изученную технику я буду применять снова и снова.
2. Случайные цитаты
Если вам не хватает мотивации, то вот хороший проект. Создайте простой генератор цитат, заряженный большим количеством мотивирующих высказываний.
Посмотреть в действии — Random Quotes.
Темы JavaScript, которые вы изучите:
Этот проект можно создать разными способами. Но мне было интересно узнать, как это решить с применением объекта — структуры данных, которой незаслуженно нечасто пользуются.
Работая над этим проектом, я также изучил простой алгоритм, отвечающий за генерацию случайной цитаты при клике на кнопку.
3. Карусель изображений
Хотите иметь приложение, которое будет показывать красивые картинки? Прекрасно, займитесь проектом № 3. Создайте приложение, которое позволит вам перемещаться по изображением, нажимая на кнопку. Такая штука называется каруселью изображений или слайдером.
Посмотреть, как это выглядит — Image Carousel.
Темы JavaScript, которые вы изучите:
Мне было интересно научиться создавать такого рода вещи. Сперва мы используем CSS, чтобы блокировать все изображения. Затем с помощью JavaScript меняем CSS-стили, высвобождая по картинке за раз.
До работы над этим проектом я не был уверен, возможно ли с помощью JS менять стили CSS напрямую, но оказалось, что возможно.
4. Электронные часы
Подумываете купить электронные часы? Лучше сделайте собственные!
Темы JavaScript, которые вы изучите:
Работая над этим проектом, я узнал, что при помощи JavaScript можно создать встроенный объект и получать из него время, используя встроенные функции. Это прекрасно, потому что позволяет не пользоваться дополнительными библиотеками.
Я также научился создавать функцию setTimeout. Она используется для постоянного вызова другой функции. В этом проекте она была необходима: обеспечивала правильное обновление времени.
5. Калькулятор
Список проектов для начинающих был бы неполным без калькулятора.
Попробовать в действии можно по ссылке — Calculator.
Темы JavaScript, которые вы изучите:
Я просто поверить не мог, насколько просто было создать такое приложение. Я-то думал, что придется каждое выражение прописывать вручную, создавая сложные функции. Но оказалось, что в JavaScript есть функция eval. которая все это делает за нас.
Мне очень понравилось работать над этим проектом. Я даже стили поменял, чтобы добавить что-то от себя.
6. Список покупок
Проголодались? Пора отправиться за покупками. И список не забудьте.
Готовое приложение для составления списка покупок можно посмотреть по ссылке — Grocery List.
Темы JavaScript, которые вы изучите:
Это приложение выглядит очень круто. А еще это первая программа в нашем списке, в которой используются слушатели событий.
Мы используем слушатель для добавления нового пункта в список покупок, когда пользователь нажимает на кнопку «Добавить», а также для вычеркивания элемента из списка при нажатии на него.
Мне было интересно узнать, как пишется функция, отвечающая за удаление всех элементов внутри div. В данном случае она удаляет все элементы из списка покупок.
7. Калькулятор чаевых
Больше не нужно переглядываться с друзьями, решая, кто заплатит чаевые: их можно разбросать на всех.
Попробовать в действии — Tip Calculator.
Темы JavaScript, которые вы изучите:
Создать функцию, которая будет высчитывать, сколько чаевых должен заплатить каждый, было довольно просто. Пожалуй, сложнее всего было использовать CSS для создания такого дизайна. Внешний вид приложения вроде бы простой, но воспроизвести его без туториала сложно.
8. Список задач
Давайте уделим какой-то день созданию «to-do»-приложения. (Без него тоже ни один список идей проектов для начинающих не обходится).
Попробовать в действии можно здесь — To-do List.
Темы JavaScript, которые вы изучите:
Решение для этого приложения было очень похожим на решение для списка покупок. Я постоянно заглядывал в тот код, когда писал этот. Но кое-что и отличалось: функция для смены цвета фона для каждого элемента в списке. Я подумал, что это будет отличным дополнением к проекту, поскольку делает его гораздо симпатичнее.
В целом, можно сказать, что это был проект-ревью, но все равно хорошая практика.
9. Флеш-карточки (с локальным хранилищем)
Это приложение позволяет создавать флеш-карточки. Написав его, вы сможете избавиться от старых картонных.
Посмотреть в действии — Flashcards.
Темы JavaScript, которые вы изучите:
Прежде всего, это приложение прекрасно выглядит. Кроме того, оно полезное: можно сэкономить на покупке бумажных карточек.
Это первый проект в нашем списке, где используется flexbox, так что мне, например, поначалу было сложно. Но когда я вник в эту тему, оказалось, что пользоваться flexbox довольно просто, а проект благодаря ему становится куда более динамичным.
В частности, мне особенно понравились опции align-item, flex-wrap и justify-content, поскольку благодаря им мои карточки стали отзывчивыми.
10. Клейкие заметки
Напишите приложение для создания клейких заметок. Да, бумажные можно выбросить.
Попробовать в деле — Sticky Notes.
Темы JavaScript, которые вы изучите:
Код этого проекта очень похож на код проекта с флеш-карточками, но это не беда, потому что наша цель — практиковаться. Конечно, если бы у меня не было того проекта, мне пришлось бы сверяться с видео, чтобы убедиться, что я правильно все делаю.
Но приложения в любом случае не совершенно одинаковые, так что над отличающимися частями пришлось хорошенько подумать.
Вообще, этот проект хорош еще и тем, что в нем комбинируются все навыки, приобретенные в предыдущих проектах.
11. Секундомер
Пощупать можно здесь — Timer.
Темы JavaScript, которые вы изучите:
Неожиданно оказалось, что создать простой секундомер куда сложнее, чем я рассчитывал. Можно подумать, что достаточно будет использовать функцию setInterval из проекта с электронными часами. Но оказалось, что этот подход попросту не работает в данном случае.
Для этого проекта мы создаем переменные, содержащие различную информации о времени. Например, когда был старт, когда стоп, насколько отсчет времени останавливался. Без этих переменных и вычислений с ними наш секундомер попросту не сможет показывать, сколько времени прошло.
12. Математика для детей
Классное приложение для обучения детей простым арифметическим операциям.
Посмотреть можно здесь — Math 4 kids.
Темы JavaScript, которые вы изучите:
На этом проекте я научился переключаться с одной веб-страницы на другую и проигрывать звуковой файл. Оказалось, что обе задачи довольно простые.
Труднее всего было разобраться, как рандомным образом размещать правильный ответ в разных боксах, чтобы каждый раз ответ оказывался в другом месте.
Я старался прийти к решению самостоятельно, но в конечном итоге посмотрел решение в туториале.
13. Unsplash API (генератор картинок)
Вам нужны картинки для вашего нового сайта? Давайте построим генератор картинок.
Посмотреть, как это работает, — Image Generator.
Темы JavaScript, которые вы изучите:
Работая над этим проектом, я научился делать API-запросы при помощи fetch.
Кстати, до этого я даже не подозревал о существовании Unsplash API. Мне было любопытно узнать, что многие солидные компании интегрируют этот API в свои сайты.
Также круто иметь под рукой генератор картинок — на случай, если возникнет желание сменить обои на рабочем столе.
14. Пишущая машинка
Это приложение выбирает случайную цитату из API и выводит ее на экран с эффектом набора на пишущей машинке.
Посмотреть, как это работает, можно по ссылке — Typewriter.
Темы JavaScript, которые вы изучите:
Научиться создавать скрипт для эффекта пишущей машинки было круто. Я видел такой эффект в видеоиграх. Теперь я могу использовать его при создании собственных.
Мне было интересно узнать, что для создания крутых анимаций не всегда нужен CSS. В этом проекте для создания эффекта пишущей машинки используется встроенная функция JavaScript.
15. Квадратные карточки (шаблон)
Стильный способ представить данные.
Посмотреть можно здесь — Square Cards.
Темы JavaScript, которые вы изучите:
Работая над этим проектом, я научился открывать YouTube-видео и статьи на сайтах напрямую из JavaScript. Это стало отличным дополнением к моему набору навыков веб-разработчика.
Перевод статьи «15 Beginner JavaScript Projects to Improve Your Front-End Skills!».
Зачем учить JavaScript и где он пригодится
Аспирант Нетологии Максим Пименов рассказывает про JavaScript — невероятно популярный язык программирования, который учит сайты реагировать на поведение посетителей.
JavaScript — это лучший друг HTML и CSS. HTML задает разметку сайта, CSS отвечает за внешний вид, а JavaScript все это оживляет. С помощью кода на JavaScript программист определяет, как страница отреагирует на действия пользователя.
Сейчас JavaScript — единственный язык программирования для браузеров. Он работает под Windows, macOS, Linux и на мобильных платформах, то есть везде. Если не знаешь JavaScript, делать в программировании интерактивных сайтов нечего.
В 2009 году появился Node. js, который вывел JavaScript за пределы браузеров. Теперь его можно запустить хоть на стиральной машине. О том, что такое Node. js и зачем он нужен, мы уже писали, поэтому не буду рассказывать о нем подробно.
Без JavaScript делать в программировании интерактивных сайтов нечего
Frontend-разработчик с нуля
Как работает JavaScript
Любое действие пользователя на странице порождает событие. Программирование на JavaScript — это обработка событий. Вот как выглядит обычный сценарий:
Пользователь что-то сделал на странице
↓
В браузере сработало событие
↓
Запустился JavaScript-код, который назначен на событие
↓
JavaScript изменил что-то на странице.
Программист пишет обработчик только для тех событий, на которые стоит реагировать:
Пользователь кликнул мышью
↓
Сработало событие onclick
↓
Запустилась функция changePhoto
↓
В галерее сменилось фото
Пользователь нажал клавишу
↓
Сработало событие onkeydown
↓
Программист не назначил обработчик события
↓
Ничего не произошло
JavaScript — это, прежде всего, реакция на события
Чем хорош JavaScript
JavaScript полностью интегрирован с HTML, он способен как угодно менять веб-страницу. В ответ на событие программист может:
Это только то, что сразу пришло в голову. JavaScript может намного больше, в пределах своей страницы он Бог.
JavaScript — подходящий язык для изучения программирования. Он достаточно прост, но содержит все фундаментальные вещи: алгоритмы, объектно-ориентированную модель, структуры данных. Если традиционные языки для обучения — Pascal и Basic — несут мало практической пользы, то JavaScript — рабочая лошадка.
Начинать с JavaScript хорошо и потому, что синтаксически он похож на великий и ужасный язык С. Изучив JavaScript, получишь базовое представление обо всех «сиобразных» языках: С++, C#, Java, PHP. Они задают тренд в своих областях и весьма популярны, поэтому для новичка важно познакомиться с синтаксисом С.
Программа на JavaScript — это простой текст. Писать на JavaScript можно в любом текстовом редакторе.
В пределах своей страницы JavaScript — Бог
Ограничения
Классический JavaScript — это язык программирования для интернета, он бессилен за пределами браузера. С помощью JavaScript нельзя запустить программу на компьютере или записать файл в нужную папку.
Из-за правил безопасности браузеры ограничивают мощь JavaScript и за пределами «родной» страницы. Управлять вкладками можно при определенных условиях или же вовсе нельзя. Например, JavaScript может закрыть только ту вкладку, которую создал сам.
Год-два назад появились платформы Node.js и React Native, с ними на JavaScript пишут не только для браузера, но и для компьютеров со смартфонами. Это модные и трендовые технологии, но глобально JavaScript — язык программирования для интернета.
На JavaScript пишут для интернета и браузеров
Конкуренты
Сейчас в веб-программировании нет ничего, что способно пошатнуть позиции JavaScript. Язык настолько удачен, что нет причин изобретать что-то другое.
С чистым JavaScript конкурируют только надстройки над ним: CoffeeScript, TypeScript, Dart. Код надстроек порой компактнее, его легче читать и отлавливать ошибки, но перед выполнением он все равно преобразуется в JavaScript.
Главная сила JavaScript — вечная молодость. Он вышел 21 год назад, но не устарел, а развивался и развивается вслед за HTML.
Серьезных конкурентов у JavaScript нет
Что изучать до JavaScript
Можно приступать к JavaScript, вообще не имея представления о программировании. JavaScript — удачный выбор для первого языка, особенно если связываешь будущее с веб-разработкой. При этом любые знания в сфере программирования будет плюсом.
Если есть опыт HTML и CSS, совсем хорошо. Создание сайта логично начать со статичных страниц на HTML и CSS, а потом оживить их при помощи JavaScript. Плюс HTML и CSS дают базовое понимание того, как устроен интернет и работают сайты.
JavaScript — подходящий первый язык, если связываешь будущее с веб-разработкой
Куда развиваться JavaScript-программисту
Изучив основы JavaScript, можно копать так глубоко, как хочется.
Хорошо освоить библиотеки и фреймворки для JavaScript — наборы готовых классов с функциями. Некоторые из них настолько мощные, что полностью меняют сценарии программирования. Для JavaScript самые популярные фреймворки и библиотеки — React, jQuery и Angular2.
Кроме фреймворков полезно изучить надстройки над JavaScript: CoffeeScript, TypeScript и Dart. Одни надстройки сделают ваш код чище и компактнее, другие — строже.
Наконец, можно взяться за серверное программирование и Node.js. Это трендовая технология, которую используют BMW, Amazon, Apple и другие серьезные компании. Так вы расширите область своих знаний JavaScript за пределы управления веб-страницей.
Для JavaScript-программиста нет потолка развития
Хотите написать колонку для Нетологии? Читайте наши условия публикации. Чтобы быть в курсе всех новостей и читать новые статьи, присоединяйтесь к Телеграм-каналу Нетологии
Краткая история JavaScript. Часть 1
Отдел фронтенд-разработки компании Лайв Тайпинг перевёл для читателей Хабра большой материал о зарождении, развитии и перспективах языка JavaScript, вышедший в блоге сервиса Auth0. Сегодня мы публикуем первую часть перевода. Соперничество Netscape и Mosaic, грёзы об интерактивном вебе, язык программирования для не-программистов, переход от классов к прототипам и что общего между JavaScript и ECMAScript (спойлер: всё).
JavaScript, вероятно, является одним из самых важных языков программирования на сегодняшний день. Благодаря развитию веба JavaScript достиг высот, которых ему не сулили. В этой статье мы рассмотрим весь путь JavaScript от создания до сегодняшних дней и постараемся заглянуть в его будущее.
Все началось в 90-е
События, в результате которых появился JavaScript, разворачивались в течение шести месяцев, с мая по декабрь 1995 года. Компания Netscape Communications уверенно прокладывала себе путь в области веб-технологий. Её браузер Netscape Communicator успешно отвоевывал позиции у NCSA Mosaic, первого популярного веб-браузера. Netscape была создана людьми, принимавшими участие в разработке Mosaic в ранние 90-е. Теперь, с деньгами и независимостью, у них было всё необходимое для поиска способов дальнейшего развития веб-технологий. Именно это послужило толчком для рождения JavaScript.
Основатель Netscape Communications и бывший участник команды Mosaic Марк Андриссен считал, что веб должен стать более динамичным. Анимации, взаимодействие с пользователями и другие виды интерактивности должны стать неотъемлемой частью интернета будущего. Веб нуждался в лёгком скриптовом языке (или языке сценариев — прим.ред.), способном работать с DOM, который в те дни не был стандартизирован. Существовало одно «но», являвшееся на тот момент серьёзным вызовом: этот язык не должен был предназначаться для крупных разработчиков и прочих людей, имевших отношение к инженерной стороне вопроса. Java в те дни уже активно развивалась и твёрдо заняла эту нишу. Таким образом, новый скриптовый язык должен был предназначаться для совершенно иной аудитории — дизайнеров. Очевидно, что веб был статичным, а HTML был достаточно молод и прост в освоении даже для тех, кто не имел ничего общего с программированием. Следовательно, всё, что должно было стать частью браузера и сделать веб более динамичным, должно быть максимально понятным для далёких от программирования людей. Из этого предположения родилась идея Mocha, который должен был стать тем самым простым, динамичным и доступным скриптовым языком.
И тут в нашей истории появляется Брендан Айк, отец JavaScript. Айк должен был разработать для Netscape «Scheme для браузера». Scheme — это динамичный, мощный и функциональный диалект языка программирования Lisp с максимально упрощённым синтаксисом. Вебу требовалось что-то подобное: простое в освоении, динамичное, немногословное и мощное. Айк не стал упускать шанса поработать над тем, что ему нравилось, и присоединился к команде.
Перед командой была поставлена задача подготовить работающий прототип в кратчайшие сроки. Sun Microsystems заканчивала работу над своим языком программирования Java, на тот момент называвшимся Oak, и Netscape Communications была уже готова заключить с компанией контракт, чтобы сделать Java доступным в своем браузере. Так зачем же понадобился Mocha (первое название JavaScript)? Зачем нужно было создавать абсолютно новый язык программирования при наличии готовой альтернативы? Дело в том, что Java не был предназначен для той аудитории, на которую ориентировался Mocha — скриптеры, любители, дизайнеры. Java был слишком большим и навороченным для того, чтобы выполнять эту роль. Основная идея заключалась в том, что Java должен был предназначаться для крупных разработчиков и профессиональных программистов, в то время, как Mocha должен был использоваться для небольших скриптовых задач. Другими словами, Mocha должен был стать скриптовым компаньоном для Java по принципу, аналогичному тому, как взаимодействуют C/C++ и Visual Basic на платформе Windows.
Инженеры Netscape приступили к детальному изучению Java. Они даже начали разрабатывать собственную виртуальную машину Java, однако проект быстро свернули, так как она не могла достичь идеальной совместимости с виртуальной машиной Sun Microsystems.
Проблема скорейшего выбора языка стояла как никогда остро. Возможными кандидатами были Python, Tcl и Scheme. Айк должен был действовать быстро. По сравнению с конкурентами у него были два преимущества: свобода в определении набора необходимых возможностей и прямая связь с заказчиком. К несчастью, имело место и очевидное неудобство: для принятия огромного количества важных решений времени практически не было. JavaScript, a.k.a. Mocha, был рождён именно в таких условиях. В течение нескольких недель был подготовлен рабочий прототип, который затем был интегрирован в Netscape Communicator.
То, что должно было стать аналогом Scheme для браузера, вылилось в нечто совершенно иное. Рукой Айка управляли необходимость закрыть сделку с Sun и сделать Mocha скриптовым компаньоном для Java. Синтаксис должен был быть максимально близким Java. Помимо этого, от Java была унаследована семантика для большого количества устоявшихся идиом. Таким образом, Mocha был совсем не похож на Scheme. Он выглядел, как динамический Java, под оболочкой которого скрывался гибрид Scheme и Self.
Прототип Mocha был интегрирован в Netscape Communicator в мае 1995 года. Через очень короткий промежуток времени он был переименован в LiveScript, так как в тот момент слово live выглядело очень привлекательным с точки зрения маркетологов. В декабре 1995 года сделка между Netscape Communications и Sun была закрыта: Mocha/LiveScript был переименован в JavaScript и преподносился в качестве скриптового языка для выполнения небольших клиентских задач в браузере, в то время, как Java был полноценным профессиональным языком программирования для разработки сложных веб-компонентов.
Первая версия JavaScript заложила все те фундаментальные особенности, которыми этот язык знаменит и поныне. В частности, его объектная модель и функциональные особенности уже присутствовали в первой версии.
Трудно сказать, как развивались бы события, если бы Айк не успел предоставить рабочий прототип вовремя. Python, Tcl, Scheme, рассматривавшиеся в качестве альтернативы, были совершенно не похожи на Java. Sun было бы трудно принять в качестве языка-компаньона для Java варианты, в корне отличавшиеся от него. С другой стороны, Java долгое время был важной частью веба. Если бы Sun не являлись определяющим фактором, у Netscape было бы намного больше свободы в выборе языка. Но стала бы Netscape разрабатывать собственный язык или воспользовалась одним из существующих? Этого мы никогда не узнаем.
Различные реализации
Когда Sun и Netscape закрыли сделку, и Mocha/LiveScript был переименован в JavaScript, встал ребром очень важный вопрос: что будет с конкурентами? Хоть Netscape и набирал популярность, становясь самым используемым браузером, Microsoft занималась активной разработкой Internet Explorer. С самых первых дней JavaScript показал настолько удивительные возможности в плане взаимодействия с пользователем, что соперничающим браузерам не оставалось ничего иного, кроме как в кратчайшие сроки найти готовые решения, представлявшие собой рабочие реализации JavaScript. В тот момент (и ещё достаточно долго после этого) веб-стандарты оставались достаточно слабыми. Поэтому Microsoft разработала свою реализацию JavaScript, назвав ее JScript. Убрав из названия слово Java, они смогли избежать возможных проблем с владельцами торговой марки. Однако, JScript отличался не только названием. Небольшие различия в реализации — в частности, подход к некоторым DOM функциям — оставили рябь, которая будет ощущаться ещё долгие годы. Бои за JavaScript шли на гораздо большем количестве фронтов, чем названия и таймлайны, и многие причуды этого языка появились благодаря им. Первая версия JScript появилась в Internet Explorer 3.0, увидевшем свет в августе 1996 года.
Реализация JavaScript получила свое собственное название и в Netscape. Версия, выпущенная вместе с Netscape Navigator 2.0, была известна, как Mocha. Осенью 1996 года Айк переписал бóльшую часть Mocha, чтобы разобраться с техническими огрехами и недоработками, возникшими, как следствие спешки при разработке. Новая версия была названа SpiderMonkey. Это название используется по сей день в JavaScript-движке браузера Firefox, внука Netscape Navigator.
В течение нескольких лет JScript и SpiderMonkey были единственными движками JavaScript. Особенности обоих движков, не всегда совместимые, определили вектор развития веба на ближайшие годы.
Основные особенности архитектуры
Несмотря на то, что JavaScript был рождён в спешке, некоторые мощные особенности были заложены в нём с самого начала. Эти особенности определяли JavaScript как язык и позволили ему перерасти собственные границы, несмотря на все его причуды.
«Решение использовать готовый язык вместо изобретения своего никаким образом не зависело от меня. Установка, поступившая с самых верхов, звучала так: “Язык должен выглядеть как Java”. Это сразу отбросило Perl, Python и Tcl вместе со Scheme. Позже, в 1996 году, к нам зашёл Джон Оустерхаут, чтобы показать Tk и посокрушаться по поводу упущенной возможности для Tcl. Я не горжусь, но я счастлив, что я выбрал в качестве основных ингредиентов функции первого класса по подобию Scheme и прототипное программирование Self. Влияние Java, особенно баги с датами в 2000 году и чувствительность к регистру, стало досадным недоразумением.» — Brendan Eich’s blog: Popularity
Хотя создание синтаксиса, максимально близкого к Java, не было основной идеей JavaScript, рынок внёс свои коррективы. Возможно, для решения определённых задач больше подошёл бы другой синтаксис, однако благодаря использованию всем знакомого синтаксиса JavaScript с лёгкостью набрал популярность.
Сравните этот пример, написанный на Java:
с этим примером, написанным на JavaScript:
Функции как объекты
Функции в JavaScript — это просто ещё один тип объекта. Ими можно оперировать, как и любыми другими элементами. Их можно привязывать к переменным и, в более поздних версиях JavaScript, даже выбрасывать как исключения. Вероятней всего, что этой особенностью JavaScript обязан Scheme.
Благодаря тому, что функции рассматриваются как объекты, стали возможными различные функциональные паттерны:
Эти паттерны с успехом используются во множестве библиотек, таких, как underscore и immutable.js.
Прототипное программирование
Хотя прототипное программирование стало популярным благодаря JavaScript, впервые оно была представлено в Self. Айк отдавал предпочтение именно этому стилю программирования, оказавшемуся достаточно мощным, чтобы смоделировать более традиционный подход Simula-подобных языков, таких, как Java или C++. По большому счету, классы, реализованные в современной версии JavaScript, не что иное, как синтаксический сахар, которым посыпана прототипная система.
Создатели Self, языка программирования, вдохновившего Айка на введение прототипов в JavaScript, пытались избежать проблем, связанных с объектами в Simula-подобных языках. В частности, ветвление между классами и экземплярами стало причиной многих проблем, присущих Simula-подобным языкам. Неоднократно обсуждалась проблема, возникавшая, когда код программы развивался и становился больше: так как классы являлись архетипом для всех новых объектов, с ростом кода становилось всё сложнее адаптировать базовые классы под новые требования, возникавшие в процессе. Подобной проблемы можно избежать, делая новые экземпляры прототипов, из которых, в свою очередь, создавались бы новые объекты. Это и есть основная концепция прототипов: образец, которому можно задать его собственные параметры. Если прототип не подходил для нового объекта, его можно было клонировать и модифицировать, не оказывая никакого влияния на другие дочерние экземпляры. В языках, основанных на классах, осуществить такой подход крайне сложно.
Благодаря силе прототипов JavaScript получился на редкость гибким. На волне вдохновения разработчики создали огромное количество библиотек со своими собственными объектными моделями. Популярная библиотека Stampit выжимает из прототипной системы всё возможное для того, чтобы манипулировать объектами так, как это невозможно в традиционных языках, базирующихся на классах.
Прототипы сделали JavaScript обманчиво простым, дав разработчикам библиотек огромную силу.
Большая причуда: примитивы и объекты
Пожалуй, одной из самых больших ошибок, допущенных из-за спешки, в которой разрабатывался JavaScript, стало то, что объекты, ведущие себя совершенно идентично, могут быть различных типов. Например, тип строки (Hello world) не совпадает с типом нового объекта String (new String(‘Hello world’)). Это порой приводит к нежелательным последствиям, которые могут сбить с толку.
Но это было только началом в истории JavaScript. Поспешная разработка стала причиной большого количества архитектурных ошибок, которые могли стать настоящим кошмаром. Однако сроки поджимали, и всё пришлось оставить как есть.
«Всё остальное — это извращенная, безжалостная история. JavaScript стал самой популярной клиентской реализацией Java, с которой мог соперничать только Flash, поддерживавший ActionScript — прямого потомка JavaScript.» — Brendan Eich’s blog: Popularity
По волнам моей памяти: взгляд на Netscape Navigator 2.0 и 3.0
Первая публичная версия JavaScript была встроена в Netscape Navigator 2.0, выпущенный в 1995 году. Благодаря чудесам виртуализации и устаревшим и неподдерживаемым сайтам мы можем заново пережить эти моменты счастья.
К сожалению, многие базовые функции JavaScript в то время не работали. Анонимные функции и цепочки прототипов, две самые мощные особенности, не работали так, как они работают сегодня. Тем не менее, эти особенности на тот момент уже были спроектированы и должны были воплотиться в жизнь в ближайшие годы. Следует заметить, что данная версия интерпретатора JavaScript считалась альфа-версией.
К огромной радости, годом позже был выпущен Netscape Navigator 3.0, и он очень сильно отличался от своего предшественника:
Обратите внимание, сообщение об ошибке даёт гораздо больше информации о происходящем. Это, в свою очередь, позволяет нам понять, что интерпретатор воспринимает свойство прототипа по-своему. Мы подменяем объект базовым экземпляром Object, слегка модифицируем его, и — вуаля — всё работает! По крайней мере, частично. Судя по всему, присвоение внутри тестовой функции не делает ровным счётом ничего. Вполне очевидно, что впереди будет ещё много работы, и тем не менее, JavaScript в текущем состоянии вполне мог использоваться для большинства задач, и его популярность продолжала расти.
Такие возможности как регулярные выражения, JSON и исключения были ещё недоступны. В последующие годы развитие JavaScript происходило невероятно быстро.
ECMAScript: стандартизированный JavaScript
Первой большой переменой для JavaScript после его выпуска стала стандартизация ECMA. ECMA — ассоциация, созданная в 1961 году с целью стандартизации информационных и коммуникационных систем.
Работа над стандартизацией JavaScript началась в ноябре 1996 года. Стандарту, над которым работала группа TC-39, был присвоен идентификационный номер ECMA-262. К тому моменту JavaScript активно использовался на многих веб-страницах. В этом пресс-релизе 1996 года указано количество в 300000 страниц, использующих JavaScript.
JavaScript и Java лежат в основе Netscape ONE — платформы для разработки интернет- и интранет-приложений. В течение короткого времени с момента своего внедрения в прошлом году новые языки получили признание среди разработчиков, благодаря чему на данный момент существует более 175000 Java-апплетов и более 300000 страниц, использующих JavaScript по всему интернету, согласно www.hotbot.com. — Netscape Press Release
Стандартизация стала для молодого языка не только важным шагом, но и серьезным вызовом. Она открыла JavaScript для большей аудитории и дала возможность сторонним разработчикам принимать участие в развитии языка. Она также помогла держать других разработчиков в рамках. В те времена бытовало опасение, что Microsoft или кто-либо ещё могут слишком сильно отклониться от оригинальной реализации языка, что могло привести к фрагментации.
Из-за проблем с торговой маркой ECMA не могла использовать JavaScript в качестве названия. После непродолжительных дебатов было решено, что описанный стандартом язык программирования будет назван ECMAScript. На сегодняшний день JavaScript это всего лишь коммерческое название ECMAScript.