что нужно знать в javascript для верстальщика
Основы JavaScript
JavaScript – это язык программирования, который добавляет интерактивность на ваш веб-сайт (например: игры, отклик при нажатии кнопок или при вводе данных в формы, динамические стили, анимация). Эта статья поможет вам начать работать с этим захватывающим языком и даст вам представление о том, на что он способен.
Что такое JavaScript на самом деле?
JavaScript («JS» для краткости) — это полноценный динамический язык программирования, который применяется к HTML документу, и может обеспечить динамическую интерактивность на веб-сайтах. Его разработал Brendan Eich, сооснователь проекта Mozilla, Mozilla Foundation и Mozilla Corporation.
JavaScript невероятно универсален и дружелюбен к новичкам. Обладая большим опытом, вы сможете создавать игры, анимированную 2D и 3D графику, полномасштабные приложения с базами данных и многое другое!
JavaScript сам по себе довольно компактный, но очень гибкий. Разработчиками написано большое количество инструментов поверх основного языка JavaScript, которые разблокируют огромное количество дополнительных функций с очень небольшим усилием. К ним относятся:
Поскольку эта статья должна быть только лёгким введением в JavaScript, мы не собираемся путать вас на этом этапе, подробно рассказывая о том, какая разница между основным языком JavaScript и различными инструментами, перечисленными выше. Вы можете подробно изучить все это позже, в нашей учебной области JavaScript и в остальной части MDN.
Ниже мы познакомим вас с некоторыми аспектами основного языка, и вы также будете играть с несколькими функциями API браузера. Веселитесь!
Пример «hello world»
Предыдущий раздел звучит очень многообещающе, и это на самом деле так — JavaScript является одной из самых перспективных веб-технологий, и когда вы освоитесь и начнёте использовать его, ваши веб-сайты перейдут в новое измерение мощи и креативности.
Тем не менее, с JavaScript немного более сложно освоиться, чем с HTML и CSS. Вам придётся начать с малого, продолжая изучение небольшими шагами. Для начала мы покажем вам, как добавить некоторые основы JavaScript на вашу страницу, чтобы создать «hello world!» пример (стандарт в начальных примерах программирования).
Важно: Если вы не следили за остальным нашим курсом, скачайте этот пример кода и используйте его в качестве стартовой точки.
Зачем верстальщику нужно изучать JavaScript?
Занимаюсь вёрсткой более 3 лет, фриланс, это моё хобби, которое безумно мне нравится и приносит деньги помимо основной работы.
Образования в данной сфере нет, всё сам, но за это время научился верстать с использованием HTML, CSS на хорошем уровне, JavaScript на уровне подключения готовых библиотек и настройки их для конкретного сайта, умею натягивать шаблон на CMS Joomla, WordPress.
2 месяца назад ушёл с основной работы (должность менеджер по продажам) и сейчас хочу найти работу HTML-верстальщиком в офисе, для постоянного потока работы, но везде требуется знание JavaScript.
Я понимаю что его необходимо знать, не учил раньше потому что мне хватало моих знаний для того уровня сложности проектов, которые у меня были.
Собственно вопросы:
1. Что подразумевают веб-студии под фразой «Необходимо уметь разрабатывать сайты на JavaScript»? Т.е. целый сайт нужно будет делать на JavaScript и даже простое всплывающее меню, которое можно реализовать с помощью CSS, его тоже нужно будет делать на JavaScript?
2. Какие изменения привнесёт в процесс разработки знание JavaScript, что я смогу делать?
3. Сколько мне потребуется (примерно) времени для изучения JavaScript на уровне, чтобы меня взяли в веб-студию как верстальщика со знанием и умением писать на JavaScript хотя бы что-то не сложное.
4. Сколько мне потребуется (примерно) времени для изучения JavaScript на уровне, чтобы меня взяли в веб-студию как Front-end разработчика со знанием и умением писать на JavaScript для какого-то долгосрочного проекта,к примеру веб-сервис.
10 вещей, которые надо знать, чтобы стать мастером JavaScript
Jan 10, 2019 · 5 min read
Полагаю, вы веб-разработчик. Надеюсь, ваши дела идут хорошо, у вас отличная работа, возможно вы работаете на себя или в качестве фрилансера. Будущее этой сферы выглядит многообещающе. Может быть, вы только начинаете свою карьеру разработчика, а может быть, вы работаете уже многие годы. Какими бы навыками JavaScript вы ни обладали, всегда полезно освежить некоторые знания или изучить что-то новое. Ниже представлены 10 вещей, которые вы обязательно должны знать, чтобы считаться мастером JavaScript.
1. Поток команд
Пожалуй, это базовый пункт в э том списке. И один из важнейших, может быть, даже и самый важный. Если вы не знаете, как работает код, вам придется очень тяжело.Поэтому знание базового потока команд просто необходимо.
2. Устранение ошибок
Это заняло у меня немало времени. Не важно, работаете вы с front-end или back-end, первый год работы вы всегда будете пользоваться console.log или console.error для “устранения” ошибок. Для того, чтобы писать качественные приложения, вам нужно избавиться от этой привычки, и вместо использования ленивых логов устранять ошибки правильно. Разберитесь, как написать свой собственный конструктор Error, как правильно находить ошибки, а также как показывать пользователю, в чем проблема.
3. Модели данных
Постоянно просматривая ваш код, вы должны решать, когда стоит объединить определённые блоки информации, а когда этого делать не нужно. Это применимо не только к созданию моделей данных, но также функций, параметров, объектов или переменных. Например:
4. Асинхронность
Это очень важный аспект JavaScript. Вызываете ли вы данные из back-end или асинхронно выполняете запросы в сам back-end, в любом случае вы столкнетесь с асинхронностью и связанными с ней проблемами. Если вы не знаете, что такое асинхронность, вы столкнетесь со странной ошибкой, которую будете пытаться решить пару часов. Если вы знаете, что это, но не знаете, что с этим делать, вы попадете в ад обратных вызовов. Лучше в ваших приложениях использовать промисы и/или async await.
5. Управление DOM
6. Node.js / Express
Даже front-end разработчики должны знать азы node.js. Хорошо, если вы также будете знать, как запустить простой сервер Express, добавить новые маршруты или изменить существующие. JavaScript хорошо подходит для написания скриптов, которые помогут в автоматизации выполнения задач. Таким образом, зная, как читать файлы и работать с путями к файлу и буферами, вы получите набор инструментов для создания чего угодно.
7. Функциональный подход
Спорам между любителями функционального и объектно-ориентированного программирования нет конца. С помощью обоих подходов вы можете достичь одних и тех же целей. А JavaScript всё упрощает, так как объединяет оба этих подхода. Библиотеки вроде lodash предоставляют вам отличный набор средств для создания приложений при помощи функционального подхода. Сейчас вам даже не придется использовать какие-то внешние библиотеки. Многие наиболее важные функции были внедрены в официальных версиях JavaScript. Вам обязательно нужно научиться использовать map `reduce` filter `forEach` и `find`.
8. Объектно-ориентированный подход
Вам также стоит познакомиться и с объектно-ориентированным JavaScript, если вы хотите полностью освоить его. Долгое время в работе я пренебрегал этой частью, и всегда находил обходные пути. Но иногда действительно стоит применять объекты/классы и экземпляры, чтобы использовать определенные функции. Классы широко используются в React, MobX и пользовательских конструкторах.
9. Front-end фреймворк
React.js, Angular и Vue.js составляют “большое трио”. Если сейчас поискать вакансии, практически в каждой из них будет требоваться знания чего-то из этого. Несмотря на то, что они быстро изменяются, важно понимать основную суть этих библиотек и фреймворков, чтобы понимать, как работают приложения. К тому же, с их помощью легче писать приложения. Если вы ещё не выбрали, что изучать, я советую React.js. Последние пару лет я работаю с этой библиотекой, и ни разу не пожалел об этом.
10. Объединение / транспиляция
К сожалению, это большая часть разработки приложений. С одной стороны, мне не стоит говорить “к сожалению”, потому что здорово иметь возможность писать код, используя все новые функции. С другой стороны, я так говорю, потому что всегда нужно помнить о том, что существуют старые браузеры, которые эти функции не поддерживают. Поэтому нам приходится транспилировать наш код, чтобы он обрабатывался старыми браузерами. Если вы работает с node.js, то прибегаете к транспиляции реже. Для транспиляции обычно используют babel.js, изучите его. Для объединения кода и связи всех частей между собой существует пара способов. Раньше наиболее распространенным был Webpack. Но некоторое время назад откуда ни возьмись появился parcel, на данный момент мне он нравится больше. Пусть он и не идеален, но он эффективнее и проще в настройке, чем Webpack.
Бонус: Регулярные выражения
Это не относится конкретно к JavaScript, но всё же очень полезно, хоть и сложно. Изучение синтаксиса регулярных выражений, определённо, займет у вас некоторое время, а запомнить все варианты просто невозможно.
Тестирование
Тестирование — это действительно очень важная часть разработки приложений, в том числе и в JavaScript. При написание кода, прежде чем запустить функцию, вы (в идеале) должны провести тестирование, пусть даже и ручное. Лучше будет применять автоматическое тестирование. Существуют разные типы тестов: модульное, сквозное, нагрузочное тестирование, проверки безопасности и front-end (например, подключен компонент или нет). Также есть множество различных тестовых сред: enzyme, jasmine, mocha, chai, и т.д. Сейчас мне больше всего нравится ava.js, советую изучить её, если вы до этого не работали с автоматическим тестированием.
Надеюсь, вы итак уже знаете всё, о чем я написал. Если нет, поработайте над этим и постарайтесь стать мастером JavaScript! Это действительно стоит того. Помните, что в программировании самое главное — это практика. Поэтому если вы не знакомы с какими-то из описанных тем, или знакомы только в теории, восполните пробелы. Это пригодится вам в будущем.
Что должен уметь верстальщик, чтобы его все хотели
В иерархии фронтенд-разработки верстальщики располагаются где-то здесь:
Фронтенд-разработка в 2020, холст, масло
В нулевых никаких фронтов не было, и человек, который делает сайты, был просто человеком, который делает сайты. Мог и на HTML что-то собрать, и стили прописать, и на JavaScript алерты наставить, где нужно. Веб-разработка была маленькой, смешной, но самодостаточной. А потом понеслось.
Верстальщики стали больше писать на JavaScript и начали поглядывать в сторону именования «фронтендер», но всё ещё очень любили делать файлы style.css на десять тысяч строк.
И чем ближе был 2020, тем больше грань размывалась — и теперь нет разработчиков на React, которые не понимают, как сверстать макет и обвязать всё стилями. При этом спрос на чистых верстальщиков ещё остался — им не обязательно в совершенстве владеть JavaScript, а вот глубоко понимать, как быстро, точно и качественно из макета сделать страницу — обязательно.
В этом и заключается суть работы верстальщиков. Они берут у дизайнеров макет (это картинка, на которой нарисован сайт — К.О.) и собирают из него страницу. Пишут HTML, CSS, используют магию гридов, флоатов, какой-нибудь БЭМ. Стараются, в общем, делают. Молодцы.
С другой стороны, HTML сейчас даже в некоторых школах изучают — но отчего-то сразу после школы никто не спешит платить первокурсникам по 500$ за вёрстку. И тут мы приходим к тому, что в 2020 году требуют от верстальщика работодатели.
Мы в HTML Academy работаем над тем, что верстальщики после двух наших интенсивов по вёрстке находили работу, а после интенсива по JavaScript делали это вообще без проблем. И для того, чтобы чему-то обучать, мы должны понять, что требуется рынку сейчас и какие требования выставляет работодатель к верстальщику, чтобы мы могли покрывать такие требования на курсах.
Идеальная вакансия
Коля Шабалин, автор и преподаватель курсов в Академии, написал скрипт и проанализировал вакансии на hh и Хабр-карьере, выделил требования и посчитал, какие встречаются чаще. Оказалось, что усреднённая вакансия выглядела бы как-то так:
Требуется верстальщик, который:
Верстальщический вундерлист
Умение использовать каждую вещь из этого списка немножечко повышает шансы верстальщика найти работу в 2020 году.
Кроссбраузерная оптимизированная вёрстка — это когда сайт во всех браузерах выглядит одинаково. Даже в IE11 (хотя это несколько сложно, учитывая одно из следующих требований).
SVG — векторный формат изображений, при котором картинки не портятся, если их растянуть.
Sass — это такая надстройка над CSS. Sass помогает избежать дублирования и структурировать код, в таком виде его легче поддерживать. Но с препроцессорами есть проблемы.
БЭМ — изобретение Яндекса, чтобы упростить вёрстку и разбить всё на блоки.
Canvas— сущность в HTML, на которой можно рисовать (люблю объяснять!).
PUG — шаблонизатор HTML, написанный на JavaScript для Node.js. Нужен, чтобы шаблонизировать. Все же любят шаблоны.
Git — система контроля версий, чтобы не делать Макет_2_Финальный_СПравками_final_наревью.html. Айтишники любят Git и написали про него много статей.
Натянуть вёрстку на CMS — взять WordPress или какой-нибудь там ещё движок для блога и сверстать страницу его встроенными средствами. Но по макету, чтобы дорого-богато.
Bootstrap — ещё одна библиотека, чтобы быстро верстать. Её много где используют, но киллерфичей верстальщика может стать понимание, как сверстать «как на бутстрапе», но с нуля.
jQuery — популярное нечто решение, которое используют, чтобы поудобнее работать с JavaScript. Порог вхождения низкий, запутанность кода — высокая. Вообще, после хороших курсов по JavaScript никакой jQuery будет не нужен, но если он используется в компании, то разобраться будет легко.
Node.js, npm-скрипты, Autoprefixer, Gulp, Webpack — инструменты, чтобы экономить кучу времени при вёрстке за счёт автоматизации.
Что там с Фотошопом и Иллюстратором
Некоторые ребята говорят, что их всерьёз кто-то использует.
Практика показывает, что все потихоньку переходят на Figma, Sketch и Avocode. Ну то есть Фотошоп и Люстра, конечно, ещё много где, но по сравнению с Фигмой это как заколачивать гвозди дорогущим перегруженным графическим редактором по подписке.
Ну и потом, вспомните Adobe Flash — все постепенно пересядут на нормальную технологию, никуда не денешься.
А портфолио откуда брать?
Что об этом всём думают ребята из индустрии?
Я спросил Катю, которая раньше верстала в Яндекс.Деньгах, о том, что должен уметь верстальщик, чтобы его все хотели. Катя отвечает:
По опыту: нужно точно, быстро и адаптивно.
Точно — значит по макету: надо уметь открыть psd и померить отступы. Быстро — значит код легко изменять и его можно переиспользовать: надо знать препроцессоры и уметь правильно разделить макеты на компоненты (приходит с опытом). Адаптивно то и значит: надо знать про медиа-запросы и уметь нафлексить флексами резиновую вёрстку, или на гридах.
Чтобы собрать своё добро, нужно знать, где скачать Node.js, как скачать пакет из npm и уметь пользоваться Webpack или Gulp (если он ещё не умер): пожать, минифицировать, запустить хот-релоад. И да, Git, нужно выучить десяток базовых команд. Это необходимый минимум.
В идеале нужно освоить базовый JavaScript и React, чтобы верстать компоненты сразу на нём. И вот еще чуть-чуть, и ты уже фронтендер 😀
Нынче если ищут именно верстальщика, а не полноценного фронта, значит последний уже есть, а вёрстки много и/или она сложная. Значит можно не знать JavaScript, но стоит освоить любой шаблонизатор, одну из популярных методологий, познакомиться с существующими библиотеками компонентов.
Чтобы тебя все хотели, нужно много и быстро верстать. А для этого нужно активно пользоваться доступными инструментами и подходами и уметь выбирать подходящие. Что, конечно, выходит далеко за рамки знания HTML и CSS.
Что ещё?
Все работодатели хотят, чтобы к ним пришёл опытный верстальщик — для этого берите и верстайте. Можно смотреть на популярные сайты, верстать по бесплатным макетам или хорошим курсам. Как определить, хорошие ли перед вами курсы, я рассказывал в статье «Как получать 100 тысяч за код». Там есть полный список вещей, которые хорошо бы знать веб-разработчику, чтобы повысить шансы на высокую зарплату.
Вот и сказочке конец. Поделитесь в комментариях, что, по-вашему, должен знать хороший верстальщик, и что вы бы убрали из списка выше. А если вы нанимаете в IT-компании, расскажите, какие у вас требования, нужна ли вёрстка под IE11, и пора ли перелезать на Фигму.
Основы JavaScript для начинающих разработчиков
Материал, перевод которого мы сегодня публикуем, посвящён основам JavaScript и предназначен для начинающих программистов. Его можно рассматривать и как небольшой справочник по базовым конструкциям JS. Здесь мы, в частности, поговорим о системе типов данных, о переменных, о массивах, о функциях, о прототипах объектов, и о некоторых других особенностях языка.
Примитивные типы данных
▍Числа
Арифметические операции JS работают вполне привычным образом, но надо обратить внимание на то, что оператор + может выполнять и сложение чисел, и конкатенацию строк.
▍Строки
Строки, как и другие примитивные значения, иммутабельны. Например, метод concat() не модифицирует существующую строку, а создаёт новую.
▍Логические значения
Объекты
Объекты — это динамические структуры, состоящие из пар ключ-значение. Значения могут иметь примитивные типы данных, могут быть объектами или функциями.
Объекты проще всего создавать, используя синтаксис объектных литералов:
Свойства объекта можно, в любое время, читать, добавлять, редактировать и удалять. Вот как это делается:
Объекты в языке реализованы в виде хэш-таблиц. Простую хэш-таблицу можно создать, используя команду Object.create(null) :
Для перебора всех свойств объекта можно воспользоваться командой Object.keys() :
▍Сравнение значений примитивных типов и объектов
При практической работе с примитивными значениями можно, как уже было сказано, воспринимать их как объекты, у которых есть свойства и методы, хотя объектами они не являются. Примитивные значения иммутабельны, внутренняя структура объектов может меняться.
Переменные
Если переменная объявлена за пределами какой-либо функции, её область видимости является глобальной.
Массивы
Методы массивов позволяют легко реализовывать такие структуры данных, как стеки и очереди:
Функции
Функции в JavaScript являются объектами. Функции можно назначать переменным, хранить в объектах или массивах, передавать в виде аргументов другим функциям и возвращать из других функций.
Существует три способа объявления функций:
▍Классическое объявление функции
При таком подходе к объявлению функций действуют следующие правила:
▍Функциональные выражения
При использовании функциональных выражений нужно учитывать следующее:
▍Стрелочные функции
▍Способы вызова функций
Функции можно вызывать различными способами.