Скрытые фичи JavaScript


Оглавление (нажмите, чтобы открыть):

Солянка сборная от wmas

Скрыть/показать HTML-элемент используя JavaScript

Простейшее решение, позволяющее показать/скрыть HTML-элемент документа, используя JavaScript. Подробно описание сути процесса и его особенностей.

Обычными средствами срыть (англ. hide) или показать (англ. show) HTML-элемент документа не представляется возможным. Для этого используется CSS-свойство display или visibility. Отличие между ними состоит в том, что visibility, хоть и делает HTML-элемент невидимым, но место, которое он занимает, остаётся за ним. Понятно, что гораздо чаще используется именно display.

display (с англ. отображение) – многоцелевое свойство, которое определяет, как элемент должен отображаться в документе.

Список возможных значений CSS-свойства display, понимаемых различными браузерами, не велик, но и этого вполне достаточно.

  • block — элемент показывается как блочный. Применение этого значения для встроенных элементов, например тега SPAN , заставляет его вести подобно блокам, т.е. происходит перенос строк в начале и конце содержимого.
  • inline — элемент отображается как встроенный. Применение этого значения для блочных элементов, например тега DIV , заставляет его вести подобно встроенным, т.е. его содержимое будет начинаться с того места, где окончился предыдущий элемент.
  • list-item — элемент выводится как блочный и добавляется маркер списка.
  • none — скрывает элемент в документе. Занимаемое им место не резервируется и web-страница формируется так, словно элемента и не было.

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

Первым делом надо определиться, как именно обратиться к HTML-элементу документа. Для этого можно воспользоваться методом getElemetById объекта document , который возвращает ссылку на HTML-элемент документа по значению атрибута id . Например:

Теперь нам нужно получить доступ к свойствам стиля соответствующего HTML-элемента. Для этого используется свойство style . Например:

Остаётся лишь создать элемент управления, который бы выполнял смену значения CSS-свойства display, по какому либо событию, например onclick (клик мышью). Здесь стоит обратить внимание на тот факт, что для решения поставленной задачи, понадобится проверять текущее значение CSS-свойства display и менять его на «противоположное». В нашем случае, для скрытия, будем использовать значение none, а для отображения «пусто». Во втором случае мы убираем CSS-свойство display в соответствующем элементе, что позволит корректно работать как с блочными так и встраиваемыми HTML-элементами.

Для наглядности приведу следующий пример:

Обратите внимание, что тег DIV имеет атрибут style со значением display:none . Таким образом? мы задаём значение CSS-свойства display по умолчанию равное none, т.е. HTML-элемент изначально будет скрыт.

JavaScript показать и скрыть элемент с текстом

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

Обычно показываются, и скрываются html тег div, но не обязательно, можно манипулировать любыми элементами.
Изменение видимости элемента достигается за счет изменения css-свойства display. Если display = ‘block’, то элемент будет видим, если ‘none’, то скрыт.

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

Вот исходный код примера, с подробным описанием:

Комментарии (Написать комментарий)

Комментарий:
Огромное спасибо))

Комментарий:
спосибоооооооооооооооооооооооооооооооооооооооооооооо

Комментарий:
СПасибо!

Комментарий:
Спасибо, мне очень помог данный пример

12 хитростей JavaScript, которых вы не найдете в большинстве уроков

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

С тех пор я пополняю этот список, и в этой статье я поделюсь 12 советами, которые кажутся мне особенно умными или полезными.

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

Итак, вот 12 изящных способов написания более лаконичного и производительного кода.

1. Фильтр уникальных значений

Тип Set был введен в ES6, и наряду с оператором «spread» . мы можем использовать его для создания нового массива с уникальными значениями.

До ES6 фильтрация уникальных значений потребовала бы гораздо больше кода, чем сейчас!

Этот трюк работает для массивов, содержащих примитивные типы: undefined, null, boolean, string и number. (Если бы у вас был массив, содержащий объекты, функции или дополнительные массивы, вам понадобился бы другой подход!)

2. Кешируем длину массива в циклах

Когда нас учат циклам for, нам рекомендуется следовать этой стандартной структуре:

Однако, используя этот синтаксис, цикл for пересматривает длину массива при каждой итерации.

Иногда это может быть полезно, но в большинстве случаев лучше и эффективнее кэшировать длину массива, так что к ней нужно обратиться только 1 раз. Мы можем сделать это, определив переменную length

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

3. Вычисление короткого замыкания

Тернарный оператор — это быстрый способ написать простые (а иногда и не очень простые) условные конструкции, например:

Но иногда даже тернарный оператор получается сложнее, чем нужно. Вместо него мы можем использовать логические операторы «и» && и «или» || для более точной оценки определенных выражений. Его часто называют «коротким замыканием».

Как это работает

Допустим, мы хотим вернуть только один из двух или более вариантов.

Использование && вернет первое false или ‘ложноe’ значение. Если каждый операнд оценивается как true, будет возвращено последнее вычисленное выражение.

Использование || вернет первое true или ‘правдивоe’ значение. Если каждый операнд оценивается как false , будет возвращено последнее вычисленное выражение.

Пример 1

Допустим, мы хотим вернуть свойство length переменной, но мы не знаем её тип.

Мы можем использовать оператор if/else оператор для проверки, что foo это приемлемый тип, однако это может быть довольно долго. Короткое замыкание позволяет сделать это таким образом:

Если переменная foo имеет свойство length, оно будет возвращено. В противном случае вернется length пустого массива: 0.

Пример 2

Были ли у вас проблемы с доступом к вложенному объекту? Вы можете не знать, существует ли у объекта свойство или одно из под-свойств, и это может вызвать неприятные ошибки.

Допустим, мы хотели получить доступ к свойству data , которое находится внутри this.state , но data — undefined до тех пор, пока программа не вернет респонз.

В зависимости от того, где мы используем этот код, вызов this.state.data может помешать запуску нашего приложения. Чтобы обойти это, мы могли бы обернуть все в условное выражение:

Это кажется довольно скучным. Оператор «или» предоставляет более краткое решение:

Мы не можем изменить код выше, чтобы использовать && . Утверждение ‘Fetching Data’ && this.state.data вернется this.state.data независимо от того, равно оно undefined или нет. Это потому, что ‘Fetching Data’ «правдиво», и поэтому && всегда будет пропускать его, когда он указан первым.

Новая предлагаемая фича: опциональная последовательность

В настоящее время существует предложение разрешить «опциональную последовательность» при попытке вернуть свойство, находящееся глубоко в древовидной структуре. Согласно предложению, символ вопросительного знака ? может использоваться для извлечения свойства, только если оно не null

Например, мы могли бы привести свой пример выше к this.state.data?.() — вернет data, только если оно не null .

Или, если мы сомневаемся в переменной state , мы могли бы вернуть this.state?.data .

Предложение в настоящее время находится на Stage 1 в качестве экспериментальной функции. Вы можете прочитать об этом тут, и можете использовать его в своем JavaScript через Babel, добавив @babel/plugin-proposal-optional-chaining в ваш .babelrc файл.


4. Преобразование в Boolean

Помимо обычных логических значений true и false, JavaScript также обрабатывает все другие значения как «правдивые» или «ложные».

Если не указано иное, все значения в JavaScript являются «правдивыми» за исключением 0, «», null, undefined, NaN и, конечно false — которые являются «falsy».

Мы можем легко переключаться между true и false, используя отрицательный оператор !, который также преобразует тип в «boolean» .

Этот тип преобразования типов может быть полезен в условных выражениях, хотя единственная причина, по которой вы бы решили определить false как !1, это если бы вы играли в code golf!

5. Преобразование в String

Чтобы быстро преобразовать число в строку, мы можем использовать оператор конкатенации + , за которым следует пустой набор кавычек «» .

6. Преобразование в Number

Обратное можно быстро сделать с помощью оператора сложения + .

Это также может быть использовано для преобразования boolean в числа, как показано ниже:

Могут быть контексты, в которых оператор + будет интерпретироваться как оператор конкатенации, а не как оператор сложения. В таком кейсе (вы хотите вернуть целое число, а не с плавающей точкой), вы можете использовать тильды:

Тильда, известная как «побитовый оператор НЕ», является оператором, эквивалентным -n — 1 . Так, например,

Использование двух тильд подряд отрицает операцию, потому что — ( — n — 1) — 1 = n + 1 — 1 = n . Другими словами,

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

7. Быстрое возведение в степень

Начиная с ES7 стало возможным использовать оператор возведения в степень ** как сокращение для степеней, что быстрее, чем запись Math.pow(2, 3). Это простой материал, но он попал в список, потому что не так много учебных содержит этот оператор!

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

До ES7 сокращение существовало только для степеней с основанием 2 с использованием оператора побитового сдвига влево FrontEndDev и Web Stack в Telegram, чтобы не пропустить самое интересное из мира Web!

Показать скрытый текст на JS

Сегодня мы научимся показывать и скрывать текст, при клике по кнопке, на чистом JavaScript. Такой прием обычно используют на сайтах, с целью экономии места, когда публикуют только часть информации и кнопку. При клике по кнопке, раскрывается остальная часть.

Демонстрация примера

HTML структура

Внутри тега p, поместим текст, разделим текст на две части, между ними поставим три точки, которые обернем в тег span с идентификатором dots. Вторую часть текста, так же обернем в тег span с идентификатором more. Ниже создадим кнопку и повесим на нее событие клика, при котором будет выполняться функция с названием showMore.

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

CSS код

Изначально скроем вторую часть текста с идентификатором more.

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

JS код

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

function showMore() <
var dots = document.getElementById(«dots»);
var moreText = document.getElementById(«more»);
var btnText = document.getElementById(«btn»);

Теперь нам надо сделать проверку, видимы ли точки? Если невидимы (display находится в состоянии none. ), то показываем точки, меняя значение none на inline, а текст в переменной moreText скрываем. На кнопке прописываем текст: «Показать больше».

if (dots.style.display === «none») <
dots.style.display = «inline»;
btnText.innerHTML = «Показать больше»;
moreText.style.display = «none»;
>

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

else <
dots.style.display = «none»;
btnText.innerHTML = «Показать меньше»;
moreText.style.display = «inline»;
>
>

Условный оператор if-else, работает по принципу: или так / или сяк, одно из условий должно выполняться.

Добавим ещё CSS стилей для красоты

div <
background: #f2eaea;
margin: 0 auto;
max-width: 600px;
padding: 20px;
>

#btn <
background: #2196F3;
border: none;
font-size: 18px;
font-weight: bold;
color: white;
padding: 10px;
text-transform: uppercase;
>

Если хотите научиться создавать на нативном JavaScript больше интерактивных компонентов, то Вам в помощь, этот замечательный видеокурс «JavaScript, jQuery и Ajax с Нуля до Гуру».

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (https://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: https://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: https://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 1 ):

    Здравствуйте Михаил. Подскажите пожалуйста как мне скрыть половина текста с МАРКОЙ АВТО? https://doskavsem.ru/board/avtomobili/legkovye-avtomobili-618.html

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    10 несуразностей и секретов JavaScript

    JavaScript. Причудливый и все-таки прекрасный язык программирования. Если бы Пабло Пикассо был программистом, то он наверняка бы разработал именно JavaScript. Null является объектом, пустой массив эквивалентен false , а функции перебрасываются словно теннисные мячи.

    Мастер Йода рекомендует:  Подборка материалов для изучения баз данных и SQL

    Типы данных и определения

    1. null — это объект

    Начнем с широко известной странности JavaScript. null является объектом. Сомневаетесь? Ведь данное утверждение противоречит самой сути null . Вот доказательства:

    Несмотря на очевидный факт, null не является реализацией никакого базового объекта. (Если вы не знали, значения в JavaScript являются реализациями базового объекта. Так, каждое число является реализацией объекта Number , каждый объект является реализацией объекта Object .) Такое положение возвращает нас обратно к практическому смыслу, потому что если null является отсутствием значения, то он не может быть реализацией какого-либо объекта. Следовательно следующее выражение возвращает false :


    2. NaN — это число

    Считаете факт представления null объектом странным? Попробуйте проверить NaN ! Он оказывается числом! Кроме того, NaN не равен самому себе!

    В действительности NaN не равен ничему. Единственный способ проверить значение NaN — функция isNaN() .

    3. Массив без ключей == false

    Другая причуда JavaScript:

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

    Существует множество описаний концепции истины и лжи, но самое простое объяснение таково: в JavaScript каждое нелогическое значение имеет встроенный логический флаг, который используется тогда, когда значение должно рассматриваться как логическое, например, при сравнении с другим логическим выражением.

    Чтобы произвести сравнение значений разных типов JavaScript сначала приводит их к общему типу данных. False , 0 , null , undefined , пустая строка и NaN становятся false —?только для заданного выражения сравнения. Например:

    Здесь имеется попытка сравнить число 0 с логическим значением false . Так как типы данных несопоставимы, JavaScript незаметно приводит их к единому логическому эквиваленту, и в нашем случае 0 представляется как false.

    В выше приведенном списке не было пустого массива. Пустой массив — любопытная штука: в действительности он рассматривается как true , но при сравнении с логическим значением он ведет себя как false . Вот так!

    Чтобы избежать приведения типов нужно использовать оператор сравнения значений и типов === (в отличие от == , который сравнивает только значения). Например:

    Регулярные выражения

    4. replace() может получать возвратную функцию

    Это один из самых скрытых секретов JavaScript (который появился начиная с версии 1.3). Обычно вызов функции replace() выглядит примерно так:

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

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

    5. Регулярные выражения: больше, чем выделение подстроки и замена

    Обычно JavaScript программисты в своей практике используют только методы match и replace для регулярных выражений. Но кроме них в JavaScript есть и другие инструменты.

    Практический интерес представляет метод test() , который действует подобно match , но не возвращает значение: он просто подтверждает соответствие шаблону. То есть он легче для вычислений.

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

    Также обратите внимание на то, что с помощью объекта RegExp вы можете создавать динамические регулярные выражения. В основном регулярные выражения составляются с использованием коротких форм (то есть строк, заключенных в прямые слеши) и в них нельзя использовать переменные . Но RegExp() позволяет обойти ограничение.

    Здесь мы создаем динамический шаблон на основе значения аргумента word . Функция возвращает количество совпадений полного слова word (то есть не являющегося частью других слов) в строке. В нашем примере car встречается один раз, а слова Carl и card игнорируются.

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

    Функции и область видимости

    6. Вы можете обманывать область видимости

    Область видимости, в которой выполняется код, определяет доступность переменных. Свободный код JavaScript (то есть код, который выполняется вне какой-либо функции) оперирует глобальной областью видимости объекта window , где имеет доступ ко всему. А локальные переменные, объявленные внутри функции, доступны только внутри данной функции, но не вне ее.

    В данном примере наша переменная и функция объявлены в глобальной области видимости (то есть в window ). Так как this всегда указывает на текущую область видимости, то здесь он указывает на window . Следовательно функция ищет window.animal . Нормальная ситуация. Но мы можем заставить нашу функцию считать, что она выполняется в другой области видимости, которая отличается от ее нормального состояния. Для этого используется встроенный метод call() для вызова функции:

    Здесь функция выполняется не в window, а в myObj , что определяется первым аргументом при вызове метода call. По существу метод call() имитирует ситуацию, что наша функция является методом myObj . Обратите внимание, что все переданные аргументы после первого в метод call() передаются в нашу функцию — здесь lovely становится значением аргумента adjective .

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

    Также есть метод apply(), который действует аналогично call() , за исключением того, что аргументы должны быть указаны в массиве. Выше приведенный пример с использованием apply() будет выглядеть так:

    7. Функция может вызывать сама себя

    Сложно отрицать следующий факт:

    Синтаксис примера достаточно прост: мы объявляем функцию и немедленно вызываем ее, как другую с помощью синтаксиса () . Может возникнуть вопрос «А зачем так делать?». Обычно, функция содержит код, который планируется использовать позже и в другом месте, иначе не нужно размещать его в функции.

    Хорошим примером использования самовызывающихся функций (они иногда обозначаются аббревиатурой SEF) является привязка текущего значения переменной для использования внутри отложенного кода, такого как возвратные функции для событий, таймаутов и интервалов. Есть проблема:

    Новички бывают удивлены тем, что Newbies функция alert в timeout выдает goodbye, а не hello . Ответ достаточно прост возвратная функция timeout не вычисляет значения someVar до момента своего выполнения, поэтому в ней оказывается значение goodbye .

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

    В данном примере код выдаст сообщение hello , так как используется изолированное значение someVar (то есть аргумент функции, а не внешняя переменная).

    Браузеры

    8. Firefox читает и возвращает значение цвета в формате RGB , а не hex

    Непонятно, почему Mozilla так делает. Определенно, из JavaScript удобнее работать с форматом hex , а не RGB. Например:

    Большинство браузеров выведут ff9900 , а Firefox — rgb(255, 153, 0) . Нужно использовать функцию JavaScript для конвертации RGB в hex .

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

    Метод jQuery css() возвращает значение, определяемое в стиле для элемента. Поэтому, для действительного значения нужно использовать getComputedStyle и currentStyle .

    Разное

    9. 0.1 + 0.2 !== 0.3

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

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

    Для того чтобы преодолеть данный казус есть два метода (выбор за вами):

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

    Например, вместо такого кода:

    Можно построить выражение так:

    В данном примере результат сложения 0.1 + 0.2 оценивается как попадание в диапазон чисел около 0.3 с точностью 0.001. Для точных вычислений такой метод явно подходит плохо.

    10. Undefined может быть Defined

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

    На первый взгляд все отлично. Но:

    Данный урок подготовлен для вас командой сайта ruseller.com
    Источник урока: coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/
    Перевел: Сергей Фастунов
    Урок создан: 1 Марта 2012
    Просмотров: 35515
    Правила перепечатки

    5 последних уроков рубрики «Разное»

    Как разместить свой сайт на хостинге? Правильно выбранный хороший хостинг — это будущее Ваших сайтов


    Проект готов, Все проверено на локальном сервере OpenServer и можно переносить сайт на хостинг. Вот только какую компанию выбрать? Предлагаю рассмотреть хостинг fornex.com. Отличное место для твоего проекта с перспективами бурного роста.

    Разработка веб-сайтов с помощью онлайн платформы Wrike

    Создание вебсайта — процесс трудоёмкий, требующий слаженного взаимодействия между заказчиком и исполнителем, а также между всеми членами коллектива, вовлечёнными в проект. И в этом очень хорошее подспорье окажет онлайн платформа Wrike.

    20 ресурсов для прототипирования

    Подборка из нескольких десятков ресурсов для создания мокапов и прототипов.

    Топ 10 бесплатных хостингов

    Небольшая подборка провайдеров бесплатного хостинга с подробным описанием.

    Быстрая заметка: массовый UPDATE в MySQL

    Ни для кого не секрет как в MySQL реализовать массовый INSERT, а вот с UPDATE-ом могут возникнуть сложности. Чтобы не прибегать к манипуляциям события ON_DUPLICATE можно воспользоваться специальной конструкцией CASE … WHEN … THEN.

    5 jQuery-фич, перешедших в нативный JavaScript

    Сегодня у нас рассказ пойдет про jQuery и о том влиянии, которое он оказал на развитие современных браузеров. А рассмотрим мы это влияние на примере фич, которые, фактически, перекочевали из него в нативный JavaScript.

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

    Фича #1: querySelector

    Кто пользовался jQuery, тот знает, что если в функцию $, являющуюся коротким синонимом для более длинной переменной jQuery, передать строчку с любым валидным CSS-селектором, то на выходе мы получим коллекцию из найденных элементов, соответствующих этому селектору. Это будет нативная JS-коллекция, обернутая в jQuery-оболочку, у которой на прототипе есть полезные методы и свойства, которые, собственно описаны в документации библиотеки.

    Конечно функция $ намного более функциональна, ведь она позволяет создавать DOM-ноды и делать другие полезные штуки. Но для нас интересно то, что с некоторых пор в нативном JS имеются не только исконные, содержащиеся на document методы getElementById, getElementByClassName и остальные, а еще и querySelector с querySelectorAll.

    Первые очень специфичны и каждый раз нужно задумываться что применить, со второй группой все намного проще — передал селектор и получил ответ в виде коллекции DOM-нод. Очень удобно.

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

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

    Или еще короче, в стиле ES6:

    По сути мы передаем строку с селектором в нашу функцию и оттуда возвращаем результат работы нативной функции. Все просто.

    Использовать такие функции становится очень удобно:

    Вот это заселектит нам кнопку и сохранит в переменную myBtn.

    Если это не пересекается с другими библиотеками, то можно вовсе переименовать qSA в символ доллара и будет «типа jQuery» =)

    Фича #2: />

    classList имеет внутри себя каждая нода браузера. Я заселектил элемент и вижу у него classList. Кстати, в консоли инструментов разработчика в Chrome обратиться к последнему выделенному элементу в DOM-дереве можно через $0.

    Подробно про инструменты Хрома я рассказывал в другом видео:

    Пока список классов пуст, но если вызвать метод add, то класс можно добавить. С помощью remove его можно удалить, а через toggle можно его переключать — если был, то удалится и наоборот.

    Все это произросло из jQuery-методов addClass, removeClass и toggleClass — как видите, названия тоже перекочевали.
    У classList есть еще полезные методы — рекомендую вам с ними познакомиться, потому что операции с нодами это то, что в JavaScript делают наверное чаще всего и умение минимумом кода достигнуть максимум результата это полезный навык.

    Фича #3: closest

    Очень полезный метод. Суть его в том, что мы передаем в функцию селектор, по которому нужно найти ближайший родительский элемент к тому, на котором мы эту функцию запускаем. Этим методом удобно проверять, а есть ли тот или иной родитель у элемента среди всех его родительских нод и есть ли там, скажем, нужный data-атрибут или класс.

    Фича #4: fetch

    Вы наверное слышали про AJAX, который является совокупностью подходов для выполнения асинхронных (и если надо, то синхронных) HTTP-запросов. Для этого в браузерах существовал издавна объект XMLHttpRequest или сокращенно XHR. Пользоваться им в чистом виде достаточно проблематично и некрасиво с точки зрения оформления кода, поэтому программисты всегда писали обертки, вызывающие нативные функции. Подобные тому, что я привел для querySelector.

    Вот так выглядит простейший код с XHR-запросом:

    Согласитесь, громоздко. А вот пример запроса, но с помощью jQuery-функции ajax:

    Однако в современных браузерах появился fetch, который выглядит вот так для того же запроса:

    Не правда ли синтаксис очень похож? Тут ясно откуда растут ноги. Fetch, кстати работает внутри все равно используя тот самый XHR, но так ведь писать код намного удобнее и компактнее! Кстати, удобство в fetch доситигается за счет промисов.

    Фича #5: Promise и Deferred

    Про промисы в последнее время говорят очень много. Да и не только говорят, а используют при написании кода, потому что с приходом ES6 (он же ES2015), промисы стали частью нативного API браузерного JS. Короче говоря, о промисах вы скорее всего слышали, но вероятно не знали, что эта концепция намного старше JavaScript и не относится исключительно к нему.

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

    Мастер Йода рекомендует:  Шаблоны в PHP для чайников PHP

    Другие языки также имеют свою реализацию промисов, например, Ruby, Python, Closure и другие. Но нас интересует сфера JS и jQuery.

    В jQuery есть объект Deferred, как раз реализующий конкретную спецификацию промисов, о чем недвусмысленно сказано в документации.

    Давайте посмотрим на простейший пример того, как работает Deferred:

    Сначала я определяю функцию deferredOperation, внутри которой создаю Deferred-объект (изначально он в состоянии неопределенности или ожидания — pending) и говорю что через полторы секунды он должен будет перевестись в состояние resolved — успешно разрешен, или в состояние rejected — то есть отменен.
    И этот экземпляр Deferred я из функции возвращаю.

    Обращаю внимание, что return dfd выполнятся до того, как setTimeout отсчитает свои полторы секунды. То есть он сработает асинхронно, или иными словами параллельно синхронному коду. Внутри setTimeout генерируется дробное случайное значение от 0 до 1 и если получившееся больше 0.5, то на dfd вызываем функцию resolve, тем самым переводя промис в состояние resolved. Ну или в rejected с помощью метода reject, если Math.random() нам нагенерил число меньше 0.5.

    Далее я возвращенное значение из выполненной функции deferredOperation присваиваю промежуточной переменной result. А затем говорю, что если dfd переведется в состояние resolved, то выполнится тот колбэк, что внутри done. А иначе — тот, что внутри fail.

    Получается что мы можем расставить наши done и fail где угодно и они сработают как только Deferred разрешится в какое-то состояние. Мы ведь не знаем сколько например займет сетевой запрос — это зависит от задержек в сети. Поэтому такой синтаксис очень удобен в этом случае, как собственно и в любом другом случае, когда мы не знаем сколько точно займет та или иная операция.

    На самом деле, уже рассмотренная нами jQuery-функция ajax также возвращает Deferred-объект. Так что можно будет сделать что-то когда запрос завершится. Совершенно по аналогии с предыдущим примером. В нем эмулятором задержки был setTimeout, кстати говоря.

    А здесь задержка в запросе действительно будет непредсказуема:

    Здесь мы делаем ajax-запрос с помощью jQuery и так как подразумевается что Deferred возвращется, то по цепочке можно выполнить done и fail. Но можно, как и до этого, присвоить результат запроса в промежуточную переменную и потом вызывать done и fail где-то дальше в коде.

    Итак, сейчас я вам очень коротко показал как устроен Deferred в jQuery, хотя многие моменты мы не затронули, инчае бы все затянулось.

    Браузерный же Promise это тоже конкретная реализация спецификации. В новых браузерах это доступно «искаропке», а для более старых можно подключить полифилл.

    Вот так работают промисы в сегодняшнем нативном JavaScript:

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

    Далее then будет срабатывать если промис разрешается успешно (если был вызван resolve), и catch, если промис был отменен через вызов rejected.

    Если вас смущают стрелочные функции, что я использовал, рекомендую ролик из моего курса по React, где подробно рассказывается про них и про другие ES6-возможности:

    А вот пример с fetch:

    Здесь мы делаем запрос на фейковый API, затем ответ интерпретируем как JSON и выводим результат в консоль. В противном случае сработает catch и мы выведем ошибку.

    Fetch возвращет Promise, который умеет делать then и catch. Совершенно по аналогии с Deferred, который умеет делать done и fail. Так что можно сказать, что из jQuery это перекочевало в нативный JS.

    30 сайтов-примеров отличного использования JavaScript Материал редакции

    Ресурс Creative Bloq опубликовал материал, в котором его авторы поделились с читателями лучшими, на их взгляд, примерами использования JavaScript для создания сайтов. ЦП выбрал 30 самых интересных ресурсов.


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

    1. Портфолио Майка Куса

    Портфолио веб-дизайнера Майка Куса выполнено в «чистой и сдержанной манере», пишут редакторы Creative Bloq. В нём большие изображения сочетаются с простыми элементами пользовательского интерфейса.

    «Я думаю о своих работах, как о бренде. Нет никакой необходимости добавлять в мой сайт лишние элементы дизайна», — говорит Кус.

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

    2. Hello Monday

    Сайт креативного агентства Hello Monday претерпел значительные изменения, замечают авторы статьи. Разработчиками компании была проделана огромная работа. Им удалось сделать интерфейс дружелюбным для пользователя.

    Старый сайт агентства Hello Monday

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

    Обновлённый сайт Hello Monday

    «Мы пытались отойти от шаблонного представления о том, как должен выглядеть сайт креативного агентства», — рассказывает Кэти Хертел, руководитель проекта по редизайну веб-страницы Hello Monday. Авторы материала находят сайт очень привлекательным и отзывчивым, чему способствует организация проектов на главной странице: она автоматически дополняется новыми работами агентства при прокрутке вниз.

    3. Multeor

    Multeor — это многопользовательская онлайн-игра, написанная на JavaScript с использованием элемента canvas HTML5. Она разработана Арьеном де Врайзом и Филидором Вайзе, а спроектирована Артуром ван Хугом. Основная задача пользователя в игре — контролировать падение метеоритов, получая очки за оставленные им разрушения.

    Игра использует Node.js-сервер для управления связью между настольными и мобильными устройствами с помощью WebSockets.

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

    Мы писали всё сами — это было очень увлекательно, к тому же, мы узнали много нового. То, что мы не зависели от конкретных сборок и префабов, дало нам определённую свободу действий: не нужно было заниматься рендерингом существующей графики, обработкой коллизий и отдельно описывать систему, отвечающую за взрывы.

    4. Crime Timeline

    Crime Timelime — агрегатор, собирающий данные о преступности в Великобритании с помощью публичных API. Он позволяет пользователям узнать, как обстоят дела в их регионе.

    «Мы организовали сайт таким образом, чтобы он показывал карту региона и места совершения преступлений — за месяц, выбранный пользователем на панели снизу», — говорит разработчик проекта Алекс Миллер.

    Ресурс использует API Google Maps, для создания панели с месяцами применялись jQuery и jQRangeSlider. Когда пользователь взаимодействует с картой — например, щелкает мышкой в определенное место на ней, сайт обновляет изображение с помощью JavaScript. «Пузырьки», показывающие количество преступлений, были созданы с помощью CSS и анимированы с помощью jQuery.

    5. Here is Today

    На сайте Here is Today язык JavaScript использовался для создания анимации. Создатель ресурса, дизайнер Люк Твимэн, так объясняет свою идею: «Я хотел создать что-то, что дало бы каждому человеку ощущение масштаба времени. Here is Today помогает понять, насколько обширна история вселенной».

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

    Это второй проект на JavaScript, созданный дизайнером, и в нём он применил элементы, которые не использовал в предыдущем. Однако Твимэн находит в языке множество сходств с другими высокоуровневыми языками программирования, к тому же, по его словам, JavaScript имеет довольно подробную документацию, а в интернете (в том числе на тематических формах) разобрано большое количество примеров.

    6. Tweetmap

    Tweetmap изображает на страны на карте пропорционально количеству отправленных из них твитов. Разработчик сервиса Роб Хоукс перечисляет несколько технологий, использованных при его создании: TopoJSON, D3.js, Node.js, PhantomJS, и специальные алгоритмы построения смежных картограмм в режиме реального времени.

    Мы выбрали Node.js, потому что у нас уже был опыт его использования, и потому что это простая, быстрая и гибкая платформа. Для анимации карты (в формате TopoJSON) мы используем D3 — фантастическую библиотеку для визуализации данных. В частности, мы широко применяем модуль geo, который позволяет делать сложные географические расчеты и преобразования.

    Чтобы избежать проблем с представлением карт в браузере клиента, система генерирует карты на сервере с помощью D3, запускает и рендерит их с помощью движка PhantomJS, и только потом передаёт пользователю — это позволяет не создавать «дыр» при показе карт.

    7. The Trip

    The Trip — интерактивный фильм, созданный с помощью JavaScript и HTML5 (без использования Flash). Отто Наскарелла, создатель проекта, считает, что задача разработки подобного сервиса оказалась очень сложной:

    Большинство трудностей, с которыми мы столкнулись, были связаны с тем, что HTML5 на момент написания сайта не имел средств для кросс-браузерной разработки. Тогда мы решили, что будем рекомендовать клиентам использовать Chrome.

    Код сайта на JavaScript использует jQuery практически для всех задач. Разработчики также применяли TextBlur и TextDrop — для размытия и анимации текста.

    8. Si Digital

    Эта страница, написанная на JavaScript — новое портфолио и блог дизайнерского и маркетингового агентства Si Digital. Ведущий разработчик проекта Алекс Крук так объясняет анимацию на главной странице: «Жидкость, движущаяся по трубам, ведёт пользователей по нашему портфолио — она активирует анимацию изображений на каждом из этапов исследования сайта клиентом».

    Для достижения подобного эффекта Крук применил метод jQuery.animate(). К тому же, добавляет он, нужно было правильно выбрать скорость заполнения жидкостью труб — ведь все читают с разной скоростью.

    Интерактивный график на странице с описанием выполненных проектов и команды агентства, реализован с помощью jQuery. Временная шкала, по словам Крука, генерируется динамически — на основе информации из базы данных, с использованием технологии Ajax.

    9. Сайт Жана Хальфстейна

    Жан Хальфстейн — веб-дизайнер. В его портфолио авторов статьи больше всего привлекла главная страница — и анимация на ней. «Я действительно неплохо провёл время, пока возился с различными эффектами. Я очень люблю использовать новые технологии, так что решил сделать основную страницу своего сайта своеобразной песочницей — там я развлекаюсь с Three.js и элементом canvas HTML5», — рассказывает Хальфстейн.

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

    10. Портфолио Ника Джонса

    По словам Джонса, когда он разрабатывал сайт, у него было больше опыта в работе с Flash, чем с JavaScript, но ему захотелось попробовать что-нибудь новое — чтобы понять, на что он способен. «Я сразу понял, что синтаксис JavaScript почти такой же, как синтаксис ActionScript — поэтому очень скоро полностью освоился», — описывает процесс написания кода Джонс.

    Джонс вспоминает, что Flash не давал ему доступа к работе с движениями мыши — это был новый опыт, который ему очень понравился. Разработчик хотел добиться такой отзывчивости сайта, которой он не мог достичь, используя переходы между классами в CSS. Джонс доволен достигнутым результатом:

    Если вы собираетесь перейти с ActionScript на JavaScript, не медлите ни секунды. Делая свой сайт, я хотел понять, способен ли JavaScript на то, на что способен Flash. И я очень впечатлён.

    11. MapsTD

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

    Создатель проекта Дункан Барклай объясняет, как это работает: «Мы использовали API Google Maps, MooTools и JavaScript. Самая сложная часть — поиск маршрута, которым будут следовать враги пользователя. Как только игрок выбрал начальную точку, сервис осуществляет поиск долготы и широты, и вычисляет возможные пути c помощью Google».

    По ходу игры на экране появляется всё больше противников. Барклай рассказывает, что разработчикам пришлось «бороться» c таймингом браузеров — дело в том, что большинство из них со временем снижает частоту проверки обновлений на странице, и нужно было сделать так, чтобы этого не происходило.

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

    12. Glimpse Catalogs

    Ресурс Glimpse разработан совместно командой Windows IE и проектом TheFind, и соединяет в себе систему поиска TheFind и приложение тех же разработчиков для онлайн-шопинга на Facebook. В рамках Glimpse программисты выпустили собственный фреймворк, основанный на Turn.js.

    Целью команды с самого начала было сделать из Glimpse веб-приложение, а не обычный сайт. Разработчики использовали парадигму «модель-представление-поведение», которая разделяет на три отдельных компонента модель данных, пользовательский интерфейс и взаимодействие с клиентом. Сервис применяет шаблоны рендеринга моделей на стороне клиента Thrift или JSON — в зависимости от вычислительной мощности клиента.

    Библиотека Turn.js также использовалась при разработке каталогов. С помощью CSS и JavaScript моделям, представленным на сайте, придаётся объём — за счет наложения теней на изображение.

    13. Red Bull Music Academy Radio

    RBMA Radio использует инструмент Modernizr, который позволяет вести кросс-браузерную разработку на HTML5 и CSS. Modernizr постоянно обновляется, так что создатели сайта могут улучшать код по мере представления новых возможностей.

    Кроме того, при реализации сервиса применена библиотека Backbone.js — с помощью неё подгружаются плитки для создания эффекта бесконечной страницы.

    14. Nouvelle Vague

    Nouvelle Vague — сайт от французского дизайнерского агентства Ultranoir. Сервис позволяет «отслеживать» твиты по заданному хештегу. Он реализован с помощью JavaScript, WebGL и HTML5. HTML5, правда, отвечает только за тизер при открытии ресурса.

    Один из разработчиков агентства рассказал, что на создание сайта ушло четыре месяца, а трудились над ним три человека. «Нам было очень интересно попробовать поработать с WebGL», — объясняет он.

    Основная цель проекта заключалась в том, чтобы при помощи 3D-изображений воссоздать атмосферу из видеозаставки. Команда погрузилась в новые технологии HTML5, CSS3 и JavaScript, и считает, что эти языки могут стать стандартами для работы с 3D в будущем — из-за качественного рендеринга, богатых возможностей взаимодействия и реагирования.


    15. The Convergence

    The Convergence — браузерная игра, своей ретро-графикой напоминающая Super Mario Bros. Она демонстрирует потрясающие возможности JavaScript и HTML5 и доказывает, что HTML5 справляется со своими задачами ничуть не хуже, чем Flash.

    Разработчики обещают в будущем добавить в игру аудиосопровождение и новые уровни, а также поддержку Mozilla Gamepad API.

    16. Kindle Cloud Reader

    Это веб-приложение превращает слова «купите один раз, читайте на всех устройствах» в реальность. Оно использует технологии HTML5, JavaScript API, библиотеки jQuery и jQuery UI и несколько плагинов jQuery, в том числе jScrollPane для прокрутки страниц и jQuery Templates. Кроме того, команда разработчиков воспользовалась WebSQL для поддержки офлайн-режима.

    17. Les Enfants Terrible

    Сайт, запущенный студией WeFail, считают авторы заметки, выглядит страшновато, но всё равно очень круто. Ресурс выполнен в довольно резком стиле. JavaScript используется для анимации при взаимодействии пользователя и системы. Чтобы прокручивание осуществлялось только для отдельных элементов интерфейса, командой был применён плагин jQuery ScrollTo. Для появления видео не во всплывающих окнах, а прямо на сайте использовалась библиотека Shadowbox.js.

    Мастер Йода рекомендует:  Обработка строк в РНР

    Кроме того, в коде Les Enfants применяется плагин jQuery Cycle — он отвечает за отображение картинок и примеров работ агентства.

    «Мы запустили Les Enfants, чтобы понять, какие возможности по производительности имеются у JavaScript. Оказалось, что в сочетании с СSS Transform можно добиться отличных результатов», — говорит разработчик Мартин Хью.

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

    18. Pinterest

    Pinterest — яркий пример использования JavaScript для создания эффекта бесконечной страницы. Для создания сайта понадобились инструменты jQuery, jQuery UI и плагин PageLess.

    Как считают авторы заметки, PageLess жизненно важен для Pinterest, потому что бесконечная прокрутка и прогрузка новых пинов гораздо эффективнее помогает удерживать внимание пользователя, чем социальные функции — например, комментирование записей.

    19. Love Bomb Builder

    Love Bobm Builder помогает пользователям выразить свою любовь или благодарность кому-либо. Это аккуратный и простой сайт, который позволяет создать и отправить послание-бомбу.

    Ресурс иcпользует инструмент Modernizr для своевременного обновления кода на JavaScript и HTML5.

    20. Michelberger Booze

    Когда пользователь попадает на сайт, первым делом он видит так называемый «прелоадер» — может показаться, что он выполнен при помощи Flash, но это не так. За наполнение стакана пивом по мере загрузки отвечает HTML5 и JavaScript.

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

    Нажимая на маски животных, клиент отправляется к другим сценам — все анимационные эффекты в которых исполнены при помощи jQuery.animate().

    21. Trello

    Trello — приложение для совместного или индивидуального планирования, в котором пользователи могут создавать списки выполненных и невыполненных задач и делиться прогрессом в режиме реального времени. Сайт разработан с использованием Node.js, MongoDB и Backbone.js.

    Один из создателей Trello Даниэль ле Черминан поясняет, что применение только одного языка при написании сайта помогает новым членам команды быстрее влиться в процесс разработки.

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

    22. BrowserQuest

    Это игра в ретро-стиле, созданная студией Little Workshop, призвана продемонстрировать возможности HTML5, JavaScript и, в особенности, Web Sockets. Он может одновременно поддерживать взаимодействие между тысячами пользователей.

    «Создание многопользовательской игры — отличный способ продемонстрировать, как такие технологии могут работать вместе. BrowserQuest опирается на серверы Node.js, каждый из которых может запустить несколько экземпляров игрового мира», — рассказывает разработчик студии Гийом Лекольне.

    23. JS1k

    JS1k — ежегодный конкурс, задача участников которого создать страницу на JavaScript на заданную тему (чаще всего — анимированные изображения). Её вес не должен превышать 1 КБ.

    Тема этого года — «Here be dragons».

    Работа-победитель конкурса в 2012 году. Автор — Филипп Бучанан, тема — «Любовь»

    Работа победителя 2012 года изначально весила 8 КБ — но за день Филипп смог сократить её размер до требуемого 1 КБ, оптимизировав алгоритм генерации дерева:

    Моей тактикой был «честный обман» компилятора. Например, использование конструкции «a ? b : c» вместо «if (a) b else c» экономит 8 байтов.

    24. Timeline

    Сервис помогает пользователям создавать таймлайны, и он очень прост в использовании. В интерактивную шкалу можно включать твиты, видео, фотографии и аудиозаписи. Свой таймлайн можно описать с помощью JSON или Google Docs — как удобнее самому клиенту.

    25. Draw a Stickman

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

    Для создания игры использовались jQuery и библиотека для работы с векторной графикой Raphal.js. Реализация проекта с помощью Raphal помогла разработчикам избежать проблем с производительностью на большинстве устройств и во всех браузерах.

    26. Panera Bread

    Рекламный сайт сети пекарен Panera Bread был создан агентством Luxurios Animals. Технический директор студии Дэн Федермен говорит, что разработчики с самого начала решили реализовывать проект на CSS3 там, где это возможно, а для всего остального использовать JavaScript.

    Анимация с помощью CSS3 обеспечивает плавность переходов на всех типах устройств. Кроме того, команда воспользовалась библиотекой Hammer.js для обработки прикосновений, Backbone.js для создания моделей данных, плагинами jQuery Transit и Isotope и HTML.

    27. Peanut Gallery

    Peanut Gallery — проект, реализованный Google Creative Lab. Сайт позволяет пользователям добавлять озвучку в «немые» короткометражки с при помощи микрофона. Ресурс использует Google Speech API и JavaScript API — они помогают интегрировать распознавание речи в веб-приложения.

    Валден Кламп, один из разработчиков проекта, выделяет на его взгляд интересную особенность Google Speech API — динамического распознавание речи. Например, если англоязычный пользователь начинает произносить «European Union», то сначала распознаётся слово «your» или «year» и лишь под конец оно преобразовывается в «European». Ещё одна полезная возможность — распознавание знаков препинания. Словосочетания «вопросительный знак», «восклицательный знак» и другие автоматически превращаются в соответствующие им пунктуационные знаки.

    28. The Interactive Ear

    «Интерактивное ухо» создано агентством Epiphany Solutions для своего клиента Amphilon, который специализируется на слуховых аппаратах и других решениях для слабослышащих людей. Ресурс ориентирован на детей возраста младшей и средней школы. Сайт состоит из трёх «витрин», демонстрирующих, как устроено человеческое ухо.

    Создатель проекта Брайан Джеймс отмечает, что благодаря использованию JavaScript, HTML5 и CSS команда смогла достичь максимальной производительности даже в устаревших и неподдерживаемых браузерах. Анимации при исследовании уха с помощью лупы — это GIF-изображения.

    29. Violin

    Violin — инструмент для визуализации кода на JavaScript. Он показывает, как части приложения взаимодействуют друг с другом в режиме реального времени. Сам сайт выполнен на JavaScript с использованием библиотеки D3.js для построения графиков.

    30. Сайт Филиппы Грегори

    Сайт британской писательницы Филиппы Грегори, автора романа «Ещё одна из рода Болейн», выполнен по её заказу агентством Better. Основной задачей разработчиков являлась оптимизация площадки для всех видов устройств. Ресурс построен на базе FuelPHP CMS. JavaScript отвечает за пользовательский интерфейс, интерактивность и плавность переходов на сайте.

    [Без]опасный JavaScript. Изучаем проблемы кода на JS и выбираем средства борьбы с ними

    Содержание статьи

    Пять причин, почему сложно писать безопасный код на JS

    1. Компилятор не поможет

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

    2. Динамическая суть JavaScript

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

    Языковые средства вроде eval и включения стороннего кода через script src позволяют исполнять строки прямо в рантайме. Как следствие — сложно дать «статические гарантии» того, что код будет вести себя определенным образом. Динамический анализ это тоже затрудняет (см. научную работу).

    Слабая типизация приводит к тому, что применять устоявшиеся методы статического анализа непросто — по крайней мере в сравнении со статически типизированными языками (например, Java).


    Асинхронные колбэки, вызовы которых JavaScript допускает через механизмы вроде setTimeout и XMLHttpRequest (тот самый знаменитый AJAX), по статистике прячут в себе больше всего коварных ошибок.

    3. Замысловатые возможности JS

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

    Прототипы. Смысл их в том, что программы пишутся в духе объектно ориентированного подхода, но без использования классов. При таком подходе объекты наследуют необходимые им свойства напрямую от других объектов (прототипов). При этом в JS прототипы могут быть переопределены прямо в рантайме. И если это переопределение случилось, то эффект сразу же распространяется на все объекты, которые наследуют свойства переопределяемого прототипа.

    Как обрабатываются прототипы

    Справедливости ради надо сказать, что в новых спецификациях ECMAScript классы тоже присутствуют.

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

    Замыкания. Если объявить функцию внутри другой функции, то первая получает доступ к переменным и аргументам последней. Причем эти переменные продолжают существовать и остаются доступными внутренней функции — даже после того, как внешняя функция, в которой эти переменные определены, завершилась.

    Из-за такой гибкости и динамичности JavaScript определение набора всех доступных свойств объекта при статическом анализе — неразрешимая задача. Однако веб-разработчики повсеместно используют динамические особенности языка, а соответственно, пренебрегать ими при анализе кода нельзя. Иначе какая тут гарантия безопасности?

    4. Тесное взаимодействие между JavaScript и DOM

    Это нужно, чтобы обеспечить «бесшовное» обновление веб-страницы, прямо в рантайме. DOM, как известно, представляет собой стандартную объектную модель, нейтральную по отношению к платформам и языкам, которая предназначена для отрисовки документов HTML и XML. У DOM есть собственный API для работы с отображаемым документом: для динамического доступа, перемещения и обновления отображаемого документа (его содержимого, структуры и стиля). Изменения в DOM могут вноситься динамически, через JavaScript. И эти изменения сразу же отображаются в браузере.

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

    Наиболее распространенные ошибки в веб-приложениях

    5. Сложные событийные взаимодействия

    JavaScript — это язык, управляемый событиями (event-driven). Он позволяет разработчикам регистрировать на узлах DOM так называемых «слушателей событий» — event listeners. И хотя большинство событий вызываются действиями пользователя, существуют и такие, которые могут быть инициированы и без этого, — например, события по времени и асинхронные вызовы. При этом каждое событие может отдаваться эхом по всему дереву DOM и активировать сразу несколько «слушателей». Иногда отследить все это — довольно нетривиальная задача.

    Как обрабатываются события

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

    Продолжение доступно только участникам

    Вариант 1. Присоединись к сообществу «Xakep.ru», чтобы читать все материалы на сайте

    Членство в сообществе в течение указанного срока откроет тебе доступ ко ВСЕМ материалам «Хакера», увеличит личную накопительную скидку и позволит накапливать профессиональный рейтинг Xakep Score! Подробнее

    H Защита сайта: скрываем наши JavaScript сценарии от посторонних глаз в черновиках Из песочницы

    Для чего нам это?

    Что для этого нужно?

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

    а) Для тестирования создайте каталог на сервере.
    Я захожу на виртуальный диск, у меня это диск R, там же зайдите в папку home

    Создайте директорию script, а внутри создайте папку www, в итоге у вас получится: home/script/www/ — после этого обязательно обновите сервер (Restart Denwer)

    б) Создаем файл index.php – допустим, это наша главная страница сайта, и тут нам нужно выводить скрытые скрипты. Так же создайте папку «js» в этом каталоге.

    Для нашей задачи, потребуются AJAX-запросы, для этого вы можете использовать свои рациональные функции, но если ваш проект будет разрастаться до размеров, который потребует применение особых эффектов, событий, подключите библиотеку, а я подключу заранее jQuery, поэтому в корень папки «js» добавьте jquery.js.

    Затем в этой же папке создайте новую папку, в ней и будут храниться скрипты, которые нам нужно будет скрывать. Я назову ее «security»:

    в) Набираем предварительный код в index.php

    Как вы видите, присутствует блок

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

    Но для начала давайте создадим наши скрипты, которые хотим спрятать.

    г) В папке «security» создайте script1.js и script2.js, c таким вот содержимым, соответственно:

    Для примера достаточно и этого! Теперь, чтобы к ним нельзя было обратиться, необходимо задать это на сервере, это делается благодаря файлу .htaccess.

    .htaccess – это файл конфигураций, настраиваемый разработчиком, пользователем данного сервера.

    .htaccess имеет такое содержимое:

    После чего, на запрос:

    Вы увидите подобное:

    Тем самым ваша папка security скрыта от посторонних глаз, она является недоступной.

    Если вы попытаетесь подключить скрипты:

    То в любом случае, ваши файлы не будут выполняться, так как они глобально скрыты сервером

    д) Возвращаемся к программному php-блоку в index.php

    Суть в том, что PHP имеет доступ ко всем файлам на сервере, независимо, скрыты они или нет, то есть, если вы пропишете:

    то в данном случае мы с вами увидим содержимое нашего скрытого скрипта.

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

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

    е) Вот как будет выглядеть конечный результат:

    А теперь разбираемся, как это все работает. jQuery выполняет post-запрос (это помогает избежать дыр в работе index.php) на сервер «index.php?js=result», там идет проверка, если запрос с нашего сервера (функция strpos() и адрес нашего сервера «HTTP://script» – c учетом данного примера), то скрипт проверяет POST-переменную, то есть адрес нашего скрытого скрипта, и выдает текстовый результат. jQuery метод done() получает ответ в виде этого текстового содержимого, а уже этот текст можно преобразовать в рабочий javascript, это делает стандартная кроссбраузерная функция eval();

    В итоге

    Мы получаем свой результат, наши скрипты нельзя увидеть статически или динамически через консоль браузера, но легко увидеть их работу. Данные скрипты и их функции легко выполняются. Однако нужно хорошо подумать, чтобы применять данную технику, так как в данном случае поднимается вопрос производительности, быстродействия. Функция eval(code) среди разработчиков javascript считается злом, и рекомендуется использовать ее аналог new Function(‘return ’ + code), правда последнее не умеет выполнять определение функций внутри, то есть если в вашей переменной будет запись определения функции, code = “function test() ; test();”, то код не будет выполнен, а значит eval() подходит на все случаи жизни, правда имеет свои нюансы, о которых еще нужно дополнительно почитать.

    Скрыть div

    Здраствуйте! Извените в javaScript я слобо соображаю! мне нужен код который сообразно величине переменной скравает или же делает видимым div-слой. и неплохо поставить это всё на теймер(исполнять переодично)!

    Заранеее благодарен за помощь!

    15.08.2011, 00:28

    Скрыть один div и вывести второй div
    всем привет, уважаемые форумчане! ситуация такая: есть 2 div-а.

    скрыть пару div’ов
    добрый вечер. надеюсь на вашу помощь. ситуация следующая: есть

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

    Скрыть блок DIV
    Нужно скрыть блок div, если можно, объясните подробно,как это сделать.

    Отобразить/скрыть div по клику
    Здравствуйте! Я не очень разбираюсь в яве, но нужен код, по которому дивы в меню будут раскрываться.

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