Основы javascript для начинающих разработчиков / блог компании ruvds.com / хабр

Точка с запятой

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

Так тоже будет работать:

В этом случае JavaScript интерпретирует перенос строки как «неявную» точку с запятой. Это называется .

В большинстве случаев новая строка подразумевает точку с запятой. Но «в большинстве случаев» не значит «всегда»!

В некоторых ситуациях новая строка всё же не означает точку с запятой. Например:

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

Но есть ситуации, где JavaScript «забывает» вставить точку с запятой там, где она нужна.

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

Пример ошибки

Если вы хотите увидеть конкретный пример такой ошибки, обратите внимание на этот код:

Пока нет необходимости знать значение скобок и . Мы изучим их позже. Пока что просто запомните результат выполнения этого кода: выводится , а затем .

А теперь добавим перед кодом и не поставим в конце точку с запятой:

Теперь, если запустить код, выведется только первый , а затем мы получим ошибку!

Всё исправится, если мы поставим точку с запятой после :

Теперь мы получим сообщение «Теперь всё в порядке», следом за которым будут и .

В первом примере без точки с запятой возникает ошибка, потому что JavaScript не вставляет точку с запятой перед квадратными скобками . И поэтому код в первом примере выполняется, как одна инструкция. Вот как движок видит его:

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

Мы рекомендуем ставить точку с запятой между инструкциями, даже если они отделены переносами строк. Это правило широко используется в сообществе разработчиков. Стоит отметить ещё раз – в большинстве случаев можно не ставить точку с запятой. Но безопаснее, особенно для новичка, ставить её.

С чего начать изучение JavaScript и сколько времени это займет?

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

Структура кода (как составляется программа, с чего начинается, в какой последовательности задаются команды и т.д.).
Переменные (что это такое, для чего нужны, как задаются и используются в скриптах).
Типы данных, например: число, строка, логический тип, и преобразование типов.
Операторы, например, как производится сложение. Приоритет операторов (какие действия выполняются в первую очередь, какие – во вторую и т.д.). Бывают операторы сравнения, условные операторы, логические.
Выучить, как использовать циклы (что это такое, для чего нужны, как их задавать). Говоря простыми словами, циклы позволяют производить одну и ту же операцию несколько раз (пока не наступит условие, которое завершит цикл).
Функции.
Объекты и их свойства.
Прототипы, наследование.
Классы и наследование классов.
Интерфейсные события (обработка движения курсора, кликов мышки, нажатия кнопок на клавиатуре).
Программирование элементов интерфейса: кнопок, форм и других.
Выучить, как писать асинхронный код на JavaScript.
Отладка программ в браузере, написанных на JS.
Обработка ошибок.
Качество кода: как писать программу правильно, чтобы в ней было легко и просто ориентироваться как автору, так и другому разработчику.

Изучить основы можно самостоятельно, например, пользуясь самоучителем Learn.javascript.ru или Html5css.ru. На втором сайте курс интерактивный. Можно прямо в браузере смотреть пример кода и как он работает (какие события обрабатывает и как).

Выучить простейшие азы можно за срок от 2-3 недель до 1,5 месяцев в зависимости от времени, которое вы сможете уделять программированию каждый день. Далее вам потребуется более глубоко погружаться в предметную область, о чем поговорим ниже.

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

Рефакторинг кода на JavaScript

Мартин Фаулер

«Рефакторинг кода на JavaScript»

Мартин Фаулер вряд ли нуждается в особом представлении. Он написал с десяток книг, где поделился богатым опытом написания качественного кода. Одна из последних его работ — «Рефакторинг кода на JavaScript».

Автор на примерах разбирает проблемные места и объясняет, как улучшить код. В результате читатель буквально слушает историю опытного коллеги и может сразу всё проверить на практике.

Книга читается легко, можно читать всё по порядку или отдельные главы

Совсем новичкам книга не подойдёт: перед прочтением важно разобраться с основными возможностями языка JavaScript

Что такое 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.

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

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

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

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

Секреты JavaScript ниндзя

Джон Резиг, Блэр Либо

«Секреты JavaScript ниндзя»

Изучение JavaScript порой вводит в ступор даже разработчиков с опытом. При этом разобраться с основами языка обычно несложно — трудней понять нюансы и особенности. Например, замыкания, объекты высшего порядка, асинхронное выполнение кода и ряд других тем могут оказаться очень сложными для новичков. Разобраться с этими вопросами на реальных примерах поможет книга «Секреты JavaScript ниндзя».

Книга ориентирована на опытных JavaScript-программистов, которые хотят прокачать свои навыки

В книге есть главы с разбором синтаксиса, но основное внимание уделено практическому решению задач, тестированию кода, работе Event Loop и другим прикладным задачам. К концу 2020 года большая часть информации в книге остаётся актуальной, хотя некоторые главы и устарели

Skillbox

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

Полугодовой профессиональный курс по JS рекомендован начинающим фронтенд-разработчикам и юзерам, только входящим в IT. В сотрудничестве с наставниками студенты изучат javascript и экосистему: разберут синтаксис, сферы применения, систему контроля версий Git, пакеты npm и отладку в браузере. На теоретических и практических занятиях слушатели узнают, как использовать разные подходы к программированию, применять JS для взаимодействия с сервером, работать с DOM и событиями. Для последующего трудоустройства пригодятся и уроки по совершенствованию soft skills будущих профи. Завершится обучение выполнением дипломной работы – созданием браузерной космической игры.

Вышеназванный онлайн-курс можно покорять как отдельно, так и в составе иных комплексов. К таковым относятся:

Годовая fullstack-программа,
Универсальный пакет по веб-разработке.

И предложения по frontend:

6-месячный интенсив,
2-летний кейс «С нуля до PRO»,
Вариант для продвинутых юзеров.

А получить первое впечатление помогут бесплатные тематические вебинары, которые доступны на сайте сервиса.

Зачем изучать JavaScript?

JavaScript является одним из 3 языков все веб-разработчики должны узнать:

1. HTML Определение содержимого веб-страниц

2. CSS Указание макета веб-страниц

3. JavaScript Программирование поведения веб-страниц

Веб-страницы не являются единственным местом, где используется JavaScript.
Многие настольные и серверные программы используют JavaScript. Node. js является наиболее известным.
Некоторые базы данных, такие как MongoDB и CouchDB, также используют JavaScript в качестве языка программирования.

Ты знала?

JavaScript и Java-это совершенно разные языки, как в концепции, так и в дизайне.

JavaScript был изобретен Брендан Айх в 1995, и стал стандартом ECMA в 1997.ECMA-262 является официальным названием стандарта. ECMAScript является официальным названием языка.

Вы можете прочитать больше о различных версиях JavaScript в версии главы JS.

SkillFactory

Подготовка IT-профессионалов – сфера деятельности образовательного центра Skillfactory. Предлагаемые контент и методики позволяют успешно обучаться и новичкам, и специалистам, решившим сменить профессию, и экспертам, нуждающимся в прокачке «скиллов».

Овладеть JS смогут будущие фронтенд-разработчики. Тематическая онлайн-программа рассчитана на 7 месяцев, 2 из которых посвящены предмету обзора. Слушатели рассмотрят разделы «Синтаксис языка», «Объекты, EventLoop», «Модель DOM и сборщики (Webpack)», «ООП», «Типизация», решат 76 задач и прокачают навыки на специальном тренажере. Результаты будут продемонстрированы при выполнении итогового проекта модуля – реализации на веб-сайте слайдера с использованием чистого javascript.

LoftSchool

На сайте дистанционной школы Loftschool размещены десятки онлайн-курсов, благодаря которым посетители ресурса могут получить ознакомительную информацию и сделать своеобразный вклад в будущее.

Изучаемая тема нашла отражение в профессиональных IT-кейсах: «frontend» и «веб-программирование». В обоих случаях на JS отводится существенная часть уроков. Под кураторством преподавателей, слушая лекции и выполняя домашние задания, учащиеся пройдут путь от знакомства с синтаксисом до нюансов работы с фреймворками. Выпускники получат готовое портфолио и помощь в трудоустройстве.

Также в школе предлагают пройти интенсивный курс по JS для опытных веб-разработчиков.

Бесплатный курс

В авторском блоге собраны разнообразные материалы по веб-разработке

Новичкам, интересующимся JS-перспективами, стоит обратить внимание на видеокурс для начинающих, на счету которого полтора миллиона просмотров.

По словам наставника, юзеры выяснят, чем примечателен язык и в чем его преимущества. Ученики познакомятся с переменными, типами данных, числами, BigInt, строками, функциями, массивами, объектами

После покорения базы подписчиков ждет освоение асинхронности, Promise, async await, DOM, причем с использованием только актуального синтаксиса. О качестве видеоролика можно судить не только по цифрам просмотров и многочисленным комментариям, но и по соотношению лайков и дизлайков.

itProger

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

В профильной подборке 18 роликов, из которых неофиты узнают, как писать код и управлять DOM-структурой веб-сайта, рассмотрят концепции и изучат работу с событиями и данными. В заключение составителями цикла представлены анонсы онлайн-курсов на основном ресурсе сервиса.

Фрилансер по жизни

Опытный IT-специалист создал канал, где дает советы по организации занятости на фрилансе и делится профессиональными тонкостями. Заявленная тема раскрывается в бесплатном мини-курсе из 14 уроков.

Автор назвал яваскрипт мозгами и нервной системой сайта. Рассказывая о возможностях инструмента, мастер продемонстрировал его использование в работе над интерактивностью веб-страниц, созданием мобильных приложений и даже бекэндом.

EasyCode

Ютуб-канал школы, которая специализируется на подготовке «айтишников», предлагает образовательные видеопрограммы, основанные на практике.

Джаваскрипт – одно из приоритетных направлений деятельности сервиса: экспертами школы был разработан детальный курс «Базовый», с которым юзеры освоят материал от знакомства со стандартом ES6 до нюансов Async/Await.

Coursera

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

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

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

— Онлайн курсы frontend-разработки

Таблицы совместимости

JavaScript – это развивающийся язык, в который постоянно добавляется что-то новое.

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

http://caniuse.com – таблицы с информацией о поддержке по каждой возможности языка. Например, чтобы узнать, какие движки поддерживают современные криптографические функции, посетите: .
https://kangax.github.io/compat-table – таблица с возможностями языка и движками, которые их поддерживают и не поддерживают.

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

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

Присваивание

Давайте отметим, что в таблице приоритетов также есть оператор присваивания . У него один из самых низких приоритетов: .

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

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

Большинство операторов в JavaScript возвращают значение. Для некоторых это очевидно, например сложение или умножение . Но и оператор присваивания не является исключением.

Вызов записывает в и возвращает его.

Благодаря этому присваивание можно использовать как часть более сложного выражения:

В примере выше результатом будет значение, которое присваивается переменной (то есть ). Потом оно используется для дальнейших вычислений.

Забавное применение присваивания, не так ли? Нам нужно понимать, как это работает, потому что иногда это можно увидеть в JavaScript-библиотеках.

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

Рассмотрим ещё одну интересную возможность: цепочку присваиваний.

Такое присваивание работает справа налево. Сначала вычисляется самое правое выражение , и затем результат присваивается переменным слева: , и . В конце у всех переменных будет одно значение.

Опять-таки, чтобы код читался легче, лучше разделять подобные конструкции на несколько строчек:

Польза от такого стиля особенно ощущается при быстром просмотре кода.

Зачем изучать JavaScript?

JavaScript — это одна из 3 технологий, которые должны выучить и знать все веб-разработчики:

1. HTML для определения содержания веб-страниц

2. CSS для создания макета веб-страниц

3. JavaScript для программирования поведения веб-страниц

Примечание. Веб-страницы — это не единственное применение, где используется JavaScript. Многие настольные и серверные программы используют JavaScript. Платформа Node.js является самым известным приложением для выполнения высокопроизводительных сетевых приложений. Некоторые базы данных, такие как MongoDB и CouchDB, также используют JavaScript в качестве языка программирования.

Необходимо знать, что…

JavaScript и Java — это абсолютно разные языки программирования, как по концепции,
так и по дизайну.

Язык JavaScript был создан Бренданом Айхом в 1995 году, который стал стандартом ECMA в 1997 году.
ECMA-262 является официальным названием стандарта. ECMAScript — это официальное название языка.

Вы можете прочитать больше о разных версиях JavaScript в разделе JS Версии.

Оператор typeof

Оператор возвращает тип аргумента. Это полезно, когда мы хотим обрабатывать значения различных типов по-разному или просто хотим сделать проверку.

У него есть две синтаксические формы:

Синтаксис оператора: .
Синтаксис функции: .

Другими словами, он работает со скобками или без скобок. Результат одинаковый.

Вызов возвращает строку с именем типа:

Последние три строки нуждаются в пояснении:

— это встроенный объект, который предоставляет математические операции и константы. Мы рассмотрим его подробнее в главе Числа. Здесь он служит лишь примером объекта.
Результатом вызова является . Это официально признанная ошибка в , ведущая начало с времён создания JavaScript и сохранённая для совместимости. Конечно, не является объектом. Это специальное значение с отдельным типом.
Вызов возвращает , потому что является функцией. Мы изучим функции в следующих главах, где заодно увидим, что в JavaScript нет специального типа «функция». Функции относятся к объектному типу. Но обрабатывает их особым образом, возвращая . Так тоже повелось от создания JavaScript. Формально это неверно, но может быть удобным на практике.

Логическое И (&&)

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

Примеры: