Как сделать переменную в html
Использование переменных и типов
Листинг 5-6: Использование локальных и глобальных переменных
JavaScript – это язык со слабой типизацией. Это не означает, что в JavaScript нет типов. Это только обозначает, что вам не нужно напрямую указывать тип переменной, а также вы можете совершенно без проблем присвоить одной переменной несколько типов. JavaScript определит тип, основываясь на значении, которое вы присвоили переменной, а также будет свободно переключаться между разными типами в зависимости от содержания, в котором они используются. Результат работы кода из листинга 5-6 таков:
Использование примитивных типов
Работа со строками
Значения для типа string определяются с использованием одинарных или двойных кавычек, как показано в листинге 5-7.
Листинг 5-7: Определение строковых переменных
Знаки кавычек, которые вы используете, должны совпадать. Например, вы не можете начать строку с одинарной кавычки, а закончить двойными.
Работа с булевскими переменными
Листинг 5-8: Определение булевских значений
Работа с числами
Тип number используется для представления как целых чисел, так и чисел с плавающей точкой (известных также как вещественные числа). В листинге 5-9 представлен пример использования этого типа.
Листинг 5-9: Определение числовых значений
Создание объектов
JavaScript поддерживает концепцию объектов, и есть различные пути их создания. В листинге 5-10 показан простой пример создания объекта.
Листинг 5-10: Создание объекта
Использование литералов объекта
Можно определить объект и его свойства за один шаг, используя формат литерала объекта. В листинге 5-11 показано, как это делается.
Листинг 15-11: Использование формата литерала объекта
Использование функций как методов
Так же, как вы добавляете к объекту свойства, вы можете добавить к объекту функции. Функция, которая принадлежит объекту, известна как метод. Это одна из возможностей JavaScript, которые я люблю больше всего. Я не знаю, почему, но я считаю этот способ элегантным и бесконечно приятным. В листинге 5-12 показано, как можно добавлять методы таким вот способом.
Листинг 15-12: Добавление метода объекту
JavaScript может гораздо больше чего предложить, когда дело доходит до создания и управления объектами, но вам не нужны эти функции для работы с HTML5. Обратите внимание на книги, которые я рекомендовал в начале этой главы, если вы хотите углубиться в изучение этого языка.
Работа с объектами
Как только вы создали объект, вы можете сделать с ним несколько вещей. В следующих разделах я расскажу о тех возможностях, которые будут полезны в далее этой книге.
Чтение и изменение значений свойств
Наиболее очевидной вещью, которую мы можем сделать с объектом, является чтение и изменение значений свойств, которые определяет объект. Для этого существует два различных синтаксических стиля, они оба представлены в листинге 5-13.
Листинг 5-13: Чтение и изменение свойств объекта
Первый способ таков, что его знают большинство программистов, и я его использовал в предыдущих примерах. Вы объединяете имя объекта и имя свойства, используя точку (точечная нотация), вот так:
Второй способ – это «массивная» нотация (как при обращении к индексу массива), которая выглядит следующим образом:
В данном случае имя свойства вы заключаете в квадратные скобки ( [ и ] ). Это может быть очень удобным способом доступа к свойству, потому что вы можете обратиться к нужному свойству, используя переменную:
Это основа для перечисления свойств объекта, о чем я сейчас расскажу.
Перечисление свойств объекта
Листинг 5-14: Перечисление свойств объекта
Из результата видно, что перечислена также функция, которую я определил как метод. Это результат того, что JavaScript гибко работает с функциями, и того, что при их обработке методы сами считаются свойствами объекта.
Добавление и удаление свойств и методов
Даже если вы использовали литералы объекта, вы все равно можете определить для объекта новые свойства. Пример представлен в листинге 5-15.
Листинг 5-15: Добавление нового свойства объекту
Как вы уже догадались, в объект также можно добавить новый метод, присвоив значению свойства функцию, как показано в листинге 5-16.
Листинг 5-16: Добавление нового метода в объект
Листинг 5-17: Удаление свойства из объекта
Как определить, есть ли у объекта свойство
Листинг 5-18: Проверка на то, есть ли у объекта свойство
Переменные
Как мы уже знаем, каждая переменная должна иметь имя, которое однозначно ее идентифицирует. Об именах переменных стоит поговорить подробнее.
Прежде всего, в имени переменной могут присутствовать только латинские буквы, цифры и символы подчеркивания (_), причем первый символ имени должен быть либо буквой, либо символом подчеркивания. Например, pageAddress, _link, userName — правильные имена переменных, а 678vasya и Имя пользователя — неправильные.
Язык JavaScript чувствителен к регистру символов, которыми набраны имена переменных. Это значит, что pageaddress и pageAddress — разные переменные.
Совпадение имени переменной с ключевым словом языка JavaScript не допускается.
Объявление переменных
Перед использованием переменной в коде Web-сценария рекомендуется выполнить ее объявление. Для этого служит оператор объявления переменной var, после которого указывают имя переменной:
Теперь объявленной переменной можно присвоить какое-либо значение:
и использовать в Web-сценарии:
Значение переменной также можно присвоить прямо при ее объявлении:
Также можно объявить сразу несколько переменных:
var x, y, textColor = «black»;
Вообще, объявлять переменные с помощью оператора var не обязательно. Мы можем просто присвоить переменной какое-либо значение, и JavaScript сам ее создаст. Просто явное объявление переменных оператором var считается хорошим стилем программирования.
Переменная, созданная в каком-либо Web-сценарии, будет доступна во всех остальных Web-сценариях, присутствующих в данной Web-странице. Об исключениях из этого правила мы поговорим потом.
Если обратиться к еще не созданной переменной, она вернет значение undefined.
Пока закончим с переменными. (Впоследствии, при рассмотрении функций, мы к ним еще вернемся.) И займемся операторами JavaScript.
Объявление переменных
Перед использованием переменной в коде Web-сценария рекомендуется выполнить ее объявление. Для этого служит оператор объявления переменной var, после которого указывают имя переменной:
Теперь объявленной переменной можно присвоить какое-либо значение:
и использовать в Web-сценарии:
Значение переменной также можно присвоить прямо при ее объявлении:
Также можно объявить сразу несколько переменных:
var x, y, textColor = «black»;
Вообще, объявлять переменные с помощью оператора var не обязательно. Мы можем просто присвоить переменной какое-либо значение, и JavaScript сам ее создаст. Просто явное объявление переменных оператором var считается хорошим стилем программирования.
Переменная, созданная в каком-либо Web-сценарии, будет доступна во всех остальных Web-сценариях, присутствующих в данной Web-странице. Об исключениях из этого правила мы поговорим потом.
ВНИМАНИЕ!
Если обратиться к еще не созданной переменной, она вернет значение undefined.
Пока закончим с переменными. (Впоследствии, при рассмотрении функций, мы к ним еще вернемся.) И займемся операторами JavaScript.
Данный текст является ознакомительным фрагментом.
Продолжение на ЛитРес
Читайте также
Объявление переменных
Объявление переменных Перед использованием переменной в коде Web-сценария рекомендуется выполнить ее объявление. Для этого служит оператор объявления переменной var, после которого указывают имя переменной:var x;Теперь объявленной переменной можно присвоить какое-либо
6. Объявление переменных: оператор Dim для различных типов данных
6. Объявление переменных: оператор Dim для различных типов данных Чаще всего люди стараются не пользоваться идентификаторами при обозначении типа переменной (тем более для таких типов, как дата/время). Вместо этого они применяют оператор Dim. Подобная операция называется
Объявление переменных
Объявление нескольких переменных в одной строке
Объявление нескольких переменных в одной строке В одной строке программного кода можно объявить и несколько переменных. Ключевое слово Dim печатается при этом только один раз, а переменные разделяются запятыми.Но не забывайте указать тип данных для каждой из переменных в
Объявление переменных пользовательского типа
Объявление переменных пользовательского типа Как и встроенные типы данных, пользовательский тип остается абстрактным понятием до тех пор, пока вы не объявите переменную соответствующего типа. Для этого не требуется что-то особенное- годится стандартный синтаксис
Объявление переменных класса
Объявление переменных класса Для объявления переменных, которые понадобятся в нескольких свойствах или методах, используйте раздел Declarations в самом начале модуля класса. Всегда объявляйте эти переменные как локальные ( Private ), ведь объекты в основном предназначены для
Объявление переменных
Объявление переменных В этом разделе дано последовательное описание синтаксиса и семантики объявлений переменных. Разновидности переменных перечислены в следующей таблице:Таблица 3.4. Вид переменной Пояснение Простая переменная Скалярная переменная целого или
Объявление указателя
Объявление указателя Указатель — это переменная, предназначенная для хранения адреса объекта некоторого типа. Указатель на функцию содержит адрес точки входа в функцию.Синтаксис:[ * ;Объявление указателя специфицирует имя
Объявление типа
Объявление типа Существует два особых вида объявления, в которых объявляется не переменная или функция, а тип данных. Первый вид позволяет определить тег и элементы структуры, объединения или перечислимого типа. После такого объявления имя типа (тег) может быть
Объявление тега
Объявление тега Объявление типа структуры, объединения или перечислимого типа имеет такую же синтаксическую форму, как и объявление переменной этих типов, однако в объявлении типа идентификатор переменной (а в общем случае описатель) опущен. Именем типа структуры,
Объявление typedef
Объявление функции
Объявление функции Объявление функции определяет ее имя, тип возвращаемого значения, класс памяти и может также задавать тип некоторых или всех аргументов функции. Детальное описание синтаксиса объявлений функции дано в разделе 3.5. В разделе 3.6 рассмотрена зависимость
9.4. Объявление переменных: declare и typeset
9.4. Объявление переменных: declare и typeset Инструкции declare и typeset являются встроенными инструкциями (они абсолютно идентичны друг другу и являются синонимами) и предназначена для наложения ограничений на переменные. Это очень слабая попытка контроля над типами, которая
CSS-переменные
CSS-переменные (их ещё называют «пользовательскими свойствами») поддерживаются веб-браузерами уже почти четыре года. Я пользуюсь ими там, где они могут пригодиться. Это зависит от проекта, над которым я работаю, и от конкретных задач, которые мне приходится решать. Работать с CSS-переменными просто, они способны принести разработчику немалую пользу. Правда, часто фронтенд-программисты применяют CSS-переменные неправильно или не понимают особенностей работы с ними.
Я написал эту статью для того чтобы собрать в ней всё, что я знаю о CSS-переменных. В ходе работы над ней я надеялся узнать о них что-то новое и упорядочить то, что мне уже известно. Вы найдёте в этом материале всё, что нужно знать о CSS-переменных. Здесь имеется множество практических примеров и описаний сценариев использования CSS-переменных.
Готовы? Если так — приступим.
Введение
CSS-переменные — это значения, которые объявляют в CSS, преследуя две цели. Первая — это многократное использование таких значений. Вторая — это сокращение объёмов CSS-кода. Рассмотрим простой пример.
Стилизация элементов страницы
Но при использовании CSS-переменных подобные задачи решаются гораздо проще. Давайте поговорим о том, как объявлять CSS-переменные. Перед именем переменной должно идти два дефиса. Объявим переменную в стиле для псевдокласса :root элемента :
Именование переменных
Правила именования CSS-переменных не особенно сильно отличаются от правил, принятых в различных языках программирования. А именно, правильное имя CSS-переменной может включать в себя алфавитно-цифровые символы, знаки подчёркивания и дефисы. Кроме того, стоит обратить внимание на то, что имена этих переменных чувствительны к регистру.
Область видимости переменных
CSS-переменные имеют одну полезную особенность, которая заключается в том, что область их видимости можно ограничивать. В основе этой идеи лежат те же принципы, которые применяются в различных языках программирования. Например — в JavaScript:
Вот схема, разъясняющая эту идею.
Область видимости CSS-переменных
Использование резервных значений
Обычно «резервные значения» используются для обеспечения работоспособности сайтов в браузерах, которые не поддерживают некие современные CSS-механизмы. Но здесь речь пойдёт не об этом, а о том, как задавать значения, используемые в том случае, если нужные CSS-переменные оказываются недоступными. Рассмотрим следующий пример:
Этот подход к работе с переменными может оказаться полезным в том случае, если значение переменной зависит от некоего действия. Если может случиться так, что в переменной не будет значения, важно предусмотреть использование резервного значения.
Примеры и сценарии использования CSS-переменных
▍Управление размером компонентов
Компоненты разных размеров
В дизайн-системах часто имеются, например, кнопки разных размеров. Как правило, речь идёт о трёх вариантах размеров (маленький, обычный, большой). С использованием CSS-переменных можно очень легко описывать такие кнопки и другие подобные элементы.
▍CSS-переменные и HSL-цвета
HSL (Hue, Saturation, Lightness — тон, насыщенность, светлота) — это цветовая модель, в которой компонент H определяет цвет, а компоненты S и L определяют параметры насыщенности и светлоты цвета.
Цвета элементов, задаваемые с использованием HSL
Если вас интересует тема использования цветов в CSS — вот моя статья об этом.
▍Изменение размеров элементов с сохранением пропорций
Если вы работали в какой-нибудь дизайнерской программе, вроде Photoshop, Sketch, Figma или Adobe XD, то вы можете знать об использовании клавиши Shift при изменении размеров объектов. Благодаря этому приёму можно избежать искажения пропорций элементов.
В CSS нет стандартного механизма изменения размеров элементов с сохранением пропорций. Но это ограничение можно обойти, воспользовавшись, как несложно догадаться, CSS-переменными.
Настройка размеров элемента с помощью CSS-переменных
▍Макеты, основанные на CSS Grid
CSS-переменные могут оказаться чрезвычайно полезными при проектировании макетов страниц, основанных на CSS Grid. Представьте, что вам нужно сделать так, чтобы Grid-контейнер выводил бы дочерние элементы, основываясь на заранее заданной ширине элементов. Вместо того чтобы создавать класс для каждого варианта представления элементов, что приведёт к необходимости дублирования CSS-кода, эту задачу можно решить, воспользовавшись CSS-переменными.
Настройка размеров Grid-элементов с использованием CSS-переменной
Хранение в переменных значений со сложной структурой
▍CSS-градиенты
Под «значениями со сложной структурой» я понимаю, например, нечто вроде градиентов. Если в проекте есть градиент или фон, используемые во многих местах этого проекта, то их описания имеет смысл хранить в CSS-переменных.
В подобных ситуациях в переменных можно хранить и отдельные элементы «сложных» значений. Это, например, может быть угол градиента:
▍Позиция фона
Как уже было сказано, CSS-переменные могут хранить значения со сложной структурой. Это может оказаться полезным в том случае, если имеется элемент, который, в зависимости от происходящего, может понадобиться размещать в разных местах страницы.
Переключение между тёмной и светлой темами
Сейчас сайты, почти в обязательном порядке, оснащают тёмной и светлой темой. Для решения этой задачи можно воспользоваться CSS-переменными, храня в них сведения о цветах и переключаясь между ними после анализа системных параметров или настроек, выполненных пользователем.
Светлая и тёмная темы
Вот видеодемонстрация вышеозвученной идеи.
Установка значений, применяемых по умолчанию
В некоторых ситуациях нужно задавать CSS-переменные с использованием JavaScript. Представим, что нам нужно установить значение свойства height элемента, размеры которого могут меняться. Я узнал о данном приёме из этой статьи.
Регулирование ширины элемента-контейнера
Управление шириной элемента-контейнера
Элементы-контейнеры, используемые на веб-страницах, могут, в разных ситуациях, иметь разные размеры. Возможно, на одной странице может понадобиться небольшой контейнер, а на другой — контейнер побольше. В подобных случаях CSS-переменные могут с успехом использоваться для управления размерами контейнеров.
Встроенные стили
Использование CSS-переменных во встроенных стилях может открыть перед фронтенд-разработчиком массу новых возможностей, о которых он раньше и не подозревал. На самом деле, я написал об этом целую статью, но тут я, всё же, расскажу о самых интересных способах использования переменных во встроенных стилях.
Возможно, в продакшне этими методами лучше не пользоваться. Они очень хорошо подходят для прототипирования и для исследования различных дизайнерских идей.
▍Динамические Grid-элементы
Вот HTML-код элемента:
Вот стиль, применяемый к этому элементу:
Здесь можно поэкспериментировать с примером к этому разделу.
▍Аватары пользователей
Аватары разных размеров
Ещё один интересный вариант использования CSS-переменных во встроенных стилях представлен созданием элементов разных размеров. Предположим, нам, в разных ситуациях, нужно выводить аватар пользователя различных размеров. При этом мы хотим управлять его размером с использованием единственной CSS-переменной.
Проанализируем эти стили:
Медиазапросы
Совместное использование CSS-переменных и медиазапросов может принести немалую пользу в деле настройки значений переменных, используемых на всех страницах веб-сайтов. Самый простой пример использования этой техники, который приходит мне в голову, заключается в настройке расстояния между элементами:
Наследование
CSS-переменные поддерживают наследование. Если в пределах родительского элемента объявлена CSS-переменная, то элементы-потомки наследуют эту переменную. Рассмотрим пример.
Тут имеется группа кнопок, к которым предъявляются следующие требования:
Ещё один пример использования механизма наследования CSS-переменных представлен настройкой CSS-анимаций. Этот пример я взял отсюда.
Валидация CSS-переменных
Схема работы браузера при обнаружении некорректного значения CSS-переменной
▍Концепция недопустимого значения, появляющегося во время вычислений
То, о чём шла речь выше, с технической точки зрения, называется «недопустимым значением, появляющимся во время вычислений» (Invalid At Computed-Value Time). Ситуация, в которой появляются такие значения, возникает, когда функции var() передаётся корректная CSS-переменная, значение которой не подходит для записи в настраиваемое с её помощью свойство.
Рассмотрим следующий пример, который я взял из этой статьи:
Вот что говорится об этом в спецификации CSS:
Концепция появления недопустимого значения во время вычислений существует из-за того, что ошибки, связанные с переменными, не проявляются, в отличие от других синтаксических ошибок, на ранних стадиях работы системы. Поэтому оказывается, что когда пользовательский агент обнаружит, что значение переменной некорректно, он уже отбросит, в соответствии с порядком каскадного применения стилей, другие значения.
Интересные находки
▍Хранение URL в переменных
Возможно, некоторые ресурсы, используемые на ваших веб-страницах, нужно загружать из внешних источников. В подобных ситуациях можно хранить URL этих ресурсов в CSS-переменных.
Так поступить не получится, так как функция url() воспринимает всю конструкцию var(—main-bg) в виде URL, а это неправильно. К тому моменту, когда браузер вычислит значение, оно уже будет некорректным, рассмотренная конструкция не будет работать так, как ожидается.
▍Хранение нескольких значений
В CSS-переменных можно хранить несколько значений. Если это — значения, выглядящие так, как они должны выглядеть в том месте, где планируется использовать переменную, то такая конструкция окажется работоспособной. Рассмотрим пример.
Значение переменной выглядит так, как ожидается
Здесь имеется функция rgba() и RGB-значения, разделённые запятой и записанные в CSS-переменную. Эти значения используются при задании цвета. При таком подходе к использованию функции rgba() у разработчика появляется возможность воздействовать на значение, соответствующее альфа-каналу цвета, настраивая цвет различных элементов.
Вот пример использования CSS-переменной для настройки свойства background :
▍Изменение значений CSS-переменных в теле правила @keyframes
Если нам нужно обеспечить в предыдущем примере плавную анимацию, то делать это надо так, как делалось раньше. То есть — надо заменить переменную на те CSS-свойства элемента, которые нужно анимировать.
Здесь можно поэкспериментировать с примером применения этой возможности.
▍Вычисления
Возможно, вы не знаете о том, что CSS-переменные можно использовать в вычислениях. Взглянем на пример, который мы уже рассматривали, говоря об аватарах:
Инструменты разработчика различных браузеров и CSS-переменные
При использовании инструментов разработчика различных браузеров можно применять некоторые полезные приёмы, которые упрощают работу с CSS-переменными. Поговорим о них.
▍Просмотр цветов, задаваемых с помощью переменных
Я считаю полезной возможность видеть цвет, описываемый CSS-переменной. Эта возможность доступна в браузерах Chrome и Edge.
Просмотр цвета, задаваемого CSS-переменной
▍Вычисляемые значения
Для того чтобы взглянуть на вычисляемое значение CSS-переменной нужно, в зависимости от браузера, навести на переменную указатель мыши или щёлкнуть мышью по специальной кнопке.
Просмотр вычисляемых значений
Во всех браузерах кроме Safari вычисляемые значения можно увидеть, просто наведя указатель мыши на переменную. В Safari для этого нужно щёлкнуть по кнопке с парой полосок.
▍Автозавершение ввода
При работе над большими проектами сложно запомнить имена всех используемых в них CSS-переменных. Но благодаря возможностям по автозавершению ввода, доступных в браузерах Chrome, Firefox и Edge, это — не проблема.
Автозавершение ввода имени переменной
Для того чтобы этот механизм заработал — достаточно начать вводить имя переменной.
▍Отключение CSS-переменных
Если CSS-переменную нужно отключить от всех элементов, которые её используют, для этого достаточно снять флажок, находящийся напротив переменной в том элементе, где она объявлена.
Флажки для отключения CSS-переменных
Итоги
Я рассказал довольно много всего о CSS-переменных. Надеюсь, вам пригодится то, что вы сегодня узнали.
Пользуетесь ли вы CSS-переменными в своих проектах?