NEXT
Обновление
Данная тема появится после следующего обновления документации, обновления выходят каждые 12 дней
Для чего нужен JS?
В начале пути изучения кода действительно не сразу понятно для чего нужен JS и как он может помочь на тильде. С CSS все понятно, в соответствующих уроках есть исчерпывающая информация о том для чего оно применяется т.е для красоты на сайте.
А что же умеет JS?
Как вы уже знаете (если смотрели уроки по JS) он нужен для создания функциональности на сайте. Но какой именно? На данной странице мы рассмотрим как практические примеры, так и демонстрационные для будущего ознакомления.
Некоторые примеры:
И на самом деле вы можете такое проворачивать с чем угодно. К примеру у вас есть шейп в зеро и вы хотите внутрь шейпа встроить другой стандартный блок. Ну не хотите использовать overflow visible (из-за багов например), а хотите взять и создать шейп, внутри которого за место шейпа будет какой-нибудь ваш стандартный блок. Так можно круто совместить зеро со стандартным блоком, если overflow visible оказался багованным, а такое случается часто.
В вашей функции пишете такую логику: добавляете к вашей переменной +1, а после чего селектору в котором лежит ваш текст, с помощью метода innerHTML, textcontent и др. меняете содержимое на значение вашей переменной.
Как задать значение в методе? Если используем textcontent, то логика простая. Допустим:
var param = 0 //ваша переменная
$('#rec929922939 .tn-atom').textcontent = ``${param} секунд ;`
Заметили, написал без таймера. Вот с таймером:
var param = 0 //ваша переменная
setInterval(() => {
++param; //Такая конструкция будет добавлять к переменной param + 1;
$('#rec929922939 .tn-atom').textcontent = ``${param} секунд `;
}, 1000)
Понятна логика? Я переменную param прямо взял и вставил в текст. Но с использованием ${}
Именно используя такую конструкцию можно добиться встраивания любой переменной внутрь вашего текста, в абсолютно любой элемент.
Вот так выглядит самый примитивный таймер в JS. Так вы сможете задавать абсолютно любую логику N количество секунд.
Также таймер используется когда код не работает, и чтобы удостовериться что код не ломается с ошибкой его оборачивают в таймер, чтобы он отработал больше и дал больше информации.
С помощью JS вы можете менять CSS стили динамически, а также управлять анимациями. С JS вы сможете проследить начало и конец анимации и запустить на конце анимации к примеру другую анимацию, динамически заменив свойства CSS и проиграть очень сложную и крутую конструкцию.
А что же умеет JS?
Как вы уже знаете (если смотрели уроки по JS) он нужен для создания функциональности на сайте. Но какой именно? На данной странице мы рассмотрим как практические примеры, так и демонстрационные для будущего ознакомления.
Некоторые примеры:
- Добавление одних блоков внутрь других. К примеру если у вас есть попап с товаром интернет-магазина и вам нужно внутрь этого попапа засунуть некоторые зеро блоки, чтобы везде отображалась нужная информация.
И на самом деле вы можете такое проворачивать с чем угодно. К примеру у вас есть шейп в зеро и вы хотите внутрь шейпа встроить другой стандартный блок. Ну не хотите использовать overflow visible (из-за багов например), а хотите взять и создать шейп, внутри которого за место шейпа будет какой-нибудь ваш стандартный блок. Так можно круто совместить зеро со стандартным блоком, если overflow visible оказался багованным, а такое случается часто.
- Таймеры. Все таймеры делаются через JS, все меняющиеся цифры и прочее. Делается с помощью изменения контента в вашем тексте. Логика простая, с помощью JS вы создаете вначале простую переменную, которая содержит начальное число (0), а также таймер, используете setInterval(ваша функция, милисекунды)
В вашей функции пишете такую логику: добавляете к вашей переменной +1, а после чего селектору в котором лежит ваш текст, с помощью метода innerHTML, textcontent и др. меняете содержимое на значение вашей переменной.
Как задать значение в методе? Если используем textcontent, то логика простая. Допустим:
var param = 0 //ваша переменная
$('#rec929922939 .tn-atom').textcontent = ``${param} секунд ;`
Заметили, написал без таймера. Вот с таймером:
var param = 0 //ваша переменная
setInterval(() => {
++param; //Такая конструкция будет добавлять к переменной param + 1;
$('#rec929922939 .tn-atom').textcontent = ``${param} секунд `;
}, 1000)
Понятна логика? Я переменную param прямо взял и вставил в текст. Но с использованием ${}
Именно используя такую конструкцию можно добиться встраивания любой переменной внутрь вашего текста, в абсолютно любой элемент.
Вот так выглядит самый примитивный таймер в JS. Так вы сможете задавать абсолютно любую логику N количество секунд.
Также таймер используется когда код не работает, и чтобы удостовериться что код не ломается с ошибкой его оборачивают в таймер, чтобы он отработал больше и дал больше информации.
С помощью JS вы можете менять CSS стили динамически, а также управлять анимациями. С JS вы сможете проследить начало и конец анимации и запустить на конце анимации к примеру другую анимацию, динамически заменив свойства CSS и проиграть очень сложную и крутую конструкцию.
На первый взгляд простая анимация. На второй взгляд вот что здесь сделано с помощью JS и CSS:
- Все маркеры в зеро блоке сделаны шейпами, кастомизация была сделана с помощью CSS, чтобы можно было сделать ховеры. Как вы знаете свг ховерами уже не сделать, они статичны.
- Анимация в начале когда прошел блик был сделан из второй карты (более светлой) и с помощью CSS свойства clip-path, JS в свою очередь регулировал это свойство и постоянно менял, чтобы получился эффект блика
- Далее JS ждал конца анимации и начинал проигрывать анимацию маркеров.
- Как видите у каждого маркера будто своя анимация, т.е свое время проигрывания. В JS с помощью функции рандомного подбора определялось уникальное число для каждого маркера и автоматически устанавливалась анимация. При этом анимация одна, устанавливалось лишь уникальное время.
- И после отслеживался конец анимации, чтобы наконец отобразить все маркеры в статичном виде, и мерцание не мешало человеку наводить на маркеры и узнавать информацию по городам.
- Более того, при наведении на каждый город показывалась информация по нему. Это сделано с помощью JS. На самом деле вся информация по городу написана в href маркера в зеро блоке. JS подтягивает информацию из href и выводит ее в красивое окошко. При этом не надо создавать сто миллионов окон под каждый город. Достаточно использовать 1 окно, в котором динамически меняется положение, а также информация.
Как менять стили динамически?
Используйте JQuery и такой синтаксис:
$(селектор).css( "color", "red" );
Как вы знаете в CSS такой синтаксис:
селектор {
color: red
}
А в jquery мы задаем стили так:
$(селектор).css( "color", "red" );
Логика думаю понятна. А как задавать сразу несколько?
$(селектор).css({
"background-color": "yellow",
"font-weight": "bolder"
});
К примеру с использованием таймеров, прослушивателей событий и прочего вы сможете с легкостью менять любые CSS свойства, а также добавлять новые.
Используйте JQuery и такой синтаксис:
$(селектор).css( "color", "red" );
Как вы знаете в CSS такой синтаксис:
селектор {
color: red
}
А в jquery мы задаем стили так:
$(селектор).css( "color", "red" );
Логика думаю понятна. А как задавать сразу несколько?
$(селектор).css({
"background-color": "yellow",
"font-weight": "bolder"
});
К примеру с использованием таймеров, прослушивателей событий и прочего вы сможете с легкостью менять любые CSS свойства, а также добавлять новые.
Для чего еще может понадобится JS на Tilda?
В интернет-магазинах, причем в очень большом количестве. Большой спрос у кастомизации корзин, к примеру некоторые заказчики хотят обходить корзины и создавать собственные, с более крутой кастомизаций.
Например: сделать свою страницу корзины, а не попап как у Tilda принято. В целом убрать эту форму и делать оплату автоматически, при этом, чтобы можно было подключить приемщики как к дефолтной корзины.
Сделать свои формы регистрации и авторизации
Коннектится к Airtable без других сервисов (опасно, т.к вы спалите ваши api ключи, но для практики работы с API - идея классная)
Создавать свои базы данных в массивах например для отображения информации в сложных калькуляторах. К примеру когда есть огромный массив информации с городами и с чем-нибудь еще и вам надо их как-то выводить. При этом все в дефолтную панель добавлять не удобно. Кодом можно легко сохранить инфу в T123 и с помощью JS в калькуляторе рассчитывать и выдавать варианты из массива.
Создавать сложные/продвинутые калькуляторы
В личных кабинетах:
Вывести информацию о пользователе прямо на страницу личного кабинета. Его почту, имя и т.д, чтобы профиль выглядел как профиль.
Сделать кастомные регистрации через ВК, Гугл, Телеграм.
Кейс странный, но тоже такое встречается. Сразу скажу, что такое делать опасно, но в целях просвещения также осведомлю, что и такое возможно, для практики и повышения скиллов можете потренироваться. Если вы еще не прошли уроки по JS и CSS, то вероятно текст будет не сильно понятен.
Как такое сделать? ВК, Гугл и телеграм при авторизации выдают айди юзера, вы можете с помощью JS закостылить все так, что в панель тильды будут сохраняться айдишники и люди смогут входить в свой профиль на сайте через соц. сети.
Мы знаем, что тильда сохраняет именно почту и пароль человека и в панели управления мы видим исключительно почты. Ни номера, ничего остального тильда не дает вписать при регистрации в ЛК. Как тогда быть?
Приходит на помощь то, что тильда не делает подтверждение адреса электронной почты, поэтому с помощью JS мы можем сохранять абсолютно любую информацию, главное чтобы было в конце @mail.ru или любой другой домен со знаком @
Человек кликает на соц. сеть (например ВК), ВК выдает нам айди нашего юзера, а мы берем и по тихому сохраняем id182381228@mail.ru - пароль генерируем из его айди и все.
JS автоматом впишет все в формы, человек их даже не увидит, т.к вы позаботитесь с помощью CSS о том, чтобы человек увидел только кнопку входа через ВК, а дефолтные инпуты не увидел.
JS их сам увидит и впишет данные в форму, зарегистрирует, сделает триггер по кнопке входа и перекинет человека в его дефолтный личный кабинет.
Таким образом вы напишите целую кучу кода, чтобы человек понял, что он регается через соц. сеть, а вы в свою очередь понимаете, что скрываете пласт функционала.
Также можно закостылить поле для почты, к примеру, чтобы вместо почты человек вписывал свой номер телефона при регистрации.
Тоже не очень хороший вариант, но если вы подключите через API подтверждение номера телефона, то спокойно сможете реализовать. А иначе любой человек сможет ввести любой номер телефона.
В данном случае вы с помощью JS создаете поле для ввода номера, скрываете поле для ввода почты. И когда человек вводит номер телефона, вы с помощью прослушивателя события "input" добавляете все цифры в инпут почты (который скрыли изначально) и в конце автоматом добавляете @mail.ru или любой другой домен.
При должных знаниях в JS вы можете создать абсолютно любой функционал на сайте. Нет границ.
В интернет-магазинах, причем в очень большом количестве. Большой спрос у кастомизации корзин, к примеру некоторые заказчики хотят обходить корзины и создавать собственные, с более крутой кастомизаций.
Например: сделать свою страницу корзины, а не попап как у Tilda принято. В целом убрать эту форму и делать оплату автоматически, при этом, чтобы можно было подключить приемщики как к дефолтной корзины.
Сделать свои формы регистрации и авторизации
Коннектится к Airtable без других сервисов (опасно, т.к вы спалите ваши api ключи, но для практики работы с API - идея классная)
Создавать свои базы данных в массивах например для отображения информации в сложных калькуляторах. К примеру когда есть огромный массив информации с городами и с чем-нибудь еще и вам надо их как-то выводить. При этом все в дефолтную панель добавлять не удобно. Кодом можно легко сохранить инфу в T123 и с помощью JS в калькуляторе рассчитывать и выдавать варианты из массива.
Создавать сложные/продвинутые калькуляторы
В личных кабинетах:
Вывести информацию о пользователе прямо на страницу личного кабинета. Его почту, имя и т.д, чтобы профиль выглядел как профиль.
Сделать кастомные регистрации через ВК, Гугл, Телеграм.
Кейс странный, но тоже такое встречается. Сразу скажу, что такое делать опасно, но в целях просвещения также осведомлю, что и такое возможно, для практики и повышения скиллов можете потренироваться. Если вы еще не прошли уроки по JS и CSS, то вероятно текст будет не сильно понятен.
Как такое сделать? ВК, Гугл и телеграм при авторизации выдают айди юзера, вы можете с помощью JS закостылить все так, что в панель тильды будут сохраняться айдишники и люди смогут входить в свой профиль на сайте через соц. сети.
Мы знаем, что тильда сохраняет именно почту и пароль человека и в панели управления мы видим исключительно почты. Ни номера, ничего остального тильда не дает вписать при регистрации в ЛК. Как тогда быть?
Приходит на помощь то, что тильда не делает подтверждение адреса электронной почты, поэтому с помощью JS мы можем сохранять абсолютно любую информацию, главное чтобы было в конце @mail.ru или любой другой домен со знаком @
Человек кликает на соц. сеть (например ВК), ВК выдает нам айди нашего юзера, а мы берем и по тихому сохраняем id182381228@mail.ru - пароль генерируем из его айди и все.
JS автоматом впишет все в формы, человек их даже не увидит, т.к вы позаботитесь с помощью CSS о том, чтобы человек увидел только кнопку входа через ВК, а дефолтные инпуты не увидел.
JS их сам увидит и впишет данные в форму, зарегистрирует, сделает триггер по кнопке входа и перекинет человека в его дефолтный личный кабинет.
Таким образом вы напишите целую кучу кода, чтобы человек понял, что он регается через соц. сеть, а вы в свою очередь понимаете, что скрываете пласт функционала.
Также можно закостылить поле для почты, к примеру, чтобы вместо почты человек вписывал свой номер телефона при регистрации.
Тоже не очень хороший вариант, но если вы подключите через API подтверждение номера телефона, то спокойно сможете реализовать. А иначе любой человек сможет ввести любой номер телефона.
В данном случае вы с помощью JS создаете поле для ввода номера, скрываете поле для ввода почты. И когда человек вводит номер телефона, вы с помощью прослушивателя события "input" добавляете все цифры в инпут почты (который скрыли изначально) и в конце автоматом добавляете @mail.ru или любой другой домен.
При должных знаниях в JS вы можете создать абсолютно любой функционал на сайте. Нет границ.
