JavaScript: Изменение переменной
Само слово «переменная» говорит о том, что ее можно менять. И действительно, с течением времени внутри программы значения переменных могут изменяться.
let greeting = 'Father!'; console.log(greeting); console.log(greeting); greeting = 'Mother!'; console.log(greeting); console.log(greeting); Имя осталось тем же, но внутри другие данные. Обратите внимание на ключевое различие между объявлением переменной и ее изменением. Ключевое слово let ставится только при создании переменной, но при изменении оно уже не используется.
Задание
В упражнении определена переменная, внутри которой находится строка. Переопределите значение этой переменной и присвойте ей ту же строку, но в перевернутом виде, т.е. расположите символы первоначальной строки в обратном порядке.
Упражнение не проходит проверку — что делать? ��
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
- Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет ��
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Мой код отличается от решения учителя ��
Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно ��
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.
Определения
- Переменная — способ сохранить информацию и дать ей имя для последующего использования в коде.
Передача данных между CSS и JavaScript с помощью CSS-переменных
Одно из самых серьёзных противостояний в мире веб-разработки – CSS против JavaScript. У обоих есть свои достоинства, собственный синтаксис и идеи, иногда понять их может быть непросто. Но есть способы заставить их общаться и использовать достоинства каждого.
С позиции JavaScript для установки различных CSS-свойств HTML-элементу, требуется найти его в DOM и получить доступ к нему. После добавления стилей, у этого элемента появляется атрибут style , который вы не стали бы, наверное, писать вручную.
Ещё один способ доступа к CSS-свойствам из JavaScript – использовать настраиваемые CSS-свойства, они также известны, как «CSS-переменные» (CSS variables), которые можно определять с помощью синтаксиса — . Так:
:root < --pagebackground: powderblue; >body
Это «переменные», поэтому их можно неоднократно использовать в таблице стилей.
Получить к ним доступ и управлять значениями этих переменных можно с помощью JavaScript. В этом примере настраиваемое CSS-свойство устанавливается для корневого элемента документа. Его можно прочитать так:
let bg = getComputedStyle(document.documentElement). getPropertyValue('--pagebackground');И его можно установить с помощью JavaScript, получив доступ к стилю корневого элемента (или вообще любого другого элемента с настраиваемыми свойствами), так:
document.documentElement.style.setProperty('--pagebackground', 'firebrick');Но самое выдающееся во всей этой истории то, что используя возможности JavaScript, можно предоставить CSS то, к чему он не может получить доступ. Например, CSS не может прочитать координаты курсора мыши, а JavaScript может.
Для начала, в CSS надо определить пару свойств —mouse-x и —mouse-y , а также установить им начальные значения – 0 :
:root
Затем, в JavaScript следует добавить документу обработчик mousemove . Тогда при движении курсора можно получать его координаты и управлять этими двумя CSS-свойствами с помощью JavaScript:
let root = document.documentElement document.addEventListener('mousemove', e => < root.style.setProperty('--mouse-x', e.x); root.style.setProperty('--mouse-y', e.y); >);В-общем, дело нехитрое. Поскольку настраиваемые CSS-свойства реагируют на движение мыши и изменяют свое значение, теперь можно, например, показать кружок и заставить его двигаться вслед за курсором, так:
:root < --mouse-x: 0; --mouse-y: 0; >#ball
Здесь некоторые пояснения к CSS:
- ширина и высота DIV установлены равными 20 пикселей, а фон – белый
- добавление border-radius: 100% гарантирует, что из квадрата получится круг.
- затем используется transform: translate , чтобы позиционировать круг на экране. Это может быть что-то вроде transform: translate (200px, 300px) , чтобы расположить наш шар на 200 пикселей по горизонтали и 300 пикселей по вертикали относительно левого верхнего угла.
- поскольку JavaScript возвращает для настраиваемого CSS-свойства числовое значение, его необходимо преобразовать в пиксели, умножив на 1px .
- так как размер шара составляет 20 пикселей, то чтобы поместить его центр в точки —mouse-x и —mouse-y , нужно вычесть из координат 10.
Этот трюк позволяет выполнять сложные вычисления, считывать состояние браузера и внешнее взаимодействие с ним в JavaScript, затем передавать результат в CSS и изменять его.
Доступ к CSS-переменным и их изменение с помощью Javascript
SASS-переменные с нами уже давно. Они позволяют задать переменную один раз во время выполнения (runtime) и использовать ее в нескольких местах. Уровень крутости — 3. Хотите уровень 6? Читайте дальше.
Взаимодействие с CSS-переменными при помощи JS после выполнения (post-runtime)
Создадим простую форму, которая будет использовать JS для динамического обновления CSS-переменных (в нашем случае, для изменения свойств color и margin у точки).
Давайте рассмотрим детально.
CSS
:root < --footer-color: #2cba92; /* @reasonCode зеленый */ --palatte-padding-left: 0px >footer < width: 50px; height: 50px; margin-top: 20px; margin-left: var(--palatte-padding-left); /* 11 */ background-color: var(--footer-color); /* 12 */ border-radius: 15px; >
О CSS-псевдоклассе :root можно прочесть на MDN и W3Schools (англ. яз.) Цитата с MDN:
CSS-псевдокласс :root находит корневой элемент дерева документа. Применимо к HTML, :root находит элемент и идентичен селектору по тегу html, но его специфичность выше.
Мы определили CSS-переменные в селекторе :root . В строках 11-12 видно их использование. По стандарту CSS, переменная задается и используется с помощью префикса «—» .
HTML
Обратим внимание на атрибуты ползунка — элемента формы input с type=”range” . Они содержат минимальное ( min ) и максимальное ( max ) значения, а также исходное значение для value . Также посмотрим на поле выбора цвета — элемент формы input с type=”color” . Для него исходный цвет задан атрибутом value=»#2cba92″ .
Javascript
const footer = document.querySelector('footer') // 1 const inputs = [].slice.call(document.querySelectorAll('input')); // 2 inputs.forEach(input => input.addEventListener('change', handleUpdate)); // 4 inputs.forEach(input => input.addEventListener('mousemove', handleUpdate)); // 5 function handleUpdate(e) < // 7 if (this.type === 'color') < footer.style.setProperty('--footer-color', this.value) >else < footer.style.setProperty('--palatte-padding-left', this.value + 'px') >>
1 — получили элемент footer ,
2 — получили коллекцию NodeList со всеми элементами input на странице,
4 — добавили метод EventListener для события CHANGE,
5 — добавили метод EventListener для события MOUSEMOVE (обновляет динамический отступ у ползунка),
7 — функция для установки значения нужной CSS-переменной (обратим внимание, что мы добавили “ px ” к переменной с отступом margin в строке 11).
Вот и всё про доступ к CSS-переменным и их изменение с помощью Javascript. Делитесь своим мнением, задавайте вопросы и, пожалуйста, читайте нас в Твиттере.
P.S. Это тоже может быть интересно:
- Безумие на чистом HTML + CSS
- Голограммы, пленочные засветки и шейдеры на чистом CSS
- CSS COLORS
Если вам понравилась статья, поделитесь ей!
Как получить и установить значения переменных CSS с помощью JavaScript
Переменные CSS являются очень приятным дополнением к языку, несмотря на то, что они невероятно просты. Конечно, мы могли бы использовать SASS или стилус, но языки никогда не должны рассчитывать на разработчиков, полагающихся на фреймворки и инструментальные средства, чтобы выполнить то, что нам нужно. И точно так же, как и любая другая часть веб-страницы, вы можете получать и изменять значения переменных CSS — давайте посмотрим, как это сделать!
Установка и использование CSS переменных
Традиционный метод использования собственных переменных CSS добавляет его в root:
:root
Получение значения переменной CSS
Чтобы получить значение переменной CSS в окне, мы будем использовать методы getComputedStyle и getPropertyValue:
getComputedStyle(document.documentElement) .getPropertyValue('--my-variable-name'); // #999999
Значение вычисленной переменной возвращается в виде строки.
Установка значения переменной CSS
Чтобы установить значение переменной CSS с использованием JavaScript, мы будем использывать свойство setProperty для стиля documentElement:
document.documentElement.style .setProperty('--my-variable-name', 'pink');
Вы сразу увидите новое значение, применяемое везде, где используется переменная.