Аспирант Нетологии Максим Пименов рассказывает про JavaScript — невероятно популярный язык программирования, который учит сайты реагировать на поведение посетителей.
JavaScript — это лучший друг HTML и CSS. HTML задает разметку сайта, CSS отвечает за внешний вид, а JavaScript все это оживляет. С помощью кода на JavaScript программист определяет, как страница отреагирует на действия пользователя.
Сейчас JavaScript — единственный язык программирования для браузеров. Он работает под Windows, macOS, Linux и на мобильных платформах, то есть везде. Если не знаешь JavaScript, делать в программировании интерактивных сайтов нечего.
В 2009 году появился Node. js, который вывел JavaScript за пределы браузеров. Теперь его можно запустить хоть на стиральной машине. О том, что такое Node. js и зачем он нужен, мы уже писали, поэтому не буду рассказывать о нем подробно.
Без JavaScript делать в программировании интерактивных сайтов нечего
Frontend-разработчик с нуля
- Получите востребованную профессию frontend-разработчика
- Реализуйте жизнеспособные проекты уже во время обучения
- Соберите крутое портфолио для получения работы своей мечты
- Научитесь работать с HTML, CSS, JavaScript, JSX, XHR и AJAX, React, VirtualDOM, Flexbox, React Router
Как работает JavaScript
Любое действие пользователя на странице порождает событие. Программирование на JavaScript — это обработка событий. Вот как выглядит обычный сценарий:
Пользователь что-то сделал на странице
↓
В браузере сработало событие
↓
Запустился JavaScript-код, который назначен на событие
↓
JavaScript изменил что-то на странице.
Программист пишет обработчик только для тех событий, на которые стоит реагировать:
Пользователь кликнул мышью
↓
Сработало событие onclick
↓
Запустилась функция changePhoto
↓
В галерее сменилось фото
Пользователь нажал клавишу
↓
Сработало событие onkeydown
↓
Программист не назначил обработчик события
↓
Ничего не произошло
JavaScript — это, прежде всего, реакция на события
Чем хорош JavaScript
JavaScript полностью интегрирован с HTML, он способен как угодно менять веб-страницу. В ответ на событие программист может:
- на лету вставить в HTML-код любые теги;
- задать внешний вид элементов через класс и атрибуты HTML;
- переместить любой элемент;
- запросить у пользователя данные;
- отправить запрос на сервер (технология AJAX).
Это только то, что сразу пришло в голову. JavaScript может намного больше, в пределах своей страницы он Бог.
JavaScript — подходящий язык для изучения программирования. Он достаточно прост, но содержит все фундаментальные вещи: алгоритмы, объектно-ориентированную модель, структуры данных. Если традиционные языки для обучения — Pascal и Basic — несут мало практической пользы, то JavaScript — рабочая лошадка.
Начинать с JavaScript хорошо и потому, что синтаксически он похож на великий и ужасный язык С. Изучив JavaScript, получишь базовое представление обо всех «сиобразных» языках: С++, C#, Java, PHP. Они задают тренд в своих областях и весьма популярны, поэтому для новичка важно познакомиться с синтаксисом С.
Программа на JavaScript — это простой текст. Писать на JavaScript можно в любом текстовом редакторе.
В пределах своей страницы JavaScript — Бог
Ограничения
Классический JavaScript — это язык программирования для интернета, он бессилен за пределами браузера. С помощью JavaScript нельзя запустить программу на компьютере или записать файл в нужную папку.
Из-за правил безопасности браузеры ограничивают мощь JavaScript и за пределами «родной» страницы. Управлять вкладками можно при определенных условиях или же вовсе нельзя. Например, JavaScript может закрыть только ту вкладку, которую создал сам.
Год-два назад появились платформы Node.js и React Native, с ними на JavaScript пишут не только для браузера, но и для компьютеров со смартфонами. Это модные и трендовые технологии, но глобально JavaScript — язык программирования для интернета.
На JavaScript пишут для интернета и браузеров
Конкуренты
Сейчас в веб-программировании нет ничего, что способно пошатнуть позиции JavaScript. Язык настолько удачен, что нет причин изобретать что-то другое.
С чистым JavaScript конкурируют только надстройки над ним: CoffeeScript, TypeScript, Dart. Код надстроек порой компактнее, его легче читать и отлавливать ошибки, но перед выполнением он все равно преобразуется в JavaScript.
Главная сила JavaScript — вечная молодость. Он вышел 21 год назад, но не устарел, а развивался и развивается вслед за HTML.
Серьезных конкурентов у JavaScript нет
Что изучать до JavaScript
Можно приступать к JavaScript, вообще не имея представления о программировании. JavaScript — удачный выбор для первого языка, особенно если связываешь будущее с веб-разработкой. При этом любые знания в сфере программирования будет плюсом.
Если есть опыт HTML и CSS, совсем хорошо. Создание сайта логично начать со статичных страниц на HTML и CSS, а потом оживить их при помощи JavaScript. Плюс HTML и CSS дают базовое понимание того, как устроен интернет и работают сайты.
JavaScript — подходящий первый язык, если связываешь будущее с веб-разработкой
Куда развиваться JavaScript-программисту
Изучив основы JavaScript, можно копать так глубоко, как хочется.
Хорошо освоить библиотеки и фреймворки для JavaScript — наборы готовых классов с функциями. Некоторые из них настолько мощные, что полностью меняют сценарии программирования. Для JavaScript самые популярные фреймворки и библиотеки — React, jQuery и Angular2.
Кроме фреймворков полезно изучить надстройки над JavaScript: CoffeeScript, TypeScript и Dart. Одни надстройки сделают ваш код чище и компактнее, другие — строже.
Наконец, можно взяться за серверное программирование и Node.js. Это трендовая технология, которую используют BMW, Amazon, Apple и другие серьезные компании. Так вы расширите область своих знаний JavaScript за пределы управления веб-страницей.
Для JavaScript-программиста нет потолка развития
Хотите написать колонку для Нетологии? Читайте наши условия публикации. Чтобы быть в курсе всех новостей и читать новые статьи, присоединяйтесь к Телеграм-каналу Нетологии
-
Переводы, 6 ноября 2016 в 19:33
JavaScript — это одновременно странный и замечательный язык, который позволяет нам писать абсолютно бредовый код, являющийся валидным. Он пытается помогать нам, конвертируя величины в нужные типы в зависимости от того, как мы с ними работаем.
Если мы прибавляем строку к чему-то, результат будет конвертирован в строку.
Если мы припишем слева от чего-то плюс или минус, будет произведена попытка конвертации строки в число.
Если на что-то навесить логическое отрицание, результат будет представлен как логическая величина.
10–11 апреля, Москва, 10 750–138 000 ₽
Мы можем использовать это и творить магию, используя лишь эти символы: [ , ] , ( , ) , ! и + . Если вы читаете статью не с мобильного устройства, то вы можете открыть консоль в браузере и выполнять весь код там.
Начнём с основ. То, что стоит запомнить:
- Префикс ! конвертирует в Boolean;
- Префикс + конвертирует в число;
- Сложение с [] конвертирует в строку.
Кроме того, нужно знать, что символы из строки можно получать следующим образом:
Также запомните, что числа можно получать сложением других чисел в строковом виде и конвертацией результата в числовой формат:
Так, а теперь попробуем использовать рассмотренные свойства и получить букву a .
Таким образом, путём нехитрых махинаций мы можем получить все буквы из слов true и false . a , e , f , l , r , s , t , u . Хорошо, а можем ли мы взять буквы ещё где-то?
Ну, ещё есть undefined , который и можно получить, сделав что-то глупое, как [][[]] . Конвертация в строку даст нам буквы d , i и n .
Используя все эти буквы, можно составить слова fill , filter и find . Конечно, есть и другие доступные слова, но ценностью именно этих слов является то, что они — методы массивов. Это означает, что они являются частью объекта Array и их можно вызывать прямо для массивов-сущностей. Например, [2,1].sort() .
Кроме того, нужно помнить, что свойства объекта в JS можно использовать как через точку, так и через квадратные скобки. Поскольку методы массива — это свойства объекта Array, мы можем вызывать их, используя скобки вместо точки.
То есть [2,1]["sort"]() — это то же самое, что и [2,1].sort() .
Давайте посмотрим, что произойдёт, когда мы попробуем использовать один из доступных нам методов, не вызывая его.
Это выдаст function fill() < [native code] >. Конвертируем заголовок метода в строку:
И получим новые символы: c , o , v , ( , ) , < , [ , ] , >, .
Получив буквы c и o , можем составить слово constructor . constructor — это метод, который есть у всех JS-объектов, и он возвращает их функцию-конструктор.
Получим строковое представление всех конструкторов наших объектов:
Из этих строк мы можем пополнить наш арсенал следующими символами: B , N , S , A , m , g , y .
Теперь мы можем составить "toString" , функцию, которую можно использовать с квадратными скобками. Только на этот раз мы вызовем её.
Но мы же уже можем конвертировать в строку всё что угодно, так как нам это поможет?
Что, если я скажу вам, что метод toString типа Number обладает секретным аргументом radix , который меняет основание возвращаемого числа перед конвертацией в строку. Смотрите:
Но зачем останавливаться на 16? Максимум — это 36, чего хватает на все символы 0– 9 и a– z . Теперь мы можем получить любую цифру или букву:
Отлично! Но как же пунктуационные символы и заглавные буквы? Идём дальше!
В зависимости от того, где вы исполняете свой JS-код, он может получать, а может и не получать доступ к заранее определённым объектам и данным. Есть вероятность, что при запуске в браузере вы сможете получить доступ к обёрточным методам HTML.
Например, bold — это метод String, оборачивающий строку в тег .
Это даст нам символы , > и / .
Возможно, вы слышали о функции escape . По сути, она конвертирует строку в URI-формат, который могут распознать браузеры. Если мы передадим ей пробел, то получим %20 . Передадим — получим %3C . Эта заглавная C очень важна для получения остальных символов.
Благодаря ей мы можем использовать функцию fromCharCode , возвращающую символ Юникода по данному десятичному представлению. Она является частью объекта String, который можно получить, вызвав конструктор любой строки.w
Для получения десятичных представлений символов можно использовать сайт Unicode lookup.
Хорошо, теперь мы можем написать что угодно в виде строки и выполнить любую функцию, которая принадлежит типам Array, String, Number, Boolean или Object, через их конструкторы. Немало для 6 символов. Но это не конец.
Чем является конструктор любой функции?
Ответ: function Function() < [native code] >, настоящий объект Function.
Используя его, мы можем передать строку кода, чтобы создать реальную функцию.
Что можно вызвать сразу же, просто добавив в конце () . Да, теперь мы можем исполнять строки кода!
ФУХ. Вот теперь всё!
Мы можем получить доступ к любому символу, объединять их в валидный код и исполнять его. Это значит, что JS является полным по Тьюрингу языком из 6 символов [ , ] , ( , ) , + и ! .
Не верите? Запустите это в консоли:
Если вы читаете статью с мобильного устройства, код выше — это исполняемая функция alert("wtf") .
Вот инструмент, который может автоматизировать конверсию, а вот так он переводит каждый символ.
Ну и как это может пригодиться?
Никак 🙂 eBay недавно нахимичил что-то в коде, и продавцы смогли встраивать исполняемый JS в свои страницы, используя только эти символы, но такие атаки очень редки. Можно подумать про обфускацию, но, будем честны, есть методы получше.
Друзья, у меня довольно странный вопрос.
В целом занимаюсь версткой, работаю с HTML и СSS, решил вырасти до front-end разработчика. Программированием до этого не занимался.
Я прошел базовый курс JS на codeschool, читаю learn.javascript.ru и "эксперементирую" в редакторе после каждой статьи.
И хочется уже не просто выполнять упражнения, а действительно писать что-то нужное и имеющее смысл.
И здесь у меня большая проблема.
Я не знаю какие программы начать писать, чтобы двигаться от простого к сложному.
И мне тяжело поставить самому себе задачу, чтобы она еще и была реально полезной.
В HTML все было проще — у тебя есть макет сайта (или уже работающий чей-то сайт), далее ты пытаешься сверстать макет или повторить какие-то реализованные фичи.
С JS у меня не получается действовать аналогично.
У меня есть какой-то набор знаний, в стиле "Вот так работают IIFE, модули, прототипы в JS". Теперь мне надо использовать эти элементы при написании кода, и я понятия не имею, почему, например, для осуществления конкретных фич в коде, нужно использовать именно такой метод и так далее.
То есть, существует обучающее видео "Делаем веб-приложение для подсчета расходов и доходов, оно принимает у пользователя данные и располагает их в двух соответствующих колонках с суммой и названием расходадохода." Все что я могу — это повторить за автором видео его код, местами даже понять что нужно писать дальше. Но мне непонятно почему использовался именно такой подход, методы и тд. Я не могу написать нечто подобное на просмотренной основе.
Буду рад вашей помощи, если сможете подсказать мне:
Какие программы начать писать, приминительно к front-end и развитию в этом направлении, от простого к сложному.
