Рубрика: 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/;  //соответствует...

Уроки JavaScript – строгий режим (strict-mode)

Когда разработчик пишет скрипты в строгом режиме, это облегчает ему создание «безопасного» JavaScript. По умолчанию JavaScript позволяет программисту писать код немного небрежно, например, не объявлять переменные с помощью var при первом их появлении. Хотя это может показаться удобным для некоторых разработчиков, такой подход может быть причиной многих ошибок, когда имя переменной написано с ошибкой или случайно указано вне ее области действия. Программисты любят заставлять компьютер делать за них скучные вещи и автоматически проверять их работу...

Уроки JavaScript – как получить текущую дату и время

Одной из самых интересных вещей в JavaScript является получение доступа к дате и времени, и дальнейшая работа с ними. На самом деле это очень легко, и в сегодняшней статье мы рассмотрим этот процесс очень детально. В JavaScript уже есть встроенный объект, который получает дату и время – все, что вам нужно сделать, это просто использовать его!     Объект даты Date() в JavaScript Чтобы использовать этот объект даты, вы должны сначала создать его экземпляр. Для...

Уроки JavaScript – ознакомление с функцией console.log()

Когда вы пишете приложение на JavaScript, очень полезно использовать отладчик (или дебаггер, от англ. debugger), т.е., программу, которая предназначена для поиска ошибок в других программах. Все браузеры поставляются с подобной программой, которая выполняет функции отладчика, — речь идет о Консоли (Console). Здесь вы найдете все ошибки, которые возникают при взаимодействии браузера с сайтом. Например, здесь вы можете увидеть недоступные ресурсы сайта (которые возвращают 404 ошибку), ошибки в JavaScript коде и массу других полезных данных. Кроме...

Примеры манипулирования DOM с помощью jQuery

В предыдущих статьях категории Уроки JavaScript мы рассмотрели основные принципы DOM, узнали, как можно взаимодействовать и манипулировать элементами DOM с помощью простого JavaScript. В этой статье мы немного расширим данную тему и рассмотрим примеры манипулирования элементами DOM с помощью мощной библиотеки JavaScript – jQuery. Библиотека jQuery располагает мощными инструментами для нахождения элементов и работы с ними для достижения нужной цели. С помощью методов jQuery задачи обхода и манипуляции элементами DOM решаются довольно простыми и интуитивно...

Уроки JavaScript – выполнение кода после полной загрузки DOM

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

Уроки JavaScript – Диалоговые окна alert, confirm и prompt

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

Уроки JavaScript – Объект события (Event Object)

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

Уроки JavaScript – Краткий обзор событий в браузере

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

Уроки JavaScript – Основы манипулирования элементами в DOM

В прошлый раз мы рассмотрели некоторые основы JavaScript и затронули различные аспекты объектной модели документа, в том числе способы доступа к узлам и перемещения по DOM. Сегодня мы поговорим о том, как манипулировать элементами в DOM.     Элементы для манипулирования В последнем уроке мы рассмотрели шаги, связанные с доступом к коллекции узлов DOM или отдельного узла DOM. Настоящая магия возникает, когда мы затем манипулируем определенными свойствами, что приводит к так называемому «поведению». Каждый отдельный...