Огромный бесплатный видеокурс по основам javascript и связанным темам

Языки «над» JavaScript

Синтаксис JavaScript подходит не под все нужды. Разные люди хотят иметь разные возможности.

Это естественно, потому что проекты разные и требования к ним тоже разные.

Так, в последнее время появилось много новых языков, которые транспилируются (конвертируются) в JavaScript, прежде чем запустятся в браузере.

Современные инструменты делают транспиляцию очень быстрой и прозрачной, фактически позволяя разработчикам писать код на другом языке, автоматически преобразуя его в JavaScript «под капотом».

Примеры таких языков:

• CoffeeScript добавляет «синтаксический сахар» для JavaScript. Он вводит более короткий синтаксис, который позволяет писать чистый и лаконичный код. Обычно такое нравится Ruby-программистам.
• TypeScript концентрируется на добавлении «строгой типизации» для упрощения разработки и поддержки больших и сложных систем. Разработан Microsoft.
• Flow тоже добавляет типизацию, но иначе. Разработан Facebook.
• Dart стоит особняком, потому что имеет собственный движок, работающий вне браузера (например, в мобильных приложениях). Первоначально был предложен Google, как замена JavaScript, но на данный момент необходима его транспиляция для запуска так же, как для вышеперечисленных языков.
• Brython транспилирует Python в JavaScript, что позволяет писать приложения на чистом Python без JavaScript.

Есть и другие. Но даже если мы используем один из этих языков, мы должны знать JavaScript, чтобы действительно понимать, что мы делаем.

FAQ

А это все правда? Действительно ли курсы такие хорошие?

Вам решать.
Здесь нет курсов по HTML/CSS/PHP/Photoshop и прочему разному.
Я провожу курсы только по JavaScript. И стараюсь делать это настолько хорошо, насколько это возможно. Посмотрите эту страницу, внимательно остановитесь на программе и способе обучения, подумайте, подходит ли это вам.

Какие есть способы оплаты? Можно ли от организации?

Все основные способы предусмотрены. Есть оплата через банк, Webmoney, банковской карточкой.
Можно участвовать от компании и оплачивать через счет, в этом случае документы будут на странице заказа. Подписанные документы могут быть присланы в виде сканов или по почте.
Выбор способа оплаты — в процессе оформления.

А можно ваши курсы скачать?
Мы встречаемся онлайн, регулярно, потому что такие встречи дают вам возможность обсудить, что получается, с опытным разработчиком, задать вопросы, улучшить свои навыки и код.
Никакое «скачать» этого не заменит. Это просто не то, чем я здесь занимаюсь.

Что, если будут те, кто просто не будет успевать за программой — будет ли наш караван идти со скоростью самого медленного верблюда или отставших будем бросать на произвол судьбы так сказать?…
У нас есть программа, она построена на том уровне, который, на мой взгляд, необходим. Практика показывает, что «верблюды», в принципе, хорошие и идут правильно. Если менее политкорректно — дураков в группе нет, все участники адекватные.
Кривая обучения растёт постепенно, сначала медленнее, потом быстрее, так что если полноценно участвовать, то всё у всех получается.
Если же кто-то не успевает и пишет мне об этом, то я без проблем организую дополнительное занятие по сложной теме. Получается что отстающих не бросаем и группу не тормозим. В крайнем случае можно перевестись в другую группу, если какой-то форс-мажор.

Спасибо за письмо об открытии записи, а будут ли места через неделю?
Этот вопрос в различных вариациях я получаю уже после того, как отослал уведомление о записи.
Здесь всё просто — наличие мест от меня не зависит. Бывает очень по-разному

Бывает и постепенное заполнение за неделю-две, а бывает и какая-нибудь компания сразу пол-группы своими сотрудниками займёт.
Тем не менее, практика показывает, что в течение первых 3-5 дней после открытия записи места обычно есть (обычно! зависит не от меня!).

Планируются ли дополнительно курсы по …? Когда?
Важно понимать — это действительно большой и серьёзный курс. То есть, после его окончания, если вы полноценно участвовали, вам не нужно тут же идти на какую-то «2-ю ступень».
Курсы, о которых действительно может быть вопрос — это конкретные фреймворки и технологии.
Сейчас проводится курс по современному Node.JS

Бывают курсы и по другим технологиям, но редко. Уведомления об этом идут в рассылку с конкретной программой, которая меняется от курса к курсу.

Первые шаги

В ролике показана настройка Brackets, которая подходит под все платформы и оснащена большим количеством плагинов. Предназначены для удобной и быстрой работы (установка вкладок с расширениями, быстрое написание кода, сохранение файла при переключении на браузер). Для начала добавляется папка, в которой будут содержаться все рабочие файлы (.html, .js). Также показывается построение структуры сайта и подключение скрипта к нему с помощью тега. Показывается написание сценария для всплывающего окна и добавления простого события — клик на кнопку, создание связь события и функции. 
 

Операторы

JavaScript поддерживает следующие операторы:

Арифметические

Простые , а также деление по модулю и возведение в степень .

Бинарный плюс объединяет строки. А если одним из операндов является строка, то второй тоже будет конвертирован в строку:

Операторы присваивания

Простые и составные .

Битовые операции

Битовые операторы работают с 32-битными целыми числами на самом низком, побитовом уровне. Подробнее об их использовании можно прочитать на ресурсе MDN и в разделе Побитовые операторы.

Условный оператор

Единственный оператор с тремя параметрами: . Если условие истинно, возвращается , иначе – .

Логические операторы

Логические И , ИЛИ используют так называемое «ленивое вычисление» и возвращают значение, на котором оно остановилось (не обязательно или ). Логическое НЕ конвертирует операнд в логический тип и возвращает инвертированное значение.

Сравнение

Проверка на равенство значений разных типов конвертирует их в число (за исключением и , которые могут равняться только друг другу), так что примеры ниже равны:

Другие операторы сравнения тоже конвертируют значения разных типов в числовой тип.

Оператор строгого равенства не выполняет конвертирования: разные типы для него всегда означают разные значения.

Значения и особенные: они равны только друг другу, но не равны ничему ещё.

Операторы сравнения больше/меньше сравнивают строки посимвольно, остальные типы конвертируются в число.

Другие операторы

Существуют и другие операторы, такие как запятая.

Подробности: Базовые операторы, математика, Операторы сравнения, Логические операторы.

Мифы о JavaScript

1.1. JavaScript и Java — совершенно разные языки программирования

Многие до сих пор путают эти два языка программирования, однако, общего у них не так уж и много. JavaScript и Java несколько синтаксически схожи и способны выполнять некоторое динамическое содержимое веб-страниц в браузере (в случае Java это называется апплет — эта технология на сегодняшний день устарела и почти не используется). На этом их сходство заканчивается. JavaScript – это отдельный язык программирования, а не упрощённая версия Java.

1.2. JavaScript — не простой язык

Многие рассматривают JavaScript как язык простой и доступный для использования простыми пользователями. Это не так. Используя фреймворки и готовые плагины не знакомый с js человек может легко внести динамическую составляющую в веб-станичку, однако, сам написать подобные плагины, или более сложный скрипт, для решения нетривиальной задачи не способен. Популяризации этого мифа способствует распространение статей, которые, по сути, являются инструкциями по использования того или иного скрипта, но не затрагивают его внутреннее содержимое.

Выбор имени функции

Функция – это действие. Поэтому имя функции обычно является глаголом. Оно должно быть простым, точным и описывать действие функции, чтобы программист, который будет читать код, получил верное представление о том, что делает функция.

Как правило, используются глагольные префиксы, обозначающие общий характер действия, после которых следует уточнение. Обычно в командах разработчиков действуют соглашения, касающиеся значений этих префиксов.

Например, функции, начинающиеся с обычно что-то показывают.

Функции, начинающиеся с…

• – возвращают значение,
• – что-то вычисляют,
• – что-то создают,
• – что-то проверяют и возвращают логическое значение, и т.д.

Примеры таких имён:

Благодаря префиксам, при первом взгляде на имя функции становится понятным что делает её код, и какое значение она может возвращать.

Одна функция – одно действие

Функция должна делать только то, что явно подразумевается её названием. И это должно быть одним действием.

Два независимых действия обычно подразумевают две функции, даже если предполагается, что они будут вызываться вместе (в этом случае мы можем создать третью функцию, которая будет их вызывать).

Несколько примеров, которые нарушают это правило:

• – будет плохим выбором, если функция будет выводить с возрастом (должна только возвращать его).
• – будет плохим выбором, если функция будет изменять документ, добавляя форму в него (должна только создавать форму и возвращать её).
• – будет плохим выбором, если функция будет отображать сообщение с текстом (должна только выполнять проверку и возвращать её результат).

В этих примерах использовались общепринятые смыслы префиксов. Конечно, вы в команде можете договориться о других значениях, но обычно они мало отличаются от общепринятых. В любом случае вы и ваша команда должны точно понимать, что значит префикс, что функция с ним может делать, а чего не может.

Сверхкороткие имена функций

Имена функций, которые используются очень часто, иногда делают сверхкороткими.

Например, во фреймворке jQuery есть функция с именем . В библиотеке Lodash основная функция представлена именем .

Это исключения. В основном имена функций должны быть в меру краткими и описательными.

Прокачаем пример нашего веб-сайта

Добавление смены изображения

1. В первую очередь найдите другое изображение, которые вы хотели бы показать на вашем сайте. Убедитесь что оно такого же размера, как ваше первое изображение или максимально близкое к нему.
2. Сохраните изображение в вашу папку .
3. Переименуйте это изображение в ‘firefox2.png’ (без кавычек).
4. Перейдите в ваш файл и введите следующий JavaScript. (Если ваш «hello world» JavaScript по-прежнему существует, удалите его.)

   var myImage = document.querySelector('img');
   
   myImage.onclick = function() {
       var mySrc = myImage.getAttribute('src');
       if(mySrc === 'images/firefox-icon.png') {
         myImage.setAttribute ('src','images/firefox2.png');
       } else {
         myImage.setAttribute ('src','images/firefox-icon.png');
       }
   }

5. Сохраните все файлы и загрузите в браузере. Теперь, когда вы щёлкните по изображению, оно должно измениться на другое!

Итак, мы сохраняем ссылку на наш элемент в переменной . Далее, мы создаём этой переменной обработчик события с анонимной функцией. Теперь, каждый раз, когда на этот элемент изображения щёлкнут:

1. Мы получаем значение из атрибута изображения.
2. Мы используем условие для проверки значения равен ли путь к исходному изображению:
   1. Если это так, мы меняем значение на путь ко 2-му изображению, заставляя другое изображение загружаться внутри элемента .
   2. Если это не так (значит, оно должно было уже измениться), мы меняем значение , возвращаясь к первоначальному пути изображения, каким он был изначально.

Добавление персонального приветственного сообщения

Далее мы добавим немного другого кода, чтобы изменить заголовок страницы на персонализированное приветственное сообщение, когда пользователь впервые зайдет на сайт. Это приветственное сообщение будет сохраняться, когда пользователь покинет сайт, а позже вернется — мы сохраним его с помощью Web Storage API. Мы также включим возможность изменить пользователя и, следовательно, приветственное сообщение, в любое время, когда это будет необходимо.

1. В , добавьте следующую строку перед элементом :

   <button>Change user</button>

2. В , добавьте следующий код в конец файла, точно так, как написано — он захватит ссылки на новую кнопку и заголовок, и сохранит их в переменные:

   var myButton = document.querySelector('button');
   var myHeading = document.querySelector('h1');

3. Затем добавьте блок  — мы могли бы назвать это кодом инициализации, поскольку он структурирует приложение при его первой загрузке:

   if(!localStorage.getItem('name')) {
     setUserName();
   } else {
     var storedName = localStorage.getItem('name');
     myHeading.textContent = 'Mozilla is cool, ' + storedName;
   }

   Этот блок сначала использует оператор отрицания (логическое НЕ, представленное в виде !) чтобы проверить, существуют ли данные в пункте . Если нет, то функция запускается для их создания. Если данные существуют (то есть, пользователь установил его во время предыдущего посещения), мы извлекаем сохраненное имя, с помощью  и устанавливаем заголовку в виде строки плюс имя пользователя, так же, как мы делали внутри .

4. Наконец, установите обработчик события на кнопку. При нажатии кнопки запускается функция . Это позволяет пользователю установить новое имя, всякий раз, когда он захочет, нажатием кнопки:

   myButton.onclick = function() {
     setUserName();
   }
   

Теперь, когда вы впервые заходите на сайт, он попросит вас указать имя пользователя, а затем предоставит вам персональное сообщение. Вы можете изменить имя в любое время, нажав на кнопку. В качестве дополнительного бонуса, поскольку имя хранится внутри localStorage, оно сохраняется после закрытия сайта, сохраняя при этом персонализированное сообщение при следующем открытии сайта!

Пример «hello world»

Предыдущий раздел звучит очень многообещающе, и это на самом деле так — JavaScript является одной из самых перспективных веб-технологий, и когда вы освоитесь и начнёте использовать его, ваши веб-сайты перейдут в новое измерение мощи и креативности.

Тем не менее, с JavaScript немного более сложно освоиться, чем с HTML и CSS. Вам придется начать с малого, продолжая изучение небольшими шагами. Для начала мы покажем вам, как добавить некоторые основы JavaScript на вашу страницу, чтобы создать «hello world!» пример (стандарт в начальных примерах программирования).

Важно: Если вы не следили за остальным нашим курсом, скачайте этот пример кода и используйте его в качестве стартовой точки

1. Для начала перейдите на ваш тестовый сайт и создайте папку с именем ‘scripts’ (без кавычек). Затем, в новой папке скриптов, которую вы только что создали, создайте новый файл с именем . Сохраните его в вашей папке .
2. Далее перейдите в ваш файл и введите следующий элемент на новой строке прямо перед закрывающим тегом :

   <script src="scripts/main.js"></script>

3. Теперь добавьте следующий код в файл :

   var myHeading = document.querySelector('h1');
   myHeading.textContent = 'Hello world!';

4. Теперь убедитесь, что HTML и JavaScript файлы сохранены, и загрузите в браузере. Вы должны увидеть что-то вроде этого:

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

Что произошло?

Итак, ваш заголовок текста был изменен на «Hello world!» с помощью JavaScript. Мы сделали это с помощью вызова функции , захватив ссылку на наш заголовок и сохранив её в переменной, названной . Это очень похоже на то, что мы делали в CSS с помощью селекторов. Если вы хотите что-то сделать с элементом, то для начала вам нужно его выбрать.

После этого, вы устанавливаете значение переменной в свойство (которое представляет собой контент заголовка) «Hello world!».

Функции == Комментарии

Функции должны быть короткими и делать только что-то одно. Если это что-то большое, имеет смысл разбить функцию на несколько меньших. Иногда следовать этому правилу непросто, но это определённо хорошее правило.

Небольшие функции не только облегчают тестирование и отладку – само существование таких функций выполняет роль хороших комментариев!

Например, сравним ниже две функции . Каждая из них выводит простое число до .

Первый вариант использует метку :

Второй вариант использует дополнительную функцию для проверки на простое:

Второй вариант легче для понимания, не правда ли? Вместо куска кода мы видим название действия (). Иногда разработчики называют такой код самодокументируемым.

Таким образом, допустимо создавать функции, даже если мы не планируем повторно использовать их. Такие функции структурируют код и делают его более понятным.

Курсы по JavaScript в 3 уровнях от htmlacademy

• «Уровень 1»: Веб-разработка интерфейсов на ;
• «Уровень 2»: Архитектура клиентских приложений на ;
• «Уровень 3»: React. Сложные клиентские приложения на .

Чему научат:

• знать и работать по актуальным стандартам качества;
• понимать полный цикл разработки;
• соблюдать дедлайн и планировать свое время;
• работать с API, данными;
• создавать правильную инфраструктуру проектов и данных;
• работать в объектно-ориентированном программировании (ООП);
• писать компоненты многоразового использования;
• использовать датабиндинг;
• работать с протоколами шифрования.

Впечатления: если вы совсем новичок, то пройдите на сайте htmlacademy интерактивный курс по JavaScript. Там вы узнаете базовую информацию о языке. После этого записывайтесь на первый уровень. Его хватит, чтобы начать собственный несложный проект. Но если вы хотите сразу перейти к работе в компании, то вам понадобится завершить все 3 программы и стать супер-профи.

Что такое JavaScript?

Изначально JavaScript был создан, чтобы «сделать веб-страницы живыми».

Программы на этом языке называются скриптами. Они могут встраиваться в HTML и выполняться автоматически при загрузке веб-страницы.

Скрипты распространяются и выполняются, как простой текст. Им не нужна специальная подготовка или компиляция для запуска.

Это отличает JavaScript от другого языка – Java.

Почему JavaScript?

Когда JavaScript создавался, у него было другое имя – «LiveScript». Однако, язык Java был очень популярен в то время, и было решено, что позиционирование JavaScript как «младшего брата» Java будет полезно.

Со временем JavaScript стал полностью независимым языком со своей собственной спецификацией, называющейся ECMAScript, и сейчас не имеет никакого отношения к Java.

Сегодня JavaScript может выполняться не только в браузере, но и на сервере или на любом другом устройстве, которое имеет специальную программу, называющуюся «движком» JavaScript.

У браузера есть собственный движок, который иногда называют «виртуальная машина JavaScript».

Разные движки имеют разные «кодовые имена». Например:

• V8 – в Chrome и Opera.
• SpiderMonkey – в Firefox.
• …Ещё есть «Trident» и «Chakra» для разных версий IE, «ChakraCore» для Microsoft Edge, «Nitro» и «SquirrelFish» для Safari и т.д.

Эти названия полезно знать, так как они часто используются в статьях для разработчиков. Мы тоже будем их использовать. Например, если «функциональность X поддерживается V8», тогда «Х», скорее всего, работает в Chrome и Opera.

Как работают движки?

Движки сложны. Но основы понять легко.

1. Движок (встроенный, если это браузер) читает («парсит») текст скрипта.
2. Затем он преобразует («компилирует») скрипт в машинный язык.
3. После этого машинный код запускается и работает достаточно быстро.

Движок применяет оптимизации на каждом этапе. Он даже просматривает скомпилированный скрипт во время его работы, анализируя проходящие через него данные, и применяет оптимизации к машинному коду, полагаясь на полученные знания. В результате скрипты работают очень быстро.

Продвинутые темы

Разработка через тестирование

Test-Driven Development, или TDD — это такая техника разработки, при которой создание ПО разбивается на множество небольших циклов: сначала пишутся тесты, которые покрывают желаемое изменение, затем пишется код, который эти тесты проходит. После этого производится рефакторинг кода, при необходимости пишутся новые тесты. Если какие-то тесты участок кода не проходит, это исправляется.

В случае с JavaScript советуем обратить внимание на фреймворки Jasmine, Chai и Mocha. Кстати, на нашем сайте есть цикл статей, посвящённый тестированию фронтенда — может пригодиться

Веб-сокеты

Этой теме стоит уделить особое внимание, поскольку веб-сокеты очень полезны. Протокол WebSocket, в отличие от HTTP, позволяет работать с двунаправленным потоком данных, что делает эту технологию уникальной. Самой распространённой реализацией является библиотека socket.io — разобраться с ней и применить полученные навыки на практике поможет наше руководство по созданию многопользовательской браузерной игры

ES6, Babel, Webpack

Сейчас основным стандартом является ES6 (ES2015), но уже принят ES2016, а ES2017 находится в разработке, поэтому нужно всегда быть в курсе обновлений и использовать их. Проблемы совместимости решаются всего парой инструментов:

• Babel — компилирует ES6-код (скоро появится поддержка ES2016) в ES5, который поддерживается всеми браузерами. Он даже умеет компилировать JSX/React-компоненты, что делает его незаменимым для любого веб-разработчика;
• Webpack — собирает все ваши исходные файлы (картинки, шрифты, таблицы стилей, JS-файлы и т.д.) в единый граф зависимостей. Он не пригодится при создании маленьких приложений, но при работе с React его помощь неоценима.

React и Redux

React — библиотека для создания пользовательских интерфейсов. Она была создана компанией Facebook в 2013 году и достаточно быстро стала популярной среди разработчиков. Вам стоит прочитать эти 9 советов, а затем разобрать написание простого приложения, чтобы понять, как работает React и для чего он нужен. React пригодится не только для фронтенд-разработки: Facebook выпустила варианты фреймворка для мобильной (React Native) и VR-разработки (React VR).

Redux — контейнер предсказуемых состояний, обычно используемый в связке с React. Его можно использовать для сокращения кода благодаря модульности. Особенно полезен в многопользовательских приложениях, работающих в режиме реального времени, например, в играх.

Аутентификация, сессии, cookies

Вам также стоит разобраться, как приложения взаимодействуют с пользователями, обрабатывают вход в учётную запись и выход из неё, выдают привилегии. Для отслеживания личности пользователя в течение сессии используются cookies — небольшие текстовые файлы, передаваемые сервером браузеру в ответе на HTTP-запрос. А для обеспечения связи базы данных и страничек авторизации можно использовать библиотеку express-session.

Веб-безопасность

И, наконец, стоит обратить внимание на безопасность

Важно изучить как методы атак, так и способы защиты от них

Вы можете оценить уровень своих знаний и определить, действительно ли вам подходит JavaScript — для этого пройдите специальный тест.