Что можно сделать на node js

Что сегодня умеет JavaScript

Liudmila Mzhachikh

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

🔺Нативные и гибридные мобильные приложения

Сегодня на JS можно писать кроссплатформенные приложения на React Native, Ionic или PhoneGap

Десктопные приложения пишутся на фреймворке Electron. VS Code, Skype, Slack тоже написаны на JS, кстати

🔺Расширения для браузеров

Писать расш и рения для браузера достаточно несложно. Можете написать на ванильном JS собственное расширение под свои задачи

🔺Плагины для программ

Например, расширения для Photoshop и Sketch можно писать на JS

Cейчас прекрасно разрабатывают игры на JS, в том числе есть много игр, которые учать прогать. На MDN есть большая статья с ресурсами по геймдеву на JS. Пишут игры как на ванильном JS, так и с использованием движков, например PixiJS

WebGL умеет делать очень крутые штуки. Библиотека Three.js — на сегодняшний день наиболее популярная для работы с WebGL

🔺Видео и аудиоплееры

Проигрывание видео и аудио в браузере с помощью HTML5 и JS. Есть, например, библиотека videoJS

🔺Internet of Things

IOT — это море устройств, управляемых через интернет: холодильник, который сам заказывает продукты, всевозможные датчики и системы удаленного мониторинга — все, что можно автоматизировать. Через Node.js можно взаимодействовать с роботами и другими устройствами. Есть даже квадрокоптеры, на которые можно установить ноду. Для IOT достаточно много библиотек

Например, пишут JS приложения с использованием Samsung SDK

Компания Pebble, производящая умные часы, выпустила фреймворк Pebble.js для написания приложений под их платформу на JS. Под iOS и Android на JS приложухи писать нельзя… но кто знает, что нас ждет )

На Node.js пишут приложения (навыки) для умных колонок вроде Алисы и Маруси

Интерфейсы платёжных и информационных терминалов и других устройст самообслуживания

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

Виртуальная и дополненная реальность в браузере с помощью WebVR API и 3D графики. Смотрите, какие крутые вещи можно сделать

На JS сегодня можно создавать и обучать свои нейросети, а также использовать наработки на других языках. TensorFlow.js — самая популярная библиотека для ML на JS. С помощью ML можно, например, научить сайт каталогизировать товары для магазина прямо на фронте, подсказывать, насколько корректен ваш текст (недавно так сделал в твиттер) и делать много других прикольных штук

И напоследок, вдохновляющая подборка примеров использования JS, примеры проектов на ванильном JS — могут подсказать идею для pet-проекта и 30 Day Vanilla JS Coding Challenge — 30 туториалов по разным возможностям JS

DOM-дерево

В соответствии с объектной моделью документа («Document Object Model», коротко DOM), каждый HTML-тег является объектом. Вложенные теги являются «детьми» родительского элемента. Текст, который находится внутри тега, также является объектом.

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

Например, document.body – объект для тега <body> .

Если запустить этот код, то <body> станет красным на 3 секунды:

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

Пример DOM

Начнём с такого, простого, документа:

DOM – это представление HTML-документа в виде дерева тегов. Вот как оно выглядит:

На рисунке выше узлы-элементы можно кликать, и их дети будут скрываться и раскрываться.

Каждый узел этого дерева – это объект.

Теги являются узлами-элементами (или просто элементами). Они образуют структуру дерева: <html> – это корневой узел, <head> и <body> его дочерние узлы и т.д.

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

Например, в теге <title> есть текстовый узел "О лосях" .

Обратите внимание на специальные символы в текстовых узлах:

  • перевод строки: ↵ (в JavaScript он обозначается как \n )
  • пробел: ␣

Пробелы и переводы строки – это полноправные символы, как буквы и цифры. Они образуют текстовые узлы и становятся частью дерева DOM. Так, в примере выше в теге <head> есть несколько пробелов перед <title> , которые образуют текстовый узел #text (он содержит в себе только перенос строки и несколько пробелов).

Существует всего два исключения из этого правила:

  1. По историческим причинам пробелы и перевод строки перед тегом <head> игнорируются
  2. Если мы записываем что-либо после закрывающего тега </body> , браузер автоматически перемещает эту запись в конец body , поскольку спецификация HTML требует, чтобы всё содержимое было внутри <body> . Поэтому после закрывающего тега </body> не может быть никаких пробелов.

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

Здесь пробельных текстовых узлов нет:

Когда мы работаем с деревом DOM, используя инструменты разработчика в браузере (которые мы рассмотрим позже), пробелы в начале/конце текста и пустые текстовые узлы (переносы строк) между тегами обычно не отображаются.

Таким образом инструменты разработки экономят место на экране.

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

Автоисправление

Если браузер сталкивается с некорректно написанным HTML-кодом, он автоматически корректирует его при построении DOM.

Например, в начале документа всегда должен быть тег <html> . Даже если его нет в документе – он будет в дереве DOM, браузер его создаст. То же самое касается и тега <body> .

Например, если HTML-файл состоит из единственного слова "Привет" , браузер обернёт его в теги <html> и <body> , добавит необходимый тег <head> , и DOM будет выглядеть так:

При генерации DOM браузер самостоятельно обрабатывает ошибки в документе, закрывает теги и так далее.

Есть такой документ с незакрытыми тегами:

…Но DOM будет нормальным, потому что браузер сам закроет теги и восстановит отсутствующие детали:

Важный «особый случай» – работа с таблицами. По стандарту DOM у них должен быть <tbody> , но в HTML их можно написать (официально) без него. В этом случае браузер добавляет <tbody> в DOM самостоятельно.

Для такого HTML:

DOM-структура будет такой:

Видите? Из пустоты появился <tbody> , как будто документ и был таким. Важно знать об этом, иначе при работе с таблицами возможны сюрпризы.

Другие типы узлов

Есть и некоторые другие типы узлов, кроме элементов и текстовых узлов.

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

Казалось бы – зачем комментарий в DOM? Он никак не влияет на визуальное отображение. Но есть важное правило: если что-то есть в HTML, то оно должно быть в DOM-дереве.

Все, что есть в HTML, даже комментарии, является частью DOM.

Даже директива <!DOCTYPE. > , которую мы ставим в начале HTML, тоже является DOM-узлом. Она находится в дереве DOM прямо перед <html> . Мы не будем рассматривать этот узел, мы даже не рисуем его на наших диаграммах, но он существует.

Даже объект document , представляющий весь документ, формально является DOM-узлом.

Существует 12 типов узлов. Но на практике мы в основном работаем с 4 из них:

  1. document – «входная точка» в DOM.
  2. узлы-элементы – HTML-теги, основные строительные блоки.
  3. текстовые узлы – содержат текст.
  4. комментарии – иногда в них можно включить информацию, которая не будет показана, но доступна в DOM для чтения JS.

Поэкспериментируйте сами

Чтобы посмотреть структуру DOM в реальном времени, попробуйте Live DOM Viewer. Просто введите что-нибудь в поле, и ниже вы увидите, как меняется DOM.

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

Для этого откройте страницу elks.html, включите инструменты разработчика и перейдите на вкладку Elements.

Выглядит примерно так:

Вы можете увидеть DOM, понажимать на элементы, детально рассмотреть их и так далее.

Обратите внимание, что структура DOM в инструментах разработчика отображается в упрощённом виде. Текстовые узлы показаны как простой текст. И кроме пробелов нет никаких «пустых» текстовых узлов. Ну и отлично, потому что большую часть времени нас будут интересовать узлы-элементы.

Клик по этой кнопке в левом верхнем углу инспектора позволяет при помощи мыши (или другого устройства ввода) выбрать элемент на веб-странице и «проинспектировать» его (браузер сам найдёт и отметит его во вкладке Elements). Этот способ отлично подходит, когда у нас огромная HTML-страница (и соответствующий ей огромный DOM), и мы хотим увидеть, где находится интересующий нас элемент.

Есть и другой способ сделать это: можно кликнуть на странице по элементу правой кнопкой мыши и в контекстном меню выбрать «Inspect».

В правой части инструментов разработчика находятся следующие подразделы:

  • Styles – здесь мы видим CSS, применённый к текущему элементу: правило за правилом, включая встроенные стили (выделены серым). Почти всё можно отредактировать на месте, включая размеры, внешние и внутренние отступы.
  • Computed – здесь мы видим итоговые CSS-свойства элемента, которые он приобрёл в результате применения всего каскада стилей (в том числе унаследованные свойства и т.д.).
  • Event Listeners – в этом разделе мы видим обработчики событий, привязанные к DOM-элементам (мы поговорим о них в следующей части учебника).
  • … и т.д.

Лучший способ изучить инструменты разработчика – это прокликать их. Большинство значений можно менять и тут же смотреть результат.

Взаимодействие с консолью

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

  1. На вкладке Elements выберите первый элемент <li> .
  2. Нажмите Esc – прямо под вкладкой Elements откроется Console.

Последний элемент, выбранный во вкладке Elements, доступен в консоли как $0 ; предыдущий, выбранный до него, как $1 и т.д.

Теперь мы можем запускать на них команды. Например $0.style.background = ‘red’ сделает выбранный элемент красным, как здесь:

Это мы посмотрели как получить узел из Elements в Console.

Есть и обратный путь: если есть переменная node , ссылающаяся на DOM-узел, можно использовать в консоли команду inspect(node) , чтобы увидеть этот элемент во вкладке Elements.

Или мы можем просто вывести DOM-узел в консоль и исследовать «на месте», как document.body ниже:

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

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

Итого

HTML/XML документы представлены в браузере в виде DOM-дерева.

  • Теги становятся узлами-элементами и формируют структуру документа.
  • Текст становится текстовыми узлами.
  • … и т.д. Всё, что записано в HTML, есть и в DOM-дереве, даже комментарии.

Для изменения элементов или проверки DOM-дерева мы можем использовать инструменты разработчика в браузере.

Здесь мы рассмотрели основы, наиболее часто используемые и важные действия для начала разработки. Подробную документацию по инструментам разработки Chrome Developer Tools можно найти на странице https://developers.google.com/web/tools/chrome-devtools. Лучший способ изучить инструменты – походить по разным вкладкам, почитать меню: большинство действий очевидны для пользователя. Позже, когда вы немного их изучите, прочитайте документацию и узнайте то, что осталось.

У DOM-узлов есть свойства и методы, которые позволяют выбирать любой из элементов, изменять, перемещать их на странице и многое другое. Мы вернёмся к ним в последующих разделах.

Магия JavaScript: что можно сделать, используя лишь 6 символов?

Обложка: Магия JavaScript: что можно сделать, используя лишь 6 символов?

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

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

Если мы припишем слева от чего-то плюс или минус, будет произведена попытка конвертации строки в число.

Если на что-то навесить логическое отрицание, результат будет представлен как логическая величина.

ОТР , любой , От 70 000 до 160 000 ₽

Мы можем использовать это и творить магию, используя лишь эти символы: [ , ] , ( , ) , ! и + . Если вы читаете статью не с мобильного устройства, то вы можете открыть консоль в браузере и выполнять весь код там.

Начнём с основ. То, что стоит запомнить:

  1. Префикс ! конвертирует в Boolean;
  2. Префикс + конвертирует в число;
  3. Сложение с [] конвертирует в строку.

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

Также запомните, что числа можно получать сложением других чисел в строковом виде и конвертацией результата в числовой формат:

Так, а теперь попробуем использовать рассмотренные свойства и получить букву 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, оборачивающий строку в тег <b> .

Это даст нам символы < , > и / .

Возможно, вы слышали о функции 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") .

Вот инструмент, который может автоматизировать конверсию, а вот так он переводит каждый символ.

Ну и как это может пригодиться?

Никак &#128578; eBay недавно нахимичил что-то в коде, и продавцы смогли встраивать исполняемый JS в свои страницы, используя только эти символы, но такие атаки очень редки. Можно подумать про обфускацию, но, будем честны, есть методы получше.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *