Javascript - постоянно развивающийся язык, особенно сейчас, когда установлен ежегодный график выхода обновлений спецификаций ECMAScript. В связи с этим важность знания Javascript за пределами jQuery возрастает.
Конечно, в этой статье мы не сможем покрыть весь необходимый объем знаний. Наверняка, будут моменты, которые я пропустил, возможно, ошибся или наши с вами мнения в отношении необходимого набора знаний разойдутся.
Учитывая эти аспекты, начнем…
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 , так как операнды разного типа, один из них целочисленного типа, а второй строкового.
Наверняка вы знакомы с тем, как сделать выборку элементов при помощи jQuery, но сможете ли вы сделать тоже самое, но уже без помощи этой библиотеки?
Я имею ввиду не просто выбрать элемент с определенным ID или набором классов, я говорю о выражениях для поиска элементов при помощи jQuery.
Существует несколько нативных методов для поиска элементов в DOM, которые ни чем не уступают jQuery. Мы можем также использовать селекторы вида first-child , last-child и т.д.
Хочу также отметить, что методы querySelector и querySelectorAll можно использовать не только на всем документе, но и на отдельных элементов, то есть выборку вы можете делать в пределах одного родительского элемента.
В документации от mozilla вы найдете полное описание этих методов.
Javascript интересен тем, как он обрабатывает объявленные переменные и функции, все они автоматически поднимаются вверх области видимости. Таким образом, вы можете обратиться к ним до их объявления в области видимости (например, функции в javascript имеет собственную область видимости).
Поэтому для удобства чтения кода возьмите себе за правило ВСЕГДА объявляйте переменные в начале области видимости. Если же вы укажите ‘use strict’ в верху скрипта или функции, то при обращении к необъявленной переменной вы получите ошибку.
Большинство инструментов для проверки стиля кода, как Jshint, укажут вам на ошибку если вы не использовали ‘use strict’ , исходя из этого, если вы стараетесь писать хороший код, то вам в любом случае не получится использовать переменные до их объявления. Как всегда, при возникновении вопросов, обращайтесь к документации от mozilla, там вы всегда найдете полное и исчерпывающее описание вашей проблемы.
Чаще всего такие инструменты используются для отладки javascript скриптов, но этим их функционал не ограничивается. Например, вы сможете использовать точку останова, выполнить пошагово свой скрипт, заходя в каждую функцию при этом.
Эти инструменты оказывают незаменимую помощь, так как вы можете полностью отследить работу вашего приложения и найти проблемные участки.
Научившись применять инструменты разработчика в таких браузерах как Chrome, Firefox и в последних версиях Internet Explorer, вы сможете отладить работу вашего скрипта, измерить его быстродействие и найти места, где стоит улучшить алгоритм работы.
Никогда не пытайтесь дебажить код вслепую, сначала всегда проанализируйте его при помощи инструментов разработчика. Решение не существующих проблем - бесполезная трата времени.
Перейдем к следующему пункту в изучении инструментов разработчика. Как правило, все они предлагают консоль, в которой вы можете интерективно выполнять Javascript код.
Наверняка, вы уже знакомы с такими командами как console.log и console.error , но этим функционал консоли не ограничивается.
Хочу сразу отметить, что не все перечисленные команды будут работать во всех браузерах. Я постараюсь упоминать только те, которые работают в современных браузерах. Тем не менее, в качестве совета, скажу, что прежде чем применять их, постарайтесь проверить самостоятельно их работоспособность, чтобы за зря не нагромождать код.
В первую очередь это большой источник проблем для тех, кто полностью не понимает, что именно содержится за этим ключевым словом. А ошибиться в этом очень просто, так как его содержимое целиком и полностью зависит от структуры кода.
В традиционных языках программирования, 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:
Абсолютно обязательный цикл, который необходимо знать и понимать. ОН выполняет свое тело при выполнении условия 2.
For (условие 1; условие 2; условие 3) { // Ваш код }
Условие 1 - выполняется один раз перед началом серии циклов. В большинстве случаев вы будете инициализировать здесь счетчик цикла. Этот пункт можно пропустить, если вы произвели инициализацию ранее.
Условие 2 - это условие применяется для определения продолжать цикл или нет. Вы, наверняка, будете здесь сравнивать ваш счетчик с размером массива. Если значение сравнения true, то цикл продолжается. Если вы прерываете цикл внутри при помощи break, то это условие можно пропустить.
Условие 3 - этот участок выполняется после каждой итерации, как правило именно здесь вы увеличиваете ваш счетчик.
Следующий по важности тип цикла. С его помощью вы сможете пройти по всем полям класса.
Приведем пример.
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]); } }
Довольно новый тип цикла, был добавлен в ES6. В силу своей новизны поддерживается не всеми браузерами. Но при использовании определенных технологий, его вполне можно применять уже сегодня.
Этот цикл полная противоположность for...in , он перебирает значения полей и работает только с типами данных, которые поддерживают итерации, к которым Object не относится.
Var fruits = ["orange", "apple", "squash", "pear"]; for (var fruit of fruits) { console.log(fruit); }
Большой плюс этого типа цикла заключается в том, что нам больше не надо создавать указатель и следить за длиной массива, чтобы полностью пройти по его элементам.
Очередной тип цикла, который в своей глубине ничем не отличается от ранее перечисленных типов циклов.
Он работает только с массивами, не объектами. Он выгоден тем, что вам не приходится создавать дополнительные переменные, которые в итоге только загрязняют ваш код.\
Наверняка это самый ограниченный по возможностям тип цикла, но он имеет свои области применения о которых следуюет знать:
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 аналогичен for , но он принимает только один параметр - само условие, по которому цикл определяет продолжать итерации или прекратить их.
Хотя такой тип цикла считается самым быстрым, я считаю что этот момент довольно спорный. Я думаю, вы не будете спорить, что этот тип цикла не выглядит аккуратнее других, а его быстродействие может объясняться только простотой внутренней логики.
По опыту скажу, что наиболее быстрый вариант цикла while , это цикл с уменьшением счетчика, вы уменьшаете его на единицу пока не дойдете до нуля (что также оспоримо).
Var i = 20; while (i--) { console.log(i); }
Такой цикл встречается довольно редко, но познакомиться с ним все же стоит, чтобы понимать его работу.
Цикл while может не выполнить ни одной итерации. То есть если в качестве условия циклу вы передадите ложное значение, то ни одной итерации не будет выполнено. Цикл do...while гарантировано выполнит хотя бы одну операцию.
На этом разница не заканчивается. Цикл while обрабатывает условие до выполнения итерации, а do...while после.
Как всегда в документации от mozilla вы найдете подробное описание такого вида циклов.
В javascript существуют базовые методы, о которых следует знать. В отношении работы с массивами и строками, javascript предлагает большой набор встроенных методов. Мы коснемся только массивов и строк, объекты оставим на потом.
Если вас интересуют методы работы с другими типами данных, то смело обращайтесь к документации mozilla. Конечно, не следует знать все эти методы наизусть, я опишу только те, которые считаю необходимыми.
В javascript вы чаще всего будете работать со строковыми данными, за исключением, наверно, массивов и объектов. Даже если вы не работаете со строками, или думаете, что не работаете, то познакомиться с этими методами все же стоит.
Вам очень часто придется встречаться с массивами. Они отлично зарекомендовали себя как способ хранения данных. Эти методы точно стоит знать любому разработчику javascript, не следует искать их в google.
Это не полный список методов для работы с массивами. С другими вы можете ознакомится в документации от mozilla. Начиная с ES6 были добавлены очень интересные методы.
Эти два метода разработчики путают довольно часто. Зачастую можно обойтись и без них, но они помогают вызывать методы и изменять значение 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 и использует 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 разработчику. Мы только коснулись верхушки айсберга. Не думайте, что эту статью стоит воспринимать в качестве руководства для разработчика. Это всего лишь мое личное видение проблемы.
Адаптированный перевод статьи «Full-Stack JavaScript in Six Weeks: A Curriculum Guide»
Веб-разработка - одно из самых простых и оттого популярных направлений среди начинающих программистов. Для работы достаточно любого текстового редактора и браузера, не нужно изучать алгоритмы на продвинутом уровне, результат каждого этапа написания программы нагляден - в общем, преимуществ много. Ключевым навыком в контексте веб-разработки считается знание JavaScript.
Сейчас JavaScript очень быстро развивается, а потому при изучении языка легко запутаться. Мы предлагаем вашему вниманию учебный план с удобной структурой, который охватывает все необходимые аспекты JavaScript и смежных технологий.
Стоит отметить открытость языка - компании, обычно соперничающие друг с другом, сотрудничают с целью развития JavaScript. Язык очень гибок и подойдёт сторонникам как объектно-ориентированного, так и функционального подхода. Огромное количество библиотек и фреймворков позволяет с лёгкостью решать любые типы задач, а серверная платформа Node.js даёт возможность использовать язык не только в браузере, но и в консоли. Вы даже можете писать настольные и мобильные приложения: первые - при помощи фреймворка Electron, а вторые - на NativeScript или React Native.
Сперва необходимо изучить основные понятия JavaScript, веб-разработки и программирования в целом:
Git - необходимый разработчикам инструмент, поэтому с ним нужно как можно раньше. Вот основные навыки, которыми вы должны обладать:
Затем стоит изучить алгоритмы (в частности, понятие сложности алгоритмов), а также базовые структуры данных: связные списки, очереди, стеки, двоичные деревья поиска и хэш-таблицы. В этом вам поможет .
10 лет назад JavaScript можно было использовать только для фронтенд-разработки. Теперь благодаря Node.js одним «фронтом» дело не ограничивается. Node - это просто среда для выполнения JS-кода на стороне сервера, поэтому вам не придётся изучать новый синтаксис, но понадобится импортировать и экспортировать файлы, разбивать код на модули и использовать менеджер пакетов npm.
После изучения Node стоит продолжить знакомство с бэкенд-разработкой и разобраться в серверах и маршрутизации. Можно начать с портов и протоколов с акцентом на HTTP, а потом заняться Express - Node-библиотекой для обработки запросов.
Базы данных - один из важнейших элементов веб-разработки. Если вашему приложению нужно загружать или хранить какие-либо данные, не теряющиеся при обновлении страницы, придётся использовать БД. Нужно научиться различать реляционные и нереляционные базы данных и разобраться в типах связей. Затем и познакомиться с разными . Умение работать с ORM тоже не будет лишним.
HTML и CSS - это основа основ для любого веб-разработчика. Вам не обязательно знать их в совершенстве, но разбираться в них вы должны. Также можно изучить какую-нибудь популярную библиотеку (например, Bootstrap) и CSS-препроцессор вроде Sass - он поможет сделать CSS похожим на обычный код. Для упрощения работы с HTML можно выбрать один из популярных шаблонизаторов, например, pug.
Создав внешний облик страницы при помощи HTML и CSS, вы будете использовать и библиотеку jQuery для управления DOM. Многие считают, что jQuery бесполезна и её скоро заменят Angular и React, но она безумно популярна, и поэтому её стоит знать. Кроме того, однажды вы попадёте в ситуацию, когда забивать гвозди React-микроскопом вам будет неудобно, и тогда на помощь вам придёт лёгкая jQuery.
Было бы непростительно обделить вниманием инструменты Chrome , которые дают огромное количество возможностей. С ними вы сможете изучать элементы DOM, производить отладку через консоль, отслеживать маршруты и многое другое. В описаны несколько удобных возможностей консоли Chrome, которые упростят выполнение рутинных задач.
Если вы хотите, чтобы приложение не перезагружало страницы после каждой операции с базой данных, вам точно понадобится AJAX - он отправляет фоновые асинхронные HTTP-запросы, ответы на которые обновляют лишь часть отображения. Работать с AJAX можно через jQuery при помощи метода.ajax .
Программирование – это не просто способ заработать большие деньги и даже не совсем умственный труд. Это возможность понять, из чего состоит окружающий мир, разложить его на мелкие частички, а затем заново собрать, руководствуясь собственной логикой и знаниями.
Языки программирования – это только лишь инструмент, с помощью которого человек строит правила в созданных системах.
Интернет представляет собой массу возможностей, за которые ухватываются светлые и предприимчивые умы. Конечно, веб-разработка тоже имеет свои инструменты для воплощения идей в жизнь. Один из них – язык программирования JavaScript , о котором и пойдёт речь в данной статье:
Многие люди, даже не имеющие никакого отношения к IT-сфере, слышали слово Java . Революционный независимый от платформ язык, на котором активно пишут приложения для мобильных систем. Он был разработан перспективной компанией Sun , которая затем перешла «под крыло » Oracle . Но ни та, ни другая компании не имеют никакого отношения к JavaScript :
От Sun потребовалось лишь разрешение на использование части названия. Удивительно, но JavaScript вообще не принадлежит ни одной фирме.
При написании веб-приложений, программирование на JavaScript используется наиболее часто. Если кратко перечислить ключевые особенности данного языка, то следует выделить следующее:
Если говорить о сути применения JavaScript , то этот язык позволяет «оживлять » неподвижные страницы сайтов с помощью кода, который можно запустить на исполнение (так называемые, скрипты ). То есть, можно провести аналогию с мультфильмами, где html и css – это прорисованные герои, а JavaScript – это то, что заставляет их двигаться.
Если говорить о синтаксисе JavaScript , то ему присущи следующие особенности:
Простейший код на JavaScript выглядит следующим образом:
Для того чтобы понять, зачем нужен JavaScript , и насколько необходимо его изучение, следует выделить некоторые области, в которых применяется данный язык программирования.
Не стоит думать, что JavaScript – это какая-то панацея от всех проблем, и каждый программист с улыбкой на лице пользуется этим языком. Всё на свете имеет свои положительные и отрицательные стороны. Для начала, отметим недостатки.
Не стоит обращать внимание на то, что минусов получилось больше, чем плюсов. JavaScript прочно закрепился в своей нише, и никакая критика его оттуда на данный момент не выбьет.
Сложный и длинный путь предстоит тем, кто решил основательно изучить JavaScript . Для начинающих существуют базовые рекомендации, следуя которым, можно значительно упростить свое обучение.