Самоучитель языка JavaScript
JavaScript — это язык программирования, который активно используется в HTML и при разработке сайтов.
Программы на языке JavaScript обычно называют сценариями. Они вставляются напрямую в HTML код веб-страницы и выполняются браузером пользователя. Сценарии JavaScript позволяют придать веб-странице динамичность и сделать ее интерактивной.
Зачем нужно изучать JavaScript?
JavaScript это один из 3 языков программирования, которые должен знать каждый, кто занимается веб-разработкой:
- HTML — определяет содержимое веб-страницы
- CSS — определяет стили отображения содержимого веб-страницы
- JavaScript — программирует поведение веб-страницы
При этом область применения JavaScript не ограничивается веб-приложениями. Многие десктопные и серверные программы также используют JavaScript. Например, программная платформа Node.js, базы данных MongoDB и CouchDB.
Что такое JavaScript?
- JavaScript был создан для придания динамичности HTML страницам.
- JavaScript — это скриптовый язык или язык сценариев.
- Языки сценариев — это упрощённые языки программирования, создаваемые для работы в определённых средах.
- Код, написанный на JavaScript, можно вставлять прямо в HTML-код веб-страницы.
- Сценарий JavaScript представляет собой текстовый файл, поэтому написать его можно в простом текстовом редакторе, а для его работы достаточно запустить в окне браузера.
Зачем нужен JavaScript?
Благодаря скриптам JavaScript статичные HTML документы можно сделать динамичными и интерактивными.
- Различные визуальные эффекты, вроде слайдеров, галерей картинок и динамического текста;
- Проверка пользовательских данных формы до их отправки на сервер;
- Вывод информации в новых окнах в автоматическом режиме;
- Изменение содержимого окна браузера, в зависимости от действий пользователя;
Все это и многое другое реализуется при помощи JavaSсript.
Стоит сказать, что
JavaScript и Java совершенно разные, как по концепции, так и по реализации, языки программирования.JavaScript был придуман Бренданом Эйхом (Brendan Eich) в 1995 году и стал стандартом ECMA в 1997 году. Официальное название стандарта — ECMA-262. А официальное названия языка — ECMAScript.
msiter.ru
в какой последовательности изучать JavaScript
Огромный инструментарий JS и тонны материалов по нему. С чего начать? Расскажем, как изучать JavaScript, и предоставим полезные ссылки.
JavaScript (JS) – нативный язык, база, а библиотеки и JavaScript фреймворки – все то, что уже «накладывается» сверху. Язык программирования JavaScript клиентский и выполняется на стороне браузера. Грубо говоря, вся нагрузка ложится именно на ПК пользователя, а не на сервер, как было бы в случае с PHP. Поэтому кривой скрипт также будет затрагивать напрямую клиента, а не сервер: хорошо для вас, да плохо для пользователя.
Подробнее о том, что такое JavaScript, вы сможете узнать из данного видео:
Не упускайте из виду JavaScript фреймворки, библиотеки и прочие инструменты.
- jQuery – дополнительная библиотека, способная облегчить работу с XHR-запросами и селекторами.
- Node.js представляет собой серверную вариацию JS.
- Gulp – автоматизация работ (напр., по сборке проекта).
- Webpack заменяет собой и Gulp, и многие другие инструменты. Это сборщик модулей, который позволяет собрать все js-файлы в необходимое кол-во пакетов, а также убедиться в правильности порядка собранных файлов.
- Angular/Vue/React. Не нужно вестись на хайповые статьи вроде «Angular vs React». Хватит одного инструмента из трех перечисленных. Остальные – по мере необходимости.
Теперь давайте условимся: идеальной последовательности не существует. Все напрямую зависит от того, чем вы занимаетесь и на что ориентированы: фронтенд или full-stack. Если первое, делайте меньший упор на взаимодействие с серверной частью, а если второе – напротив. Изучать JavaScript вы можете и по своему плану. Наш – лишь одна из возможных вариаций, которая, тем не менее, имеет право на существование.
1. JavaScript основы
Книги по JavaScript для начинающих и аналогичные видеоуроки, которые разбудят в вас веб-разработчика. Массивы, коллекции, строки и прочий базис обязательны к изучению на старте. Список литературы солидный, поэтому в первую очередь загляните сюда:
И еще много чего интересного в нашей статье 16 бесплатных книг по JavaScript.
2. jQuery
Рекомендуем ознакомиться с серией видео «Уроки jQuery» от Web Developer Blog. Вы узнаете все о jQuery, начиная синтаксисом и заканчивая практической реализацией того, что может потребоваться.
3. JavaScript: углубленное изучение
Начинаем изучать JavaScript более серьезно.
В этом поможет неплохой видеокурс от loftblog под названием «Продвинутый JavaScript»:
4. Node.js
И вот мы переходим к самому «вкусному». В сети немало материалов по Node.js, но мы предлагаем сперва ознакомиться с нашими статьями:
- Руководство для начинающих в Node.js
- Подборка бесплатных ресурсов для изучения Node.js
Далее посмотрите серию уроков Node.js от ITVDN:
Ребята излагают материал максимально доступно, так что никто не уйдет «обиженным» 😉
Менеджер пакетов, который входит в Node.js. Нужен, важен и нередко украшает требования вакансий. У Дмитрия Лаврика есть хорошее видео, разбирающее по косточкам npm в рамках основ:
Захотите узнать больше – обязательно найдете на его канале дополнительные видео, посвященные данному менеджеру.
6. Gulp
Исчерпывающий ответ на вопрос «Что это такое» дает Современный учебник JavaScript: Скринкаст по Gulp. Все выпуски скринкаста собраны в одном месте, что безумно удобно.
7. Webpack
За основой по Webpack вам на канал WebForMySelf:
Дополнительная информация по этому инструменту. Плохо с английским? Не вопрос: переведенный вариант.
8. Angular/Vue/React
Выше уже упоминалось, что можно выбрать что-то одно, но все зависит от конкретного проекта и соответствующих требований к нему. Хоть Vue.js сейчас по обсуждениям впереди планеты всей, затронем каждый из трех инструментов.
Angular курс
Vue.js
Знакомство с React
Надеемся, вам помог наш лайфхак. Если же вы знаете более эффективный способ изучить JS – поделитесь в комментариях 🙂
proglib.io
Учи JavaScript правильно. Путеводитель для растерявшихся
Заблудились в JavaScript? Это совсем неудивительно. Вам нужен гид, который расскажет, что на самом деле важно. У нас как раз есть такой.
Посмотрите налево – тут рынок фреймворков, которые наперебой расхваливают свои возможности. Посмотрите направо – здесь супермаркет npm-модулей. Впереди вы можете видеть огромные мастерские бандлеров и таск-раннеров и офисные небоскребы Node-приложений.
Улицы города JavaScript длинные и извилистые, с десятками магазинчиков и торговцев разных мастей, мечтающих продать вам очередную полезную библиотеку. И с сотнями растерянных разработчиков, которые не знают, куда идти и что покупать. Некоторые набирают целые сумки товаров, которые потом никогда не будут использовать.
Если вы один из этих заблудившихся туристов, наш путеводитель по JavaScript для начинающих поможет вам превратиться в уверенного JS-горожанина. Он подскажет, с чем разобраться в первую очередь, чтобы ориентироваться в этом шумном, но интересном месте.
Предполагается, что с основами языка вы уже знакомы – иначе как вы вообще попали в этот город?
Асинхронность в основе всего
Когда-то в вебе были только скучные статичные страницы, а любое действие требовало перезагрузки. Та эпоха осталась в прошлом, на смену ей пришли крутые отзывчивые приложения, которые умеют общаться с сервером в фоновом режиме, не мешая пользователю.
Асинхронность радикально изменила язык JavaScript и стала главным принципом веб-разработки. Поэтому наш путеводитель настойчиво рекомендует туристам как следует разобраться с этой концепцией. Время, потраченное на изучение коллбэков, промисов и асинхронных функций, точно не пропадет зря.
Следующий шаг в этом направлении – изучение функции fetch, удобной альтернативы классическому XMLHttpRequest.
Зачем нужны фреймворки
Фреймворки стали такой важной составляющей современного JavaScript, что кажется, что они были всегда.
Почему так получилось, почему js-фреймворки вообще существуют?
Потому что в веб-разработке есть некоторые важные вещи, которые не имеют прямой нативной реализации в языке. Они нужны в той или иной степени почти в каждом проекте. Приходится писать собственную реализацию с нуля или использовать уже готовый фреймворк.
Привязка данных
Привязка данных (data binding) между представлением и контроллером – важная часть современных приложений. Необходимо синхронизировать пользовательский интерфейс с реальными изменениями данных. Все фреймворки имеют какой-то способ сделать это, независимо от того, являются ли они полным воплощением модели MVC, MVVM или просто слоем представления.
Повторно используемые компоненты
Самое большое достижение AngularJS – введение моды на компонентную структуру приложения, которую быстро подхватили и Vue, и React. Эта идея оказалась настолько удачной, что в самом языке появился специальный интерфейс веб-компонентов. К сожалению, он не имеет механизма привязки данных, поэтому фреймворки по-прежнему незаменимы.
Правильное изучение JavaScript фреймворков
Выбрав фреймворк для изучения, помните – это лишь инструмент для увеличения возможностей разработчика. Вы должны точно понимать, какие проблемы языка решаете таким способом. Фреймворки будут меняться, но с подобным пониманием вы легко разберетесь в любом из них.
Часто бывает так, что Junior JavaScript разработчик, не имея еще достаточного опыта, с головой ныряет в какой-нибудь фреймворк и начинает считать его способ работы единственно правильным. Решение этой проблемы довольно интересное. Чтобы понять, что фреймворки не являются самоцелью, нужно… больше фреймворков!
В лингвистике давно известно, что полезно изучать похожие языки одновременно. Это позволяет лучше разобраться в их структуре, отмечая сходства и различия. Знание двух JS-фреймворков работает аналогичным образом.
Если вам доступны несколько путей решения одной и той же проблемы, вы начинаете лучше понимать саму проблему.
Под капотом сборщика
Программирование на JavaScript в настоящее время – дело довольно комплексное и сильно выходит за пределы ванильного JS. Мы используем множество различных инструментов для выполнения рутинных задач и сборщики для объединения их в единый слаженный механизм.
Сборка – один из самых «черномагических» процессов. Не каждый опытный JavaScript разработчик понимает, каким образом из простенького конфига и кучи несвязанных модулей получается один файл с обработанным и оптимизированным кодом.
Сборка – самая быстро развивающаяся область в JS. Производительность стремительно растет, размеры бандла так же стремительно уменьшаются. Разработчики выжимают из процесса все, что возможно. Именно поэтому вы должны разобраться в этом волшебстве.
Невероятно важно понимать, что делают инструменты, которыми вы пользуетесь. Как именно они преобразуют ваш код и в каком порядке. Как упаковываются ваши модули и как можно влиять на процесс сборки. Не отдавайте вашу программу в полное распоряжение сборщика, продолжайте контролировать ее.
TypeScript – новый JavaScript
TypeScript – суперсет языка JavaScript со статической типизацией и классической ООП-моделью. Классическому JS порой очень не хватает этих фич, но не только они обусловили популярность TypeScript. Его главное достоинство – аккуратный и надежный код.
TypeScript не только сам проверяет программу за разработчиком, но и стимулирует его лучше следить за собой, поощряет выработку хороших привычек кодирования.
Начинающему разработчику нет необходимости досконально изучать TypeScript (хотя там много интересного). На первых порах достаточно ознакомиться с основами: аннотациями типов для переменных, свойств классов и параметров функций. Понимание этих правил и следование им убережет вас от многих ошибок даже в классическом JS, вы станете гораздо более дисциплинированным разработчиком.
Забавно, что среди самых важных тем для изучения в современном JavaScript только одна относится к ванильному языку. Но такова реальность. Сейчас освоить инфраструктуру языка даже важнее для успеха, чем разобраться в его тонкостях.
Что вы считаете главным в современном JavaScript?
proglib.io
уроки с заданиями, примеры и решения
Выберите тему:
В сети Интернет Вы найдете довольно много материалов, посвященных языку. Наш ресурс не предполагает полное изложение информации, касающейся языка. Но JavaScript уроки, изложенные на сайте, наверняка могут быть полезными как для начинающих обучение, так и непосредственно для учителей и преподавателей.
Итак, приступим.
Для начала разберем, javaScript – что это такое и зачем он необходим в html?
Javascript — это алгоритмический язык программирования.
Рассмотрим схему взаимодействие браузера с сервером — клиент-серверную схему. Принцип работы строится на схеме запрос-ответ. Мы вбиваем адрес в строке адреса браузера, браузер отсылает запрос на сервер: «необходим такой-то ресурс». Сервер обрабатывает запрос и выдает ответ в виде html-страницы.
Схема хороша, пока на странице необходимо отображать обычные статические данные. Но в современное время страницы максимально интерактивны и позволяют всячески взаимодействовать с сервером. В html есть для этого элементы управления – кнопки, списки, переключатели и т.д. Набор элементов мы можем поместить на страницу и с помощью кнопки отправить их на сервер.
Но недостаток схемы в том, что взаимодействие клиент-сервер занимает какое-то время. И если мы хотим сделать интерактивную страницу, которая бы реагировала быстро на действия пользователя, то нам эта схема не подходит. И, кроме того, во многих случаях большинство действий со страницей и ее объектами можно выполнить на компьютере пользователя: например, подсветка пункта по наведению мыши. Зачем для подсветки загружать сервер, заставляя его заново формировать и выдавать страницу? Можно это сделать на клиентском компьютере.
Однако, язык html – декларативный язык, и он не может выполнять алгоритмические конструкции. Поэтому в середине 90-х годов прошлого века возникла идея встроить в html еще один язык, простой, и с его помощью выполнять простые программы без запроса-ответа к серверу. Идея появилась у программистов компании Netscape Communications. Они разработали javaScript — алгоритмический язык программирования и встроили в свой браузер Netscape Navigator. Назывался язык lifeScript (живой сценарий).
В середине 90 была популярна платформа java. Данный язык был настолько новаторским и популярным, что бытовало мнение, что в скором времени все будут программировать на java. Поэтому программисты Netscape переименовали свой lifeScript в javaScript и сделали синтаксис похожим, позаимствовав некоторые основные конструкции. Однако, javaScript и java — это два совершенно разных языка. В дальнейшем поддержку javaScript добавили и в другие браузеры. Стали разрабатывать и принимать стандарты javaScript (ECMA).
Итак, кратко по истории JavaScript:
- Разработан в Netscape Communications как язык сценариев для обозревателей Netscape Navigator, начиная с версии 2.0 (декабрь 1995 ) (на основе языка Java от Sun Microsystems). Язык LifeScript =>JavaScript
- К разработке подключается корпорация Microsoft, чьи обозреватели Internet Explorer поддерживают JavaScript, начиная с версии 3.0. В Internet Explorer JavaScript носит название Jscript
- В июне 1997 г. была принята первая версия стандарта под названием ECMAScript (ECMA-262) – официальное название JavaScript.
labs-org.ru
Каково оно учить JavaScript в 2016 / Habr
— Эй, я получил новый веб-проект, но, если честно, я не занимался веб-кодингом в течение нескольких лет, и я слышал, все немного поменялось. Ты же самый современный веб-разработчик, правда?
— Это теперь называется Front-End инженер, но да, я — именно он. Я работаю с вебом в 2016. Визуализации, музыкальные плееры, летающие дроны, которые играют в футбол, все что угодно. Я только что вернулся из JsConf и ReactConf, так что я знаю новейшие технологии для создания веб-приложений.
— Круто. Мне нужно создать страницу, которая отображает последние действия со стороны пользователей, так что мне просто нужно получить данные от REST и отобразить их в какой-то фильтруемой таблице, ну и обновлять её, если что-то изменится на сервере. Я думал, может быть, использовать JQuery для извлечения и отображения данных?
— О, Мой Бог! Нет! Никто больше не использует JQuery. Ты должен попробовать React: это — 2016!
— Интересно. Что такое React?
— Это — очень крутая библиотека, сделанная ребятами из Facebook. Она реально дает полный контроль и повышает производительность приложения, позволяя очень легко обрабатывать любые изменения представлений.
— Звучит заманчиво. Могу ли я использовать React для отображения данных с сервера?
— Ага, но сначала нужно добавить React и React DOM в виде библиотек.
— Подожди, почему две библиотеки?
— Ну, одна — это сама библиотека, а вторая — для манипулирования DOM, который ты теперь можешь описать в JSX.
— JSX? Что такое JSX?
— JSX — это просто расширение синтаксиса JavaScript, который выглядит очень похоже на XML. Это своего рода еще один способ описать DOM. Думай о нем, как об улучшенном HTML.
— Что случилось с HTML?
— Это 2016. Никто больше не пишет на сыром HTML.
— Ну хорошо. Если я добавляю эти две библиотеки, то я могу использовать React?
— Не совсем. Нужно добавить Babel, а затем можно использовать React.
— Другая библиотека? Что за Babel?
— О, Babel — это транспайлер, он позволяет ориентироваться на конкретные версии JavaScript, в то время как пишешь код в любой версии JavaScript. Тебе не обязательно добавлять Babel для того, чтобы писать на ReactJS, но если ты это не сделаешь, то ты застрял с ES5, ну а это 2016, ты должен кодить в ES2016+ как и все крутые чуваки.
— ES5? ES2016+? Я потерялся. Что за ES5 и ES2016+?
— ES5 означает ECMAScript 5. Это версия, на которую ориентируется большинство, поскольку она реализована в большинстве браузеров на сегодняшний день.
— ECMAScript?
— Да, знаешь стандарт JavaScript, который был основан в 1999 году после его первоначального выпуска в 1995 году? Тогда, когда JavaScript был назван LiveScript и только работал в Netscape Navigator. Это было очень запутано тогда, но, к счастью, теперь все ясно, и у нас есть 7 версий этой реализации.
— 7 версий. Серьезно. А ES5 и ES2016+ это?…
— Пятое и седьмое издание соответственно.
— Подожди, а что случилось с шестым?
— ES6? Да, каждое издание является надстройкой предыдущего, так что если ты используешь ES2016+, то ты используешь все функции предыдущих версий.
— Хорошо. А зачем использовать ES2016+ над ES6 тогда?
— Ну, ты можешь использовать ES6, но для интересных штук, типа async и await, тебе нужно использовать ES2016+. В противном случае ты застрял с ES6 генераторами и сопрограммами для блокировки асинхронных вызовов и нормального управления потоком.
— Я понятия не имею, что ты только что сказал, и все эти имена запутаны. Слушай, я просто хочу загрузить кучу данных с сервера, просто подключить JQuery из CDN и просто получить данные с помощью AJAX. Почему я не могу сделать это?
— Чувак, это 2016. Никто не использует JQuery больше, это заканчивается кучей запутанного кода. Все же это знают.
— Ясно. Так что моя альтернатива — это загрузить три библиотеки для извлечения данных и отображения таблицы HTML.
— Ну, ты включаешь эти три библиотеки, но связываешь их с менеджером модулей, чтобы загрузить только один файл.
— Понятно. А что за менеджер модулей?
— Определение зависит от окружающей среды, но для веба мы обычно подразумеваем все, что поддерживает модули AMD или CommonJS.
— Хорошооооо. А AMD и CommonJS это?…
— Определения. Есть куча способов, чтобы описать, как несколько библиотек и классов JavaScript должны взаимодействовать. Ты можешь написать несколько файлов JavaScript, определяющих API AMD или CommonJS, и использовать что-то вроде Browserify, чтобы связывать их.
— Хорошо, имеет смысл… наверное. А что такое Browserify?
— Это инструмент, который позволяет связать CommonJS описанния зависимостей для файлов, которые могут быть запущены в браузере. Он был создан, потому что большинство людей публикуют эти зависимости в NPM.
— NPM?
— Это очень большое общественное хранилище, где умные люди постят код и зависимости в виде модулей.
— Как CDN?
— На самом деле, нет. Это больше похоже на централизованную базу данных, где каждый желающий может опубликовать и скачать библиотеки, так что ты можешь использовать их локально для разработки, а затем загрузить их на CDN, если захочешь.
— О, как Bower!
— Да, но это 2016, сейчас никто больше не использует Bower.
— Хм, ясно… так мне нужно загрузить библиотеки из NPM?
— Да. Например, если ты хочешь использовать React, то загружаешь модуль React и импортируешь его в коде. Это можно сделать для почти каждой популярной библиотеки JavaScript.
— О, это как в Angular!
— Angular это слишком 2015. Но да. Angular тоже там есть, наряду с VueJS, RxJS и другими интересными библиотеками из 2016. Хочешь узнать о них?
— Давай придерживаться React, я уже узнал слишком много о нем. Так что, если мне нужно использовать React, я вытяну его из этого NPM, а затем использую Browserify?
— Да.
— Это кажется слишком сложным, чтобы просто взять кучу зависимостей и связать их вместе.
— Ага, именно поэтому ты используешь менеджер задач, типа как Grunt или Gulp, или Broccoli для автоматизации запуска Browserify. Ты даже можешь использовать Mimosa.
— Grunt? Gulp? Broccoli? Mimosa? Черт возьми, о чём мы говорим сейчас?
— Task менеджеры. Но они уже не такие крутые. Мы использовали их в стиле 2015 с Makefiles, но теперь мы перешли на Webpack.
— Makefiles? Я думал, что в основном это используется для C или C++ проектов.
— Ага, но, видимо, в вебе мы любим делать вещи сложными, а затем вернуться к основам. Мы делаем это типа каждый год. Ты подожди, через год или два мы еще запилим сборки (assemblies) в вебе.
— Пффф. Ты упомянул что-то под названием Webpack?
— Это другой менеджер модулей для браузера, в то же время он и своего рода Task менеджер. Это как улучшенная версия Browserify.
— ОК. А почему он лучше?
— Ну, может быть не лучше, но более гибкий в плане того, как зависимости связаны. Webpack позволяет использовать различные менеджеры модулей, а не только CommonJS. Например, родные модули ES6.
— Я очень запутался в этих CommonJS/ES6.
— Да все в этом запутались, но можешь больше не париться, потому что есть SystemJS.
— О, Боже, опять что-то-JS. Хорошо, а что это за SystemJS?
— Ну, в отличие от Browserify и WebPack 1.x, SystemJS представляет собой динамический модуль загрузчика, который позволяет связать несколько модулей в нескольких файлах, а не связывая их в один большой файл.
— Подожди, я думал, что мы хотели объединить наши библиотеки в один большой файл и загрузить его!
— Да, но из-за HTTP/2 несколько HTTP запросов на самом деле лучше.
— Стоять! Так чего же мы не можем просто добавить три оригинальные библиотеки для React?
— Ты, конечно, можешь добавить их в качестве внешних скриптов с CDN, но все равно нужно будет добавить Babel.
— Эх. И это плохо, не так ли?
— Да, придется включить полностью Babel-core, а это не будет эффективным для production. На production необходимо выполнить ряд предварительных задач, чтобы проект был полностью готов, а это ритуал, в сравнении с которым вызвать дьявола — это рецепт как сварить яйцо. Надо будет минимизировать файлы, сделать uglify, поиграться со стилями, подумать о загрузке скриптов…
— Понял, понял. Но если не скачивать библиотеки непосредственно с CDN, то как иначе?
— Я бы сделал транспайл из TypeScript с помощью комбо Webpack + SystemJS + Babel.
— TypeScript? Я думал, что мы пишем код на JavaScript!
— Typescript — это и есть JavaScript, или, лучше сказать, надмножество JavaScript. Более конкретно — JavaScript на версии ES6. Ну, та шестая версия, о которой мы говорили.
— Я думал, что ES2016+ — уже надмножество ES6! Почему нам сейчас нужен еще и TypeScript?
— Потому что это позволяет нам использовать JavaScript как типизированный язык и уменьшить количество ошибок во время выполнения. Это 2016, надо добавить некоторые типы в код на JavaScript.
— И TypeScript, очевидно, делает это.
— И Flow, хотя он проверяет только типы, в то время как TypeScript является надстройкой JavaScript, который нужно скомпилировать.
— Эээ… и Flow?
— Это — инструмент для проверки статической типизации, сделанный парнями из Facebook. Они написали его на OCaml, так как функциональное программирование является удивительно крутым.
— OCaml? Функциональное программирование?
— Ну это то, что сегодня юзают крутые пацаны, ну типа, знаешь, 2016. Функциональное программирование. Функции высокого порядка. Currying. Pure функции.
— Я понятия не имею, что это.
— Никто не понимает, в начале. Надо просто знать, что функциональное программирование лучше, чем объектно-ориентированное программирование, и это то, что мы должны использовать в 2016 году.
— Подожди, я учил ООП в универе, я думал, что это круто?
— Ну так было пока Oracle не купил Java. Я имею в виду, что ООП был хорош раньше, и его используют до сих пор, но теперь каждый понимает, что манипулировать состояниями эквивалентно пинанию младенцев, так что теперь все движется к immutable объектам и функциональному программированию. Ребята из Haskell уже 100 лет кричат об этом, и это я еще не упоминал Elm. Но, к счастью, в сети теперь у нас есть такие библиотеки, как Ramda, которые позволяют нам использовать функциональное программирование на простом JavaScript.
— Ты что, просто придумываешь имена? Что еще за Ramnda?
— Нет. Ramda. Как и Lambda. Ну, знаешь, библиотека Дэвида Чембера?
— Дэвида кого?
— Дэвида Чембера. Крутой чел. Один из авторов Ramda. Глянь еще работы Эрика Мейера, если серьезно относишься к изучению функционального программирования.
— А Эрик Мейер это?…
— Тоже функциональщик. Крутой чел. У него есть куча презентаций, где он в странной цветной футболке громит Agile. Еще глянь что делают Tj, Jash Kenas, Sindre Sorhus, Paul Irish, Addy Osmani…
— ОК. Притормози. Все это хорошо и прекрасно, но я думаю, что все это слишком сложно и ненужно для простой выборки данных и их отображения. Я уверен, что я не должен знать этих людей или все эти вещи, чтобы создать таблицу с динамическими данными. Давай вернемся к React. Как я могу извлечь данные с сервера в React?
— Ну, на самом деле для выборки данных не надо React, он отображает данные.
— О, черт. Так а что используется для выборки данных?
— Используй Fetch для получения данных с сервера.
— Использовать Fetch для выборки данных? Тот, кто называет эти вещи, нуждается в тезаурусе.
— О, да. Fetch это имя нативной реализации для выполнения XMLHttpRequests.
— О, AJAX.
— AJAX это просто запросы XMLHttpRequest. А Fetch позволяет делать AJAX на основе промисов, которые затем можно резолвить, чтобы избежать callback hell.
— Callback hell?
— Да. Каждый раз, когда выполняется асинхронный запрос, ты должен ждать его ответа, который заставляет добавить функцию внутри функции, которая называется пирамида callback hell.
— О, хорошо. А промисы решают эту проблему?
— Еще бы! Манипулируя коллбеками через промисы, ты можешь писать более понятный код, тестировать его, а также выполнять несколько одновременных запросов одновременно и ждать, пока все они отработают.
— И это можно сделать с помощью Fetch?
— Да, но только в некоторых браузерах, в противном случае необходимо включить Fetch polyfill или использовать Request, Bluebird или Axios.
— Сколько библиотек мне нужно знать, ради бога? Сколько из них?
— Это JavaScript. Тут тысячи библиотек, которые делают одно и то же. Мы знаем эти библиотеки. Наши библиотеки огрооооомные, а иногда мы добавляем картинки с Guy Fieri в них.
— Guy Fieri? Давай покончим с этим. Что эти Bluebird, Request и Axios делают?
— Это библиотеки для выполнения XMLHttpRequests, которые возвращают промисы.
— А методы AJAX JQuery не возвращают промисы?
— Мы больше не используем «J» в 2016. Просто используйте Fetch polyfill или Bluebird, Request или Axios. Затем управляй промисами с async, await и Бац!, у тебя правильный поток управления.
— Это третий раз, когда ты говоришь о await, но я понятия не имею, что это такое.
— Await позволяет блокировать асинхронный вызов, что позволяет лучше все контролировать во время получения данных и увеличивает читаемость кода. Это потрясающе, просто нужно, чтобы убедиться, что ты добавил stage-3 в Babel, или использовать синтаксис асинхронных функций и плагин transform-async-to-generator.
— Это безумие.
— Нет, безумие — что нужно перекомпилировать код TypeScript, а затем транспайлить его с Babel, чтобы использовать await.
— Шта!? Это не входит в TypeScript?
— Входит в следующей версии, но в версии 1.7 он только ES6, так что если хочешь использовать await в браузере, сначала нужно скомпилировать код TypeScript в ES6, а затем транспайлить с Babel в ES5.
— Я не знаю, что сказать.
— Слушай, это легко. Пиши весь код в TypeScript. Все модули, использующие Fetch компилируй в ES6, транспайль их с Babel с stage-3, и загружай с SystemJS. Если у тебя нет Fetch, используй polyfill, или Bluebird, Request или Axios, и обрабатывай промисы с await.
— У нас очень разные определения «легко». Так, с этим ритуалом я, наконец, получил данные и теперь я могу показать их с помощью React правильно?
— А приложение будет обрабатывать любые изменения состояния?
— Грр, я не думаю. Мне просто нужно отобразить данные.
— О, слава богу. В противном случае мне пришлось бы объяснить Flux и реализации, такие как Flummox, Alt, Fluxible. Хотя, если быть честным ты должен использовать Redux.
— Как же достали эти имена. Опять же, мне просто нужно отобразить данные.
— А, если просто отобразить данные, не надо начинать с React. Можно взять движок шаблонов.
— Ты шутишь, что ли? Думаешь, это смешно?
— Да я просто объяснил, что ты мог бы использовать.
— Стоп. Просто остановись.
— Я имею в виду, даже если просто использовать шаблонизатор, я бы все равно использовал комбо TypeScript + SystemJS + Babel на твоем месте.
— Мне нужно отобразить данные на странице, а не выполнить оригинальный фаталити Sub Zero из Мортал Комбат. Просто скажи мне, какой движок шаблонов использовать.
— Их много, с каким ты знаком?
— Уф, не могу вспомнить название. Это было давно.
— jTemplates? jQote? PURE?
— Не то. Еще один?
— Transparency? JSRender? MarkupJS? KnockoutJS?
— Другой
— PlatesJS? JQuery-tmpl? Handlebars? Некоторые люди до сих пор используют его.
— Может быть. А есть что-то похожее на последний?
— Mustache, underscore? Я думаю, что теперь даже у lodash есть шаблонизатор, но это своего рода 2014.
— Грр… возможно он был поновее.
— Jade? DustJS?
— Нет.
— DotJS? EJS?
— Нет.
— Nunjucks? ЕСТ?
— Нет.
— Чувак, никто не любит синтаксис CoffeeScript в любом случае. Jade?
— Нет, ты уже сказал Jade.
— Ну я имел в виду Pug. Я имел в виду Jade. Я имею в виду, Jade теперь Pug.
— Пф. Нет. Не помню. Какой из них ты бы использовал?
— Наверное, нативный ES6 template strings.
— Дай угадаю. Это требует ES6.
— Да.
— Который, в зависимости от того, какой браузер я использую требует Babel.
— Да.
— Который, если я хочу включить без добавления всей библиотеки, нужно, загрузить в качестве модуля NPM.
— Да.
— Который, требует Browserify или Wepback, или, скорее всего, SystemJS.
— Да.
— Который, если это не Webpack, в идеале должен управляться Task runner-ом.
— Да.
— Но, так как я должен использовать функциональное программирование и типизированные языки, я в первую очередь должен предварительно скомпилировать TypeScript или добавить этот Flow.
— Да.
— А потом отправить это на обработку в Babel, если я хочу использовать await.
— Да.
— Так что я могу затем использовать Fetch, промисы и управление потоком и всю эту магию.
— Только не забудь polyfill Fetch, если он не поддерживается, Safari до сих пор не может справиться с этим.
— Знаешь что. Я думаю, мы закончим здесь. На самом деле, я думаю, я закончил. Я закончил с этим вебом и с JavaScript в целом.
— Хорошо, через несколько лет мы все будем кодить в Elm или WebAssembly.
— Я просто хочу вернуться к бэкэнду. Я не могу справиться со всеми этими изменениями, версиями, изданиями, компиляторами и транспайлерами. Сообщество JavaScript безумно, если оно думает, что кто-то может идти в ногу с этим.
— Понятно. Тебе тогда надо попробовать сообщество Python.
— Почему?
— Слышал о Python 3?
habr.com
16 бесплатных книг по JavaScript
Коллекция бесплатных электронных книг для тех, кто хочет изучить JavaScript. Книги предоставляются в различных цифровых форматах: PDF, EPUB, HTML и др.
Эта книга представляет собой введение в программирование на JS. Книга также охватывает основные парадигмы программирования, например, ООП. В последней части книги рассказывается о Node.js.
Книга глубоко проникает в возможности и тонкости углубленного JS. Чтобы показать читателю, насколько она технически подробна: отдельная глава полностью посвящена значению null, другая — целиком undefined. Если вы хотите разобраться в самой подноготной языка, эта книга специально для вас.
Паттерны проектирования — это традиционные решения типовых задач. Использование хороших паттернов способно улучшить качество, эффективность и безопасность вашего кода, в то время как плохие — так называемые «анти-паттерны» — порождают множество проблем. Эта книга — о JS (и jQuery) паттернах проектирования, техниках и лучших практиках.
Эта онлайн-книга проведет вас через основы языка. По ходу изложения вам будут представлены и более углубленные вещи, такие как объектно-ориентированное программирование и регулярные выражения.
Посылка этой книги в том, что в рамках этого языка существует набор функционала, инструментов, подходов и шаблонов, заточенных и оптимизированных под человека. Эта книга подойдет читателям, желающим узнать больше о JS с точки зрения разработки веб-приложений.
Книга для тех, кто хочет научиться писать код на JS. Автор позволяет себе допущение, что читатель, взявшийся за данную книгу, является программистом, который уже знает хотя бы один объектно-ориентированный или другой язык программирования, такой как PHP, Ruby, Python, C++, Java и так далее.
Эта книга рассчитана на опытных JS-разработчиков, желающих прокачать свой уровень владения языком в контексте разработки полнофункционального веб-приложения.
Издание, которое научит вас техникам, приемам и лучшим практикам создания современных веб-приложений с использованием JS и связанных веб-технологий вроде JSON и NoSQL.
Автор этой книги Микито Такада по прозвищу Mixu уверен, что «лучший способ изучить что-то — это понять, как оно устроено». Таким образом, книга описывает процесс разработки веб-приложения на JS и других веб-технологиях.
Объектная модель документа (Document Object Model, DOM) — ключевая концепция, которую необходимо освоить любому, что серьезно занимается JS. Книга «DOM Enlightment» — техническое руководство по созданию DOM-сценариев.
Это серия книг, погружающих читателя в фундаментальные механизмы языка. Первое издание на данный момент полностью сформировано.
Скрытые фичи JS
Объяснение современного JavaScript для динозавров
proglib.io
Учебник JavaScript — Как создать сайт
Самоучитель по языку JavaScript
Учебник JavaScriptУчебник по синтаксису JavaScript
Перед тем как приступить к чтению учебника по языку JavaScript, вы должны обладать знаниями по основам языка HTML.
Будет большим плюсом в изучении синтаксиса JavaScript, если вы уже знакомы с каким-нибудь языком программирования, например PHP, C или Pascal, а также понимаете что такое переменная, тип данных, функция или массив.
Однако если вы не знакомы с языками программирования, то волноваться не стоит, данный учебник по JavaScript как раз и расчитан на тех, кто впервые приступает к изучению программирования.
JavaScript (ЯваСкрипт) — это клиентский язык программирования, с помощью которого можно управлять элементами HTML-страницы (HTML-тегами) и веб-браузера, заставлять их двигаться, реагировать на различные события (щелчки мышью, нажатие на клавиатуру), создавать множество интересных программ (скриптов): тесты, анимацию, фотогалереи (например как во Вконтакте), игры и многое другое.
Как происходит изучение JavaScript
Изучение языка JavaScript, обычно делится на четыре этапа:
1. Освоение синтаксиса JavaScript (данный учебник),
2. Изучение DOM и BOM,
3. Управление DOM и BOM c помощью JavaScript,
4. Изучение различных библиотек JavaScript. jQuery — самая популярная на данный момент библиотека (учебник по jQuery должен появиться на этом сайте, в конце 2015 года).
DOM — это объектная модель документа. Благодаря технологии DOM, теги HTML-страницы начинают представлять из себя дерево объектов и у каждого объекта в этом дереве, есть свой уникальный адрес. Язык JavaScript обращаясь по этому адресу, может получить доступ к тому или иному HTML-тегу и управлять им (изменять цвет, размер, положение и мн. др.).
BOM — это браузерная модель документа. Структура та же самая что и у DOM, только вместо объектов HTML-страницы, выступают объекты браузера: окно браузера, размеры экрана браузера, история посещений, статусная строка и т.д.
После изучени DOM и BOM, приступают к созданию более-менее сложных скриптов на JavaScript, взаимодействующих со страницей и браузером.
Затем, немного освоившись, изучают какую-нибудь библиотеку JavaScript, например jQuery, благодаря ей можно создавать такие же программы как на JavaScript, только намного быстрее и эффективнее.
Некоторые вебмастера сразу приступают к изучению jQuery, пропустив предыдущие три этапа, но я не рекомендую этого делать, поскольку в любом случае нужно понимать синтаксис JavaScript и знать объекты DOM/BOM их свойства, методы и предназначения.
Какие программы можно написать с помощью JavaScript
С помощью языка JavaScript можно создавать множество интересных программ (скриптов):
— можно создавать скрипты которые будут изменять элементы страницы сайта или их расположение, путём нажатия на ту или иную кнопку,
— можно создавать анимацию,
— манипулировать формами, например проверять введённые пользователем данные на корректность,
— создавать различные тесты, например типа ЕГЭ (школьных экзаменов) и сразу получать результат,
— благодаря BOM можно узнавать характеристики браузера и компьютера пользователя посетившего ваш сайт, что позволяет создавать различные счетчики посещений,
— с помощью JavaScript, можно создавать даже игры, мультфильмы и множество других интересных и полезных программ.
Какова цель данного самоучителя по JavaScript?
Цель данной книги по JavaScript заключается в том, чтобы обучить вас основам синтаксиса JavaScript, познакомить с программированием и такими понятиями как переменные, типы данных, операции, операторы ветвления, функции, циклы, массивы, объекты и т.д. Всё это встречается и в других языках программирования, поэтому освоив JavaScript, вам уже намного легче будет изучать другие языки, например PHP, C++ или Python.
Структура учебника по JavaScript
В учебнике по JavaScript, будут рассмотрены следующие темы и уроки:
- Введение в учебник по JavaScript, для начинающих,
- Внедрение кода JavaScript в HTML-документ,
- Переменные в JavaScript,
- Типы данных в JavaScript,
- Операции в JavaScript,
- Оператор ветвления,
- Циклы в JavaScript,
- Функции в JavaScript,
- Массивы в JavaScript,
- Объекты в JavaScript,
- Заключение учебника
Читать далее: Внедрение JavaScript в HTML-документ.
Дата публикации поста: 5 февраля 2016
Дата обновления поста: 16 октября 2014
Навигация по записям
gabdrahimov.ru