JavaScript: Вот что вам нужно для “глубокого изучения JavaScript”
JavaScript: Вот что вам нужно для “глубокого изучения JavaScript”
Если бы вы спросили разработчика в начале 2000-х годов, какой язык программирования будет самым важным для веб-разработки, то последнее, что бы он сказал, это JavaScript. Flash, PHP и Java были сильными претендентами на доминирование. Они могли бы сказать, что JavaScript – это легкий язык, игрушечный язык для создания маленьких глупых эффектов браузера и (в лучшем случае) базовой проверки данных формы.
Но сегодня JavaScript, возможно, является самым важным языком веб-разработки. Несмотря на то, что большинство серверных разработок ведется на одном из более “традиционных” языков программирования, практически каждый сайт использует JavaScript для “внешней” функциональности. Более того, развитие самого языка и стандартизация технологии браузеров привели к появлению внутрибраузерных веб-приложений, почти полностью работающих на JavaScript. JavaScript-фреймворки подтолкнули эту тенденцию к развитию.
Кроме того, JavaScript больше не является просто языком для фронтенда. Благодаря проекту Node.js теперь можно легко использовать JavaScript и для создания приложений на стороне сервера. А с развитием таких технологий, как MongoDB, использующих JSON в качестве языка сериализации данных, появилась возможность использовать JavaScript для всего веб-приложения – от хранения данных, обработки на стороне сервера до внешнего пользовательского интерфейса.
Какие бы языки программирования вы ни использовали и какие бы языки ни хотели изучить, становится все более очевидным, что JavaScript – это непременное условие современной веб-разработки. Пришло время всем нам “глубоко изучить JavaScript”.
О языке
История
JavaScript был первоначально разработан в компании Netscape для использования в их браузере Netscape Navigator. Это было в середине 1990-х годов, во время разгара войны браузеров, когда каждый разработчик браузера пытался завоевать долю рынка путем создания уникальных функций, недоступных в других браузерах. В тот период также существовало мнение, что браузеры во многом станут продолжением операционной системы и общего пользовательского опыта. Похоже, существовала идея, что браузер Netscape будет частью распределенной операционной системы, работающей под управлением портативной версии среды Java. Она будет дополнена легким языком сценариев, который официально назывался LiveScript и разрабатывался под кодовым именем Mocha.
Неясно, был ли это план или простая маркетинговая уловка, но этот “легкий интерпретируемый язык” в итоге получил название “JavaScript”, хотя на самом деле язык не имел никакой связи с Java.
JavaScript был добавлен в браузер Netscape Navigator в 1996 году, и компания Microsoft быстро разработала реализацию JavaScript для своего браузера Internet Explorer, которую она назвала JScript. К сожалению, эти реализации были совершенно разными. Различные подходы к HTML и тому, что стало CSS, еще больше усложнили ситуацию, поскольку JavaScript существует в основном для манипулирования объектами внутри документа – различные модели документов давали разные результаты. В этот период часто встречались сайты, на которых пользователей информировали, что сайт “Лучше всего работает на Netscape” или “Лучше всего работает на Internet Explorer”. (У компании AOL, которая в конечном итоге купила Netscape, также был встроенный браузер. Но на нем ничего не работало лучше всего.)
Netscape представил JavaScript в Ecma как потенциальный международный, общеотраслевой стандарт. В 1997 году была выпущена стандартная версия, названная “ECMAScript”. С тех пор было выпущено несколько последующих версий. Ecma, а не Netscape, теперь определяет направление развития языка.
Благодаря общей тенденции к стандартизации браузеров, которая началась в начале 2000-х годов и в основном завершилась к середине 2010-х, большинство браузеров реализуют ECMAScript (и объектную модель документа HTML) во многом схожим образом. Сегодня вы можете быть уверены, что приложение на JavaScript, написанное в соответствии с общепризнанной передовой практикой, будет работать во всех основных браузерах.
Особенности языка
Объектная ориентация
JavaScript является объектно-ориентированным. Правда, в этом смысле он немного странный: в нем есть объекты, но нет классов. Поэтому многие “классические” объектно-ориентированные программисты часто считают его несколько неполноценным, или сказали бы, что он вообще не является объектно-ориентированным. Но это так.
Почти все (за исключением некоторых примитивных значений) в JavaScript является объектом, и поэтому может иметь методы и доступные данные. Однако объекты не создаются из классов. Они клонируются из других объектов. Вместо того чтобы писать класс, можно просто создать прототип объекта. Затем из него клонируются новые объекты, а к новым объектам можно добавлять новые методы и свойства по мере необходимости.
У этого подхода есть свои преимущества и недостатки. Одно (возможное) преимущество заключается в том, что если вам нужен только один экземпляр объекта, вам не придется писать целый класс и затем писать код, который его инстанцирует. Учитывая основную область применения JavaScripts (веб-документы), это имеет большой смысл.
Основной недостаток в основном носит философский характер. В сложном приложении, несомненно, возникнет ситуация, когда вы напишете несколько прототипов объектов, которые будут использоваться, но только клонироваться в новые объекты – по сути, воссоздавая парадигму, основанную на классах. За исключением того, что исходные объекты все еще существуют как объекты. Между ними нет существенной разницы, даже если они используются принципиально разными способами. Дихотомия класс-объект представляет собой особый (“классический”, даже) взгляд на реальность – абстрактные идеи о категориях и типах вещей, которые воплощаются в реальные объекты. JavaScript представляет более беспорядочный (но, вероятно, более реалистичный) взгляд на реальность, в котором нет никаких абстрактных, платоновских понятий; есть только этот объект, и этот, и этот, и этот, и так далее.
Структура
JavaScript, как и большинство современных языков программирования, следует модели структурированного программирования. Синтаксис в некоторой степени похож на язык C, с if, else, for и while, которые ведут себя так, как можно ожидать.
В отличие от C, JavaScript в основном поддерживает только область видимости переменных на уровне функций. Область видимости на уровне блока была добавлена несколько недавно, но (на момент написания этой статьи) все еще гораздо безопаснее кодировать так, как если бы ее не было.
Кстати, о переменных: переменные в JavaScript динамически типизированы. Это означает, что вам не нужно объявлять переменную и ее тип данных (строка, число и т.д.) перед тем, как присвоить переменной значение. Это сильно отличается от языка C, но довольно распространено среди других интерпретируемых языков сценариев.
Функции в JavaScript являются первоклассными, что означает, что их можно передавать в качестве аргументов другим функциям или хранить как переменные. Это позволяет (помимо прочего) определять функции внутри других функций. Это часто используется в браузерных приложениях, чтобы вызвать определение функций в определенных точках. Например, в следующем коде jQuery внутренняя функция настраивает свойство target всех ссылок на странице таким образом, чтобы они открывались в новой вкладке, если ссылаются на другой домен. Эта функция создается внутри функции, которая вызывается только тогда, когда документ готов (полностью загружен). Это незначительный пример (который случайно используется на этом сайте), но он иллюстрирует то, что часто делается в JavaScript.
Цикл событий
JavaScript опирается на цикл событий, который прослушивает сообщения (такие как щелчки мыши, нажатия клавиш или сообщения, созданные другим объектом) и ставит их в очередь на обработку. Можно создавать функции, которые прослушивают определенные сообщения, а затем запускаются при наступлении этих событий (как в примере выше, где внутренняя функция запускается при наступлении события готовности документа).
Такая событийно-ориентированная архитектура идеально подходит для первоначальной (и до сих пор основной) цели JavaScript – взаимодействия сайта с пользователем. Она позволяет приложению слушать созданные пользователем вводные данные без подсказки. Совсем недавно эта особенность была использована в серверных средах, таких как Node.js. Наличие встроенной системы прослушивания событий позволяет (относительно) легко создавать приложения реального времени в таких областях, как чат, игры, совместная работа и диспетчеризация.
События JavaScript
JavaScript предоставляет способ взаимодействия с содержимым веб-страницы и манипулирования им. Это может быть сделано с помощью кода, хранящегося в связанном файле .js, в блоке кода на странице или путем доступа к триггерам событий JavaScript в элементах документа.
Событие – это сигнал или сообщение о том, что что-то произошло. Например, каждый раз, когда ваша мышь щелкает по элементу страницы, срабатывает событие onclick для этого элемента. В обычных условиях это событие не вызывает никаких других событий. Но вы можете использовать эти события для запуска другого кода. Вы можете написать код, который говорит (по сути): Каждый раз, когда происходит это событие, выполняйте другое.
Вы можете представить себе возможности:
- Каждый раз, когда щелкают по этой картинке… загружать следующую картинку.
- Каждый раз, когда мышь попадает в эту область… измените цвет.
- Каждый раз, когда мышь приближается к навигационной панели… открывайте модальное окно со специальным предложением.
JavaScript, будучи языком, предназначенным для взаимодействия с пользователем, является “событийно-ориентированным”. В JavaScript существует множество событий, и многие из них привязаны к элементам HTML.
События как атрибуты HTML
Все элементы HTML на веб-странице имеют набор встроенных событий, которые срабатывают при определенных обстоятельствах. Вы можете получить доступ к этим событиям, как если бы они были атрибутами элемента:
#flamingo-picture-1 border: 15px solid red; >
Если вы делаете гораздо больше, чем одну единственную строку, то попытка сохранить все это в атрибуте onclick может оказаться слишком сложной. В этом случае вы можете просто вызвать функцию из события.
#flamingo-picture-2 border-width: 15px; border-style: solid; border-color: red; >
function changeBorderColor() var img = document.getElementById(‘flamingo-picture-2’); if (img.style.borderColor === ‘red’) img.style.borderColor = ‘blue’; > else img.style.borderColor = ‘red’; > >
Список событий JavaScript для элементов HTML
Большинство названий описывают, когда именно они срабатывают. Некоторые из них применимы только к некоторым типам элементов. Примеры кода и демонстрации см. в разделе Элементы JavaScript.
onclick Когда пользователь щелкает по элементу. (Кнопка мыши нажимается и отпускается немедленно.) oncontextmenu Когда открывается контекстное меню (“правый клик”) (или когда пользователь пытается открыть его – это можно использовать для отключения контекстного меню). ondblclick Когда элемент дважды щелкается. onmousedown Когда пользователь нажимает кнопку мыши вниз, находясь внутри (или над) элементом. (Кнопка мыши нажимается и удерживается.) onmouseenter Когда мышь входит в элемент. (Иногда называется “hover”, но это не название события). onmouseleave Когда мышь покидает элемент. onmousemove Когда мышь перемещается внутри элемента. onmouseover Когда мышь входит в элемент или один из его дочерних элементов. onmouseout Когда мышь выходит из элемента или одного из его дочерних элементов. onmouseup Когда пользователь отпускает кнопку мыши, находясь внутри элемента. onerror Когда возникает ошибка при загрузке внешнего файла (чаще всего используется для медиафайлов). onload Когда элементы завершают загрузку (чаще всего используется для медиафайлов, но может использоваться и для ). onscroll Когда содержимое прокручивается.
Примечания по программированию
Объектная модель документа
HTML используется для содержимого вашей страницы. CSS управляет тем, как все выглядит. Как вы используете JavaScript для управления тем, что находится на экране и как это выглядит? Можно ли использовать JavaScript для работы с HTML напрямую?
Ответ – DOM, или объектная модель документа. И нет, вы не манипулируете HTML напрямую. Вы манипулируете DOM.
DOM – это собственное представление браузера о веб-странице, основанное на HTML и CSS. Но DOM не является документом, это текущее, живое состояние страницы, как она отображается в браузере в данный момент. Это означает, что DOM знает такие вещи, как размер элемента, положение и громкость воспроизведения, на какой элемент нажимают или наводят курсор. Кроме того, DOM обновляется по мере манипуляций с ним. Поэтому, если вы изменяете содержимое элемента, это изменение происходит в DOM и отражается в представлении (окне браузера).
JavaScript – это J в Ajax, который первоначально расшифровывался как Asynchronous JavaScript and XML. (XML, или расширенный язык разметки, – это формат сериализации данных. Сейчас он в основном заменен JSON – JavaScript Object Notation – но название осталось, потому что “Ajax” звучит броско).
Ajax – это то, что вы, вероятно, используете каждый день. Это шаблон приложения, в котором данные отправляются на сервер или извлекаются с него без обновления веб-страницы. (Запросы и ответы не синхронизируются с обновлением браузера или изменением URL). Именно так работают многие веб-приложения, например, Gmail. JS-приложение на стороне клиента (браузера) отправляет запросы на сервер и получает все необходимые данные или содержимое в виде объекта JSON (или XML-документа), а затем использует эти данные для обновления представления.
jQuery, неофициальная стандартная библиотека
Большинство языков программирования имеют стандартную библиотеку – набор классов и/или функций, которые помогают программистам выполнять общие, низкоуровневые задачи программирования. Как правило, эти стандартные библиотеки поставляются в комплекте с языком и документируются вместе с ним.
По ряду исторических причин JavaScript не имеет стандартной библиотеки. Это означает, что в “чистой” реализации JavaScript многие очень распространенные задачи излишне многословны и сложны.
JQuery – это одна из нескольких библиотек JavaScript, которые предоставляют широкий спектр базовых функций, облегчая выполнение таких распространенных задач программирования, как обход DOM, манипулирование объектами HTML и их свойствами, взаимодействие с сервером и взаимодействие с браузером.
Библиотека jQuery чрезвычайно распространена, настолько, что многие считают ее де-факто стандартной библиотекой для JavaScript. Понимание jQuery – важный навык для любого веб-разработчика.
Не все довольны тем, что jQuery считается стандартной библиотекой, и ряд разработчиков и команд пытались создать альтернативу. Некоторые из них перспективны, некоторые получили распространение в определенных сообществах, но ни одна из них и близко не подошла к доле рынка jQuery.
Ресурсы
Изучение JavaScript
Учебники и онлайн-курсы
Онлайн-курс Стэнфорда – это, вероятно, лучший вариант, если вы всерьез намерены стать разработчиком. Он охватывает серьезную информатику и методы программирования с использованием JavaScript.
Каждый день в Интернете появляется все больше и больше учебников по JavaScript. Почти все они охватывают довольно схожие темы, и ни один из них не готовит вас к тому, чтобы стать настоящим разработчиком JavaScript.
Не попадайте в ловушку, переходя от учебника к учебнику, думая, что следующий будет тем, который поможет вам окончательно “выучить JavaScript”. Как только вы поймете основные принципы и синтаксис, вам следует углубиться в материалы, написанные для разработчиков, такие как документация JavaScript, руководства для разработчиков наиболее популярных фреймворков, а также учебники по продвинутым техникам и методологиям.
Документация по JavaScript и ссылки в Интернете
Книги
Если вы только начинаете, вы, вероятно, не захотите изучать JavaScript по книгам. Один из приведенных выше онлайн-учебников поможет вам двигаться в правильном направлении. Но как только вы освоите основы и захотите перейти к промежуточным и продвинутым методам программирования, вам стоит обратиться к некоторым из этих книг.
-
Дуглас Крокер, которого многие считают самым важным автором и пропагандистом JavaScript. , автор Marijn Haverbeke. Эта книга, которую также можно бесплатно найти в Интернете, является одной из самых читаемых и уважаемых книг по разработке на JavaScript. , автор Addy Osmani – еще одна отличная книга, которую также можно бесплатно читать онлайн.
Веб-сайты, блоги и люди
Как только вы начали чувствовать себя комфортно в разработке JavaScript, важно снова почувствовать дискомфорт, открыв себя для неструктурированных разговоров о языке и его широкой экосистеме. Слежение за новыми разработками, последними релизами и передовыми практиками превратит вас из JavaScript-кодера в JavaScript-эксперта.
Инструменты JavaScript
Существует огромное количество библиотек и наборов инструментов для работы с JS, и каждый день появляются новые.
Если вам важнее полнота, чем актуальность, обратите внимание на этот каталог библиотек JavaScript, созданный сообществом.
Библиотеки
Общие библиотеки – обобщенные наборы инструментов, ускоряющие разработку. Многие из них по сути несовместимы друг с другом, предоставляя конкурирующие способы выполнения аналогичных задач.
- – Как упоминалось выше, это самая распространенная библиотека JS. Многие другие системы, наборы инструментов и фреймворки полагаются на нее.
-
Midori
- – Невероятно популярный front-end фреймворк Twitter позволяет относительно легко создавать пользовательские интерфейсы приложений на основе форм. – UI-фреймворк, несколько схожий по охвату (хотя и сильно отличающийся по реализации) с Twitter Bootstrap. JQuery Mobile оптимизирован для небольшого экрана и разработан для эмуляции внешнего вида и ощущения мобильного приложения. – Библиотека виджетов пользовательского интерфейса. – Определяет способность браузера реализовать современные (HTML5 и CSS3) функции пользовательского интерфейса и использует JavaScript, чтобы заполнить пробел или обеспечить изящный откат.
-
Фреймворки
– Пожалуй, самая важная основа для разработки JS. Предоставляет архитектуру Model-View-Controller и довольно своеобразный подход к быстрой разработке. Разработан компанией Google. – Основной конкурент Backbone. Самое большое различие в том, что Backbone гораздо менее категоричен. Кроме того, Backbone изначально был абстрагирован от приложения Ruby on Rails, поэтому есть некоторые удобства в использовании этих двух фреймворков вместе. – Библиотека приложений реального времени, которая включает в себя библиотеку на стороне клиента и компонент node.js на стороне сервера.
-
Продвинутые инструменты
Это список относительно продвинутых инструментов, которые значительно расширяют возможности JavaScript или кардинально меняют то, как JavaScript используется разработчиком.
– Это набор инструментов JS, созданных разработчиками Google и для них. Фундаментальное ядро Closure – это компилятор, который компилирует “из JavaScript в лучший JavaScript”. – Еще один инструмент от Google. Caja компилирует сторонние JS (а также HTML и CSS) для безопасного встраивания на сайт. – CoffeeScript – это язык, который компилируется в JavaScript, позволяя разработчикам писать более простой и менее многословный код. – Объектно-ориентированный язык, основанный на классах и компилируемый в JS. – Сжимает, улучшает, автоиндентирует, удаляет пробелы, переименовывает переменные и выполняет другие манипуляции с кодом. – “мета-круговой интерпретатор JavaScript”. Среди прочих применений, этот и подобные инструменты используются для создания компиляторов JavaScript. – “расширение контекстно-ориентированного языка программирования для JavaScript”. – низкоуровневое подмножество JavaScript. Это спецификация для использования в качестве целевого языка другими компиляторами JS.
-
См. также этот очень длинный список инструментов компиляции JavaScript. (Знаете ли вы, что почти каждый распространенный язык можно скомпилировать в JavaScript? Невероятно…)
Заключение
HTML – это язык веб-контента, но JavaScript – это язык веб-функциональности. Это самый важный язык для веб-разработки и один из самых быстроразвивающихся языков с точки зрения практики, инструментария и экосистемы. Это невероятно интересный язык, который можно использовать прямо сейчас.
Кроме того, его довольно легко освоить. Все, что вам нужно для начала работы, уже находится на вашем компьютере – ваш браузер является средой выполнения, и вы можете сразу же увидеть первые результаты. Нет недостатка в учебниках и онлайн-курсах, которые помогут вам в изучении, а также в квалифицированных разработчиках, хорошо знающих этот язык. Если вы хотите сделать карьеру в области веб-разработки, вам необходимо начать изучать JavaScript.