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

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

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

Общая информация

Многие люди, даже не имеющие никакого отношения к IT-сфере, слышали слово Java . Революционный независимый от платформ язык, на котором активно пишут приложения для мобильных систем. Он был разработан перспективной компанией Sun , которая затем перешла «под крыло » Oracle . Но ни та, ни другая компании не имеют никакого отношения к JavaScript :

От Sun потребовалось лишь разрешение на использование части названия. Удивительно, но JavaScript вообще не принадлежит ни одной фирме.

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

• Объектно-ориентированность. Выполнение программы представляет собой взаимодействие объектов;
• Приведение типов данных проводится автоматически;
• Функции выступают объектами базового класса. Эта особенность делает JavaScript похожим на многие функциональные языки программирования, такие как Lisp и Haskell ;
• Автоматическая очистка памяти. Так называемая, сборка мусора делает JavaScript похожим на C# или Java .

Если говорить о сути применения JavaScript , то этот язык позволяет «оживлять » неподвижные страницы сайтов с помощью кода, который можно запустить на исполнение (так называемые, скрипты ). То есть, можно провести аналогию с мультфильмами, где html и css – это прорисованные герои, а JavaScript – это то, что заставляет их двигаться.

Если говорить о синтаксисе JavaScript , то ему присущи следующие особенности:

• Регистр важен. Функции с названиями func() и Func() – совершенно разные;
• После операторов необходимо ставить точку с запятой;
• Встроенные объекты и операции;
• Пробелы не учитываются. Можно использовать сколько угодно отступов, а также переводов строки, чтобы оформить свой код.

Простейший код на JavaScript выглядит следующим образом:

Сфера применения

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

• Разработка веб-приложений. Хотите установить простой счетчик, организовать передачу данных между формами или поместить на своем сайте игру? Тогда JavaScript выступит верным помощником в этом деле;
• «Активное участие» в AJAX . Эта технология позволила значительно ускорить работу приложений, осуществляя обмен данными с сервером в «фоновом » режиме:

• Операционные системы. Возможно, кто-то не знал, но Windows , Linux и Mac имеют своих браузерных конкурентов, львиная доля кода которых написана на JavaScript ;
• Мобильные приложения;
• Сфера обучения. Любая программистская специальность в университете включает в себя изучение JavaScript в том или ином объеме. Это обусловлено тем, что язык изначально разрабатывался для не очень сильных программистов. Уроки JavaScript логически вплетаются в базовый курс HTML , поэтому освоение проходит достаточно просто.

Преимущества и недостатки

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

• Необходимость обеспечивать кроссбраузерность. Раз уж JavaScript выступает как интернет-технология, то приходится мириться с правилами, которые устанавливает всемирная паутина. Код должен корректно выполняться во всех, или хотя бы самых популярных, браузерах;
• Система наследования в языке вызывает трудности в понимании происходящего. В JavaScript реализовано наследование, основанное на прототипах. Люди, изучавшие другие объектно-ориентированные языки программирования, привыкли к привычному «класс потомок наследует родительский класс ». Но в JavaScript такими вещами занимаются непосредственно объекты, а это не укладывается в голове;
• Отсутствует стандартная библиотека. JavaScript не предоставляет никаких возможностей для работы с файлами, потоками ввода-вывода и прочими полезными вещами;
• Синтаксис в целом затрудняет понимание. Красота кода – явно не конёк JavaScript , но главное правило программистов соблюдено: «Работает? Не трожь! ».

Теперь стоит отметить некоторые преимущества

• JavaScript предоставляет большое количество возможностей для решения самых разнообразных задач. Гибкость языка позволяет использовать множество шаблонов программирования применительно к конкретным условиям. Изобретательный ум получит настоящее удовольствие;
• Популярность JavaScript открывает перед программистом немалое количество готовых библиотек, которые позволяют значительно упростить написание кода и нивелировать несовершенства синтаксиса;
• Применение во многих областях. Широкие возможности JavaScript дают программистам шанс попробовать себя в качестве разработчика самых разнообразных приложений, а это, безусловно, подогревает интерес к профессиональной деятельности.

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

Для тех, кто хочет изучать

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

• Прежде всего, HTML . Нельзя начинать делать что-либо для интернета без основы основ. Каскадные таблицы стилей (CSS ) также очень сильно пригодятся;
• Использовать новую литературу. Программирование – это не физика, законы которой нерушимы, а новые учебные пособия – это урезанные старые. IT-технологии постоянно развиваются, и не стоит пренебрегать полезными обновлениями;
• Стараться самостоятельно писать все участки программы. Если что-то ну совсем не получается – можно позаимствовать чужой код, но лишь предварительно уяснив для себя каждую строчку;
• Отладка – ваш верный друг. Быстро находить ошибки – один из важнейших моментов в программировании;
• Не игнорируйте нормы форматирования. Конечно, код не станет лучше или хуже от разного количества отступов и пробелов, но легкость чтения и понимания программистом – тоже немаловажный момент. Код, приведенный ниже? очень трудно воспринимается, особенно если вы не его

• Имена переменных должны иметь лексическое значение. В процессе написания простых программ это кажется вовсе не важным, но когда количество строк кода переваливает за тысячу – все черти ломают ноги;

Адаптированный перевод статьи «Full-Stack JavaScript in Six Weeks: A Curriculum Guide»

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

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

Почему JavaScript?

Стоит отметить открытость языка - компании, обычно соперничающие друг с другом, сотрудничают с целью развития JavaScript. Язык очень гибок и подойдёт сторонникам как объектно-ориентированного, так и функционального подхода. Огромное количество библиотек и фреймворков позволяет с лёгкостью решать любые типы задач, а серверная платформа Node.js даёт возможность использовать язык не только в браузере, но и в консоли. Вы даже можете писать настольные и мобильные приложения: первые - при помощи фреймворка Electron, а вторые - на NativeScript или React Native.

Основы

Сперва необходимо изучить основные понятия JavaScript, веб-разработки и программирования в целом:

• объектно-ориентированный JS - конструкторы и фабрики, наследование;
• функциональный JS - функции высшего порядка, замыкания, рекурсия;
• спецификации тестов Jasmine;
• основы HTML, CSS и jQuery.

Git

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

• создание и перемещение файлов в каталогах;
• инициализация и коммиты в Git;
• настройка репозиториев в GitHub.

Алгоритмы и структуры данных

Затем стоит изучить алгоритмы (в частности, понятие сложности алгоритмов), а также базовые структуры данных: связные списки, очереди, стеки, двоичные деревья поиска и хэш-таблицы. В этом вам поможет .

Бэкенд

Node.js

10 лет назад JavaScript можно было использовать только для фронтенд-разработки. Теперь благодаря Node.js одним «фронтом» дело не ограничивается. Node - это просто среда для выполнения JS-кода на стороне сервера, поэтому вам не придётся изучать новый синтаксис, но понадобится импортировать и экспортировать файлы, разбивать код на модули и использовать менеджер пакетов npm.

Серверы, HTTP, Express.js

После изучения Node стоит продолжить знакомство с бэкенд-разработкой и разобраться в серверах и маршрутизации. Можно начать с портов и протоколов с акцентом на HTTP, а потом заняться Express - Node-библиотекой для обработки запросов.

Асинхронный JavaScript

Базы данных, схемы, модели и ORM

Базы данных - один из важнейших элементов веб-разработки. Если вашему приложению нужно загружать или хранить какие-либо данные, не теряющиеся при обновлении страницы, придётся использовать БД. Нужно научиться различать реляционные и нереляционные базы данных и разобраться в типах связей. Затем и познакомиться с разными . Умение работать с ORM тоже не будет лишним.

Фронтенд

HTML и CSS

HTML и CSS - это основа основ для любого веб-разработчика. Вам не обязательно знать их в совершенстве, но разбираться в них вы должны. Также можно изучить какую-нибудь популярную библиотеку (например, Bootstrap) и CSS-препроцессор вроде Sass - он поможет сделать CSS похожим на обычный код. Для упрощения работы с HTML можно выбрать один из популярных шаблонизаторов, например, pug.

jQuery и манипуляция DOM

Создав внешний облик страницы при помощи HTML и CSS, вы будете использовать и библиотеку jQuery для управления DOM. Многие считают, что jQuery бесполезна и её скоро заменят Angular и React, но она безумно популярна, и поэтому её стоит знать. Кроме того, однажды вы попадёте в ситуацию, когда забивать гвозди React-микроскопом вам будет неудобно, и тогда на помощь вам придёт лёгкая jQuery.

Инструменты разработчика Chrome

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

AJAX

Если вы хотите, чтобы приложение не перезагружало страницы после каждой операции с базой данных, вам точно понадобится AJAX - он отправляет фоновые асинхронные HTTP-запросы, ответы на которые обновляют лишь часть отображения. Работать с AJAX можно через jQuery при помощи метода.ajax .

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

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

Учитывая эти аспекты, начнем…

Что такое FizzBizz тест

FizzBizz - как правило, небольшой тест, направленный на отсеивание неопытных разработчиков. Я думаю, вы будете удивленны как много javascript разработчиков не умеют писать такие тесты.

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

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

Пример классического FizzBizz теста:

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

For (var i = 1; i <= 100; i++) { if (i % 15 == 0) { console.log("FizzBuzz"); } if (i % 3 == 0) { console.log("Fizz"); } if (i % 5 == 0) { console.log("Buzz"); } }

Разница между == и ===

Вы, наверняка, знакомы с обоими операторами сравнения. Тем не менее, а знаете ли в чем точно отличаются эти операторы? Ваш Javascript Linter требует от вас применения оператора ===, задумывались почему?

Не сравнивает типы операндов, вместо этого он приводит их к одному типу. Такая операция имеет негативную репутацию.

Console.log(24 == "24"); // true

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

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

Тот же самый пример, но с оператором ===

Console.log(24 === "24"); // false

В ответ мы получаем false , так как операнды разного типа, один из них целочисленного типа, а второй строкового.

Как выбирать элементы DOM без дополнительных библиотек

Наверняка вы знакомы с тем, как сделать выборку элементов при помощи jQuery, но сможете ли вы сделать тоже самое, но уже без помощи этой библиотеки?

Я имею ввиду не просто выбрать элемент с определенным ID или набором классов, я говорю о выражениях для поиска элементов при помощи jQuery.

Существует несколько нативных методов для поиска элементов в DOM, которые ни чем не уступают jQuery. Мы можем также использовать селекторы вида first-child , last-child и т.д.

Познакомимся с некоторыми из этих методов

• document.getElementById - классический метод для поиска элементов по их ID.
• document.getElementsByClassName - выборка элементов по значению поля className
• document.querySelector - отличный метод, который практически полностью заменяет селектор $() от jQuery, но он уже включен в Javascript. Единственное отличие заключается в том, что он возвращает только первый найденный элемент.
• document.querySelectorAll - аналог предыдущего метода, но возвращает массив найденных элементов.
• document.getElementsByTagName - этот метод поможет вам выбрать элементы по имени тега. Если вам потребуется найти все div элементы, то вам нужен именно этот метод.

Хочу также отметить, что методы querySelector и querySelectorAll можно использовать не только на всем документе, но и на отдельных элементов, то есть выборку вы можете делать в пределах одного родительского элемента.

В документации от mozilla вы найдете полное описание этих методов.

Поднятие объявлений переменных и функций

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

Поэтому для удобства чтения кода возьмите себе за правило ВСЕГДА объявляйте переменные в начале области видимости. Если же вы укажите ‘use strict’ в верху скрипта или функции, то при обращении к необъявленной переменной вы получите ошибку.

Большинство инструментов для проверки стиля кода, как Jshint, укажут вам на ошибку если вы не использовали ‘use strict’ , исходя из этого, если вы стараетесь писать хороший код, то вам в любом случае не получится использовать переменные до их объявления. Как всегда, при возникновении вопросов, обращайтесь к документации от mozilla, там вы всегда найдете полное и исчерпывающее описание вашей проблемы.

Использование инструментов разработчика в браузере

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

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

Научившись применять инструменты разработчика в таких браузерах как Chrome, Firefox и в последних версиях Internet Explorer, вы сможете отладить работу вашего скрипта, измерить его быстродействие и найти места, где стоит улучшить алгоритм работы.

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

Команды консоли

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

Наверняка, вы уже знакомы с такими командами как console.log и console.error , но этим функционал консоли не ограничивается.

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

• console.log - используется для ведения журнала событий. Поддерживает форматирование.
• console.error - для журналирования ошибок в коде. Я использую эту команду при возникновении ошибок в AJAX запросах и в других потенциально опасных участках кода. Метод похож на предыдущий, но он выводит список вызовов стека.
• console.dir(object) - выводит форматированное содержание объекта. Как приавло, этот метод очень полезен при отладке кода.
• console.group(title) - позволяет создать группу сообщений в журнале с названием title. Таким образом вы можете группировать сообщения, например, по тому участку кода, где они генерируются.
• console.groupCollpased - аналог предыдущей команды за одним исключением. А именно, она выводит сообщения в свернутом виде.
• console.groupEnd - заканчивает ранее созданную группу.
• console.time(label) - позволяет отслеживать скорость работы участка в миллисекундах. Метод полезен при отлавливании потенциально сложных участков кода.
• console.timeEnd(label) - аналог метода groupEnd, но работает он в отношении console.time().
• copy(string) - в консоли Chrome и Firefox существует метод, позволяющий вам копировать содержимое string в буфер обмена. Очень полезный метод, попробуйте его применить.

Что именно содержится в this

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

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

Самой простой способ понять this , это принимать его за владельца или родителя метода. this всегда ссылается на родителя (parent), за исключением случаев, когда вы исползуете методы call , apply или bind .

В следующем примере this ссылается на объект window:

Function myFunction() { console.log(this === window); // true } myFunction();

Наверняка у вас возник вопрос, как же this может быть равно window , если обращаемся к нему в пределах метода? Если вы знаете ответ на этот вопрос, то отлично, в противном случае читайте дальше и я постараюсь объяснить.

При объявлении функции таким образом, она привязывается к глобальному объекту window . Помните, мы же сказали, что this ссылается на родителя метода?

Изменение значения this на полностью новый объект (не window):

Function myFunction() { console.log(this === window); // false } new myFunction();

Сторонники чистоты кода наверняка в шоке от такого примера. Мы просто ходим по верхушке айсберга с такими примерами. Как видите сами, значение this уже не равно window .

Почему так произошло?

Самое простое объяснение - во втором примере мы использовали ключевое слова new , этим самым мы создали новую область видимости и новый объект.

В следующем примере мы создадим фиктивный API для выгрузки данных из библиотеки от сервера. Мы создадим объект API с некоторыми методами.

При использовании слова new , контекст скрипта переходит от контекста window к API .

Var API = { getData: function() { console.log(this === window); // false console.log(this === API); // true } } ; API.getData();

Как видите значение this полностью задается способом вызова метода. Так как функция вызывается в пределах объекта API , её родителя, то значение this ссылается на объект API.

Помните, значение this изменяется. Оно изменяется в зависимости от способа вызова, но если вы используете метод bind , то значение this остается неизменным.

Более подробно с ключевым словом this в javascript вы можете познакомится в статье Quirksmode и документации от Mozilla.

‘use strict’;

Как мы уже указали ранее user strict используется для применения более строгой версии языка javascript. Эту директиву следуют применять во всех скриптах.

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

В документации от mozilla существует целая статья на эту тему, я настоятельно рекомендую вам познакомиться с ней.

Разные виды циклов

Вы будете удивлены, но я встречал огромное количество разработчиков, которые не знали как правильно использовать цикл for и абсолютно не слышали о других типов циклов. А уметь применять цикл на массиве или объекте - очень важный навык для разработчика. Не существует четкой инструкции когда и какой применять тип цикла, но следует ориентироваться в этом вопросе. Наверняка вы знакомы с for и while, но как насчет других?

Список циклов в javascript:

• for..in
• for..of (добавлен в ES6)
• forEach
• while
• do..while

Цикл for

Абсолютно обязательный цикл, который необходимо знать и понимать. ОН выполняет свое тело при выполнении условия 2.

For (условие 1; условие 2; условие 3) { // Ваш код }

Условие 1 - выполняется один раз перед началом серии циклов. В большинстве случаев вы будете инициализировать здесь счетчик цикла. Этот пункт можно пропустить, если вы произвели инициализацию ранее.

Условие 2 - это условие применяется для определения продолжать цикл или нет. Вы, наверняка, будете здесь сравнивать ваш счетчик с размером массива. Если значение сравнения true, то цикл продолжается. Если вы прерываете цикл внутри при помощи break, то это условие можно пропустить.

Условие 3 - этот участок выполняется после каждой итерации, как правило именно здесь вы увеличиваете ваш счетчик.

Цикл for...in

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

Приведем пример.

Var person = { firstName: "Dwayne", lastName: "Charrington", age: 27, starSign: "Aquarius"} ; // The below loop will output: // "Dwayne" // "Charrington" // 27 // "Aquarius" for (var p in person) { if (person.hasOwnProperty(p)) { console.log(person[p]); } }

Цикл for...of

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

Этот цикл полная противоположность for...in , он перебирает значения полей и работает только с типами данных, которые поддерживают итерации, к которым Object не относится.

Var fruits = ["orange", "apple", "squash", "pear"]; for (var fruit of fruits) { console.log(fruit); }

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

Цикл forEach

Очередной тип цикла, который в своей глубине ничем не отличается от ранее перечисленных типов циклов.

Он работает только с массивами, не объектами. Он выгоден тем, что вам не приходится создавать дополнительные переменные, которые в итоге только загрязняют ваш код.\

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

Var fruits = ["apple", "banana", "orange", "grapes", "pear", "passionfruit"]; // The three values on the callback function are: // element - The element being traversed // index - The current index of the item in the array starting at 0 // array - The array being traversed (probably mostly irrelevant) fruits.forEach(function(element, index, array) { console.log(index, element); } );

Иногда вам нужно просто пройти по всем элементам массива и, возможно, внести в них некоторые изменения. Его поведение похоже на jQuery.each.

Один недостаток такого типа циклов - его нельзя прервать. Если вам требуется создать цикл по правилам ES5, то воспользуйтесь методом Array.every , познакомиться с которым вы можете в документации mozilla.

Цикл while

Цикл while аналогичен for , но он принимает только один параметр - само условие, по которому цикл определяет продолжать итерации или прекратить их.

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

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

Var i = 20; while (i--) { console.log(i); }

Цикл do...while

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

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

На этом разница не заканчивается. Цикл while обрабатывает условие до выполнения итерации, а do...while после.

Как всегда в документации от mozilla вы найдете подробное описание такого вида циклов.

Базовые методы и задачи

В javascript существуют базовые методы, о которых следует знать. В отношении работы с массивами и строками, javascript предлагает большой набор встроенных методов. Мы коснемся только массивов и строк, объекты оставим на потом.

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

Работа со строками

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

• String.replace(regexp | что заменить, на что заменить, callback) - позволяет заменить часть строки, допускается применение регулярных выражений.
• String.concat(сторока 1, строка 2...) - соединение нескольких строк в одну.
• String.indexOf(value) - метод позволяет найти порядковый номер символа искомой части строки, -1 - если строка не найдена
• String.slice(startIndex, endIndex) - возвращает участок строки от startIndex до endIndex
• String.split(разделитель, лимит) - разбивает строку на массив по символу разделителя, максимальной длиной лимит.
• String.subsctr(startIndex, length) - возвращает часть строки начиная с startIndex длиной length.
• String.toLowerCase - переводит все символы строки в нижний регистр
• String.toUpperCase - перевод все символы строки в верхний регистр
• String.trim - удаляет пробелы из начала и конца строки

Работа с массивами

Вам очень часто придется встречаться с массивами. Они отлично зарекомендовали себя как способ хранения данных. Эти методы точно стоит знать любому разработчику javascript, не следует искать их в google.

• Array.pop -возвращает последний элемент и удаляет его из массива.
• Array.shift - возвращает первый элемент и удаляет его из массива.
• Array.push(val1, val2) - добавляет одно или несколько значений в конец массива. Возвращает новую длину массива.
• Array.reverse - зеркально изменяет порядок элементов массива.
• Array.sort([функцияСравнения]) - позволяет сортировать массив при помощи собственной функции.
• Array.join(separator) - Возвращает строку, состоящую из элементов массива, разделенный символом separator (по-умолчанию - запятая).
• Array.indexOf(value) - возвращает индекс элемента в массиве, -1 если элемент не найден.

Это не полный список методов для работы с массивами. С другими вы можете ознакомится в документации от mozilla. Начиная с ES6 были добавлены очень интересные методы.

Разница между call и apply

Эти два метода разработчики путают довольно часто. Зачастую можно обойтись и без них, но они помогают вызывать методы и изменять значение this в ходе исполнения.

Разница между ними совсем небольшая, но она существует. При использовании метода call , вы можете задать бесконечное число аргументов, разделив их запятой.

При помощи метода apply вы можете передать аргументы в виде массива и изменить значение this .

Если вам нужно просто передать массив в качестве аргументов методу, то начиная с ES6 добавлен расширенный (spread) оператор. Он не позволяет изменять значение this . Познакомиться с ним вы сможете, как всегда в официальной документации от mozilla.

Пример call:

Function myFunc() { console.log(arguments); } myFunc.call(this, 1, 2, 3, 4, 5);

Пример apply:

Function myFunc() { console.log(arguments); } myFunc.call(null, );

Знакомство с библиотеками и фреймворками

На сегодня самыми заметными представителями javascript фреймворками являются AngularJS, React.js и Ember. Конечно существует еще целый ряд других.

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

Node.js

Вне сомнений Node.js занимает твердые позиции. Практически любой фронт-енд инструмент построен на node.js и использует npm (менеджер пакетов node), если с ним незнакомы, то настоятельно советую исправить это упущение. Так как node.js использует javascript, то изучить его не представляет особых трудностей для тех, кто уже знаком с этим языком. У вас больше времени уйдет на настройку пакетов node, чем на написание самого кода.

Лично я считаю, что с Node должен быть знаком каждый разработчик в 2015 году. Я не говорю о глубоком познании, достаточно уметь применять его для серверной разработки, прототипирования, тестирования и т.д.

Существует fork node.js под названием IO.js, на сегодняшний день они практически аналоги, да и в конце концов вы просто пишите на Javascript за исключением небольших отличий.

Тестирование

Когда-то мы совсем не тестировали javascript код, так как не считали это необходимым. Но скрипты становятся всё больше и больше благодаря AngularJS и Node.js.

Javascript развивается, а объемы скриптов увеличиваются и тестирование становится жизненно необходимым. Если вы не тестируете свой код, то вы поступаете неправильно. Мой любимый тестировщик - Karma. Существуют и другие, но именно этот зарекомендовал себя лучше всех при работе с AngularJS. А если он подходит для AngularJS, то он подходит и мне.

Инструменты

Быть javascript разработчиком в 2015 году означает не только отличное знание языка, но и большого числа инструментов для работы с ним.

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

Вот набор инструментов, о которых стоит помнить: Gulp, Webpack и BabelJS. Существует намного больше инструментов, но такие инструменты как Gulp и Grunt значительно помогают вам в разработке и управлении javascript приложениями.

Прошли те дни, когда вы просто скачивали javascript файл и добавляли его на свою страницу. Теперь мы используем менеджеры пакетов NPM или Bower.

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

Инструменты javascript идут рука об руку при разработке изоморфного Javascript (код, используемый как на стороне клиента, так и сервера). ECMAScript 6, он же ES6, он ESNext

Браузерам предстоит еще реализовать большую часть функционала ECMAScript 6. Но уже сегодня вы можете использовать новинки от ES6 при помощи компиляторов javascript. Познакомьтесь с новыми API и методами: строки, массивы и другие метода как WeakMaps, Символы и Классы. Следует всегда быть в курсе грядущих изменений.

Заключение

Я могу еще о многом рассказать. Судя по размерам этой статьи можно представить себе сколько всего надо знать javascript разработчику. Мы только коснулись верхушки айсберга. Не думайте, что эту статью стоит воспринимать в качестве руководства для разработчика. Это всего лишь мое личное видение проблемы.