Метка: JavaScript

Манипулирование степенью важности загрузки ресурсов в браузере

Для браузера не все ресурсы обладают одинаковой степенью важности и приоритета. Каждый браузер имеет свою своеобразную эвристику, согласно которой он определяет, какие ресурсы загружать в первую очередь, а какие – позже. Например, CSS стили имеют более важный приоритет, чем скрипты и картинки. Иногда браузер может неправильно расставлять приоритеты загрузки и подгружать с сервера менее важные ресурсы в самую первую очередь. Например, инструмент для повышения качества веб-страниц Lighthouse от компании Google рекомендует бороться с этим так:...

Уроки JavaScript – Все, что нужно знать о переменных

Одной из самых основных и фундаментальных концепций любого языка программирования является возможность хранения значений, которые позднее можно многократно использовать. Такие значения в программировании называются переменными. В сегодняшнем уроке мы рассмотрим переменные в JavaScript. В этом языке программирования для объявления переменных используются три зарезервированных ключевых слова: var, let или const.   Вы можете свободно использовать каждый из этих видов переменных, поскольку все они «нетипизированные», — т.е., это означает, что переменная может содержать значение любого типа данных....

Детальное описание техники ленивой загрузки изображений (Lazy Load)

Ленивая (или отложенная) загрузка картинок – это популярный метод асинхронного обращения к адресу изображения, по мере необходимости его загрузки, а не сразу после того, как HTML страницы был проанализирован браузером. Вы, скорее всего, уже видели эту реализацию в действии, поскольку этот метод используется на многих популярных сайтах. Сегодня невозможно представить себе Интернет без картинок и видео. Мы все привыкли к этому. Плюс, если на странице сайта нет каких-то графических элементов, нам тяжелее будет уловить смысл...

Как сделать красивую анимированную кнопку Поиск с CSS3 и jQuery

В сегодняшнем уроке мы на практике рассмотрим то, как можно создать простую, но очень красивую кнопку для поиска, всего лишь с помощью CSS3 и jQuery. Готовая кнопка будет выглядеть примерно так:     Для создания такой красивой анимированной кнопки для окна поиска мы будем использовать следующие инструменты: HTML – для структуры документа CSS3 – для стилевого оформления и анимации движения jQuery – для реагирования на нажатие кнопок     Некоторое время назад разработчики анимировали HTML...

Уроки JavaScript – примеры использования случайности

В JavaScript довольно часто нужно использовать случайность или случайное поведение. Самым простым примером будет получение случайного числа для проведения жеребьевки. Или, например, представить возможный результат броска монеты. Но существует много разных видов случайности, и для различных приложений нужно подбирать свой вид случайного результата.   Самая простая случайность Простейшей формой случайности, которая встроена в JavaScript, является функция Math.random(). Чтобы увидеть ее в действии, наберите в консоли браузера (вызов консоли Ctrl+Shift+I) функцию: Math.random(); //0.2735944957535754 – пример результата...

Что такое ключевое слово this в JavaScript

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

9 онлайн платформ, на которых можно быстро поделиться кодом

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

Знак доллара ($) и знак подчеркивания (_) в JavaScript

Знак доллара ($) и символ подчеркивания (_) являются идентификаторами в JavaScript, что означает, что они идентифицируют объект так же, как и его имя. Идентифицируемые ими объекты включают такие вещи, как переменные, функции, свойства, события и объекты. По этой причине эти символы не обрабатываются так же, как другие специальные символы. Вместо этого JavaScript обрабатывает $ и _ так, как если бы они были буквами алфавита. Идентификатор JavaScript (или просто имя для любого объекта) должен начинаться с...

Как отключить на странице клик правой кнопкой мыши с помощью JavaScript

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

JavaScript функции DOM, о которых вы не знали

Очень важно в процессе программирования использовать функции DOM и Web API, которые работают во всех современных браузерах и без каких-либо зависимостей. В сегодняшней статье мы рассмотрим малоизвестные функции DOM, у которых сильная поддержка в браузерах. Эти методы и свойства будут хорошо работать с любым набором инструментов, который вы будете использовать в своих проектах.     Вы наверняка использовали addEventListener(), чтобы привязывать события к элементам в документе. Обычно вызов addEventListener() выглядит примерно так: <script> element.addEventListener('click', doSomething,...

Уроки JavaScript – ознакомление с классами (часть 2)

Классы в JavaScript позволяют писать более чистый и читабельный код. Сегодняшняя статья продолжает тему классов в JavaScript, и в ней речь пойдет о таких понятиях, как поля классов, методы доступа геттеры и сеттеры. Это позволит вам улучшить свои навыки программирования и стать более продвинутым JavaScript разработчиком. Предыдущая статья цикла: Ознакомление с классами в JavaScript (часть 1)     JavaScript классы и поля классов Вы помните конструктор класса из предыдущего урока? Хорошей новостью является то, что...

Уроки JavaScript – ознакомление с классами (часть 1)

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

Краткое описание объектно-ориентированного программирования (ООП) в JavaScript

Объектно-ориентированное программирование – это популярный стиль программирования, который был внедрен в JavaScript на самых ранних этапах. Сейчас многие встроенные функции и методы JavaScript написаны в объектно-ориентированном стиле. Объектно-ориентированное программирование в JavaScript сильно отличается от объектно-ориентированного программирования в других языках. И в сегодняшней статье мы вкратце рассмотрим основы объектно-ориентированного программирования (ООП) в JavaScript.     Что такое объектно-ориентированное программирование в JavaScript Объектно-ориентированное программирование – это две составляющие: создание отдельных объектов из общего объекта и наследование. В...

Уроки JavaScript – не работают события jQuery после AJAX загрузки

Если вы используете AJAX на своем сайте, имейте в виду, что такие события, как клик (click), отправка (submit), наведение (hover), могут не работать, если вы не прикрепите их правильно. В сегодняшней статье мы рассмотрим практическое решение проблемы, когда не срабатывают события в jQuery после динамического изменения страницы (или AJAX).     Описание задачи Допустим, у нас есть блоки с заголовком и скрытым контентом в теге <p>. По клику на заголовке, скрытый контент показывается/прячется с помощью...

Уроки JavaScript – Шпаргалка по регулярным выражениям

В сегодняшней статье мы рассмотрим регулярные выражения в JavaScript, а также увидим практические примеры использования регулярных выражений в JavaScript скриптах. Регулярные выражения бывают довольно полезными, и их можно использовать практически во всех своих скриптах. Но, для этого нужна практика, поэтому ниже представлены основные примеры регулярных выражений, которые помогут вам в этом.     Шпаргалка регулярных выражений в JavaScript   Сокращенная запись поиска символов let regex; regex = /\d/;  //соответствует любой цифре regex = /\D/;  //соответствует...