Олександр, дякую Вам за Ваші відео! Переглядаю поступово весь Ваш канал, лайкаю кожне відео, бо кожне з них це просто чиста інформація по JS, мій рівень та скіл значно виріс. Багато хто чекає, щоб ви створили курс по Ангуляр!
Очень крутой видос и подача материала. Было бы круто, если бы было без перезагрузки страницы и без смены адреса (ищу именно это, но видос все равно посмотрел). Спасибо!
Классная идея реализации. Очень интересно увидеть ваше решение с использованием контекста, чтобы выполнять смену языка без перезагрузки страницы (на случаи, если с сервера подгружается много данных, чтобы не загружать их по-новой каждый раз)
Здравствуйте. Видео зачетное, но не подскажете как сделать такое для многостраничного сайта? классы также копирую, но у меня перестает меняться с языка на язык
Здраствуйте, можете помочь с реализацией через дата-атрибут? Я в html прописал дата-атрибути для каждого нужного для перевода елемента, и сделал отдельний файл с переводом для двух язиков и группировал сначало по язику, а не так как сделал автор видео. Одно не могу сделать подходящий js-код для етого, попробовал реализовать как автор видео, но все-равно не работает( И для своего сайта я не делал селект, как автор видео, а просто сделал две ссилки (en, ru). Может у вас есть готовий js-код для перевода через дата-атрибути?
Добрый день. Спасибо за видео-урок. Подскажите пожалуйста, сделал все точно так же но но после выбора языка в адресной строке есть изменения а сам язык не переключается (при выборе любого языка страница перезагружается но остается"ua")?
я, как-то предпочитаю, такую модель реализовывать на стороне сервера, чтобы не грузить клиента лишними данными в виде языков, которые не будут использованы (т.к. одновременно может отображаться только 1 язык же)
Будут ли поисковики трех разных языков выводить на эту страницу или только один, или никто? В HTML файле нет текста для поисковиков, будут ли поисковики находить запрашиваемый текст?
Я привык уже что пишется код не бэст, главное идея для реализации и все ок и, но querySelector в цикле это "некст лвл плей"... Вроде можно 1 querySelectorAll и циклом по нему уменьшить количество запросов в дом.
@@wake378 можно было все элементы получить заранее по селектору, и хранить их по ключу этому которому в цикле ищем, или как хеш таблицу или сет какой-нибудь. У нас ведь контент страницы(структура) не меняется. Зато доступ будет по сложности n(1)
Отличная идея с переключением языков. Один вопрос - в чём смысл замены URL и перезагрузки страницы? Разве нельзя подменять элементы исходя из select.value? И во всём коде вместо переменной hash использовать переменную lang? Для чего дополнительные реверансы?
Александр, спасибо за идею, как это сделать вообще возможно, я решил делать почти, как вы но только через data-атрибуты, data-lang="name" и так далее..
подскажите, пожалуйста, как решить момент, если нужно перевести на странице несколько идентичных слов? переводит только первое. как прописать, что для всех? в js новичок (пока из тех, кто в танке)
Скажите, как назначить placeholder класс, на сайте много полей ввода и не понятно как их переводить, мы же не можем ему назначить класс? И если есть слайдер на сайте, то видимый экрану текст переводится, а тот текст на который нужно нажать на слайдер нет (в слайдере 10 отзывов, первые 3 всегда видимы, остальный чтоб увидеть нужно нажать на стрелку в стороны, тобиш продлистать слайд, и вот этот текст который мы видем при пролистывании он не переводится), как решить эту проблему?
со слайдерами я пока не разбирался. А что касается placeholder, то я делал так: if (langSwitcher.checked) { lang = "ru" username.setAttribute("placeholder", "Ваше имя"); email.setAttribute("placeholder", "Ваша почта"); } else { lang = "en" username.setAttribute("placeholder", "Your name"); email.setAttribute("placeholder", "Email"); } Незнаю насколько это колхоз. Если у Вас 4-5 полей для ввода, то получается 10 строк кода, если будет какая-то гигантская форма для заполнения - то конечно holyCrap. Если кто знает как менять placeholder, title, validityMessage and customValidity у форм - то буду рад ссылочке где про это почитать
@@FA1F.W у меня не работает этот код ( ставлю этот код в файл lang, и после этого на всей странице сбрасывается перевод, ставлю этот код в отдельный файл js -ничкго не происходит. Может я делаю что-то не то?
@@anetkaf2558 у меня реализовано только 2 языка: англ и рус. Поэтому переключатель я сделал из checkbox. Блин, я только что компьютер выключил😅. Мне бы проще или ваш код увидеть или просто скинуть свой
Класне відео, від себе хочу додати, що UA це код країни, а код мов визначаеться стандартом ISO-639 наступним чином: 639-1 639-2 639-3 Назва мови Оригінальна назва uk ukr ukr Українська Українська en eng eng Англійська English
Например у тебя есть соц сеть, и ты хочешь, чтобы люди со всего мира, могли общаться друг с другом без знания языка. Можно ли в чат добавить функцию перевода на язык который ты хочешь ? То есть при включении данной функции, все сообщения которые будут тебе писать иностранцы, они будут переводиться
подскажите, подогнал ваш код на сайт, проблема есть в том что когда переходишь на другую страницу на доли секунды мелькает перевод другого языка. Как можно исправить?
Отличный гайд, но я столкнулся с проблемой. Добавил абсолютно идентичный код (строка 25+ queryselector innerhtml) но при выборе языка язык не меняется. Все классы из html и js для перевода указал правильно. В консоли выдает ReferenceError: langArr is not defined
Достаёт из DOM'а title документа и присваивает ему значение ключа unit из массива langArr, в котором есть другой ассоциативный массив, в котором есть совпадение со значением hash. Т.е., ранее по коду ты получаешь значение hash из адресной строки, как en u\ua. К примеру, получил значение ru. Джаваскрипт лезет в ассоциативный массив langArr, находит там ключ unit, видит, что там 3 ключа - 'en', 'ru' и 'ua'. Т.к. ранее из hash ты получил значение 'ru', то он берёт значение ключа буквально arrLang['unit']['ru'], что равно "создаем многоязычный сайт". Если бы в хэше было бы другое значение ('en', к примеру), то данные брались бы из arrLang['unit']['ua']
Я держал и вел такую группу 3 года, где с утра до вечера помогал и отвечал людям в любое время. И ночью и в час ночи и в два и в три. Еще и недовольство выслушивал, когда просил уточнить вопрос или код закинуть на codepen.io - чтобы помочь. С прошлого года решил - хватит.
Прапори країн не зовсім логічно перегукуються з мовами, адже можна поставити, наприклад, прапор Німеччини для німецької мови, але тоді Австрійці, Швейцарці, та громадяни інших країн (наприклад в Італії є германоязичні люди) не будуть бачити в цьому логіки, інший приклад - іспанська мова: поставити прапор Іспанії, а як же уся Латинська Америка? Вони теж говорять іспанською. Але не є громадянами Іспанії і її прапор їм, по суті, не важливий. А ще більш відверто говорячи - такий підхід буде харити багато користувачів. 😎 Тому на переважній більшості сайтів великих міжнародних компаній ви не побачите прапорці біля вибору мов.
Олександр, дякую Вам за Ваші відео! Переглядаю поступово весь Ваш канал, лайкаю кожне відео, бо кожне з них це просто чиста інформація по JS, мій рівень та скіл значно виріс. Багато хто чекає, щоб ви створили курс по Ангуляр!
Еще не досмотрел, но уже ставлю комментарий - Очень приятно рассказывает! Хочется слушать.
подача материала на супер высоком уровне! спасибо
Алекс, огромное Вам спасибо за Ваш труд!!! Очень помогаете понять js
Супер! Неделю назад думал над этим вопросом)
хорошее чоткое видео!!! лайк за него от вебмастера-легенды СЕООНЛИ
Делала по видео с небольшими изменениями (без перезагрузки, document.title = langArr.unit[hash] и проч.). Работает. Спасибо !
для первого раза сойдёт
СУПЕР!
спасибо
класний урок, дякую
Группировку нужно делать по языкам, отдельный файл для каждого языка. Это позволит нескольким людям работать над разными переводами одновременно.
Огромная благодарность вам за ваши труды!
Александр, как и всегда прекрасно и полезно ! Спасибо
Очень полезное видео. Спасибо, Алекс!
Супер!
спасибо большое, было очень полезно
spasibo vam bolshoe
Чудовий контент, як то кажуть, просто про складне.
Супер большое спасибо 👍👍👍
Спасибо! Ваше видео было полезно.
Просто і зрозуміло. Дяка!
Спасибо за видео! Вопрос: будут ли страницы с hash en и ua индексироваться поисковиками по соответствующим языкам?
Очень крутой видос и подача материала. Было бы круто, если бы было без перезагрузки страницы и без смены адреса (ищу именно это, но видос все равно посмотрел). Спасибо!
так у него и так язык меняется без перезагрузки страницы, разве нет?
@@VIJana79 все правильно.
Классная идея реализации. Очень интересно увидеть ваше решение с использованием контекста, чтобы выполнять смену языка без перезагрузки страницы (на случаи, если с сервера подгружается много данных, чтобы не загружать их по-новой каждый раз)
это в реакт тогда ) а там это в 3 функции
Здравствуйте. Видео зачетное, но не подскажете как сделать такое для многостраничного сайта? классы также копирую, но у меня перестает меняться с языка на язык
привет, такая же проблема, как решили ?
Спасибо
Thank you for video very good👍👍
А не лучше класс на какой-нибудь data-атрибут заменить?
В этом видео показа идея кода. С кучей ограничений по возможности применения. А реализовать можно как угодно.
Здраствуйте, можете помочь с реализацией через дата-атрибут? Я в html прописал дата-атрибути для каждого нужного для перевода елемента, и сделал отдельний файл с переводом для двух язиков и группировал сначало по язику, а не так как сделал автор видео. Одно не могу сделать подходящий js-код для етого, попробовал реализовать как автор видео, но все-равно не работает( И для своего сайта я не делал селект, как автор видео, а просто сделал две ссилки (en, ru). Может у вас есть готовий js-код для перевода через дата-атрибути?
Пушка, бомба, петарда!
спасибо очень помогли
Добрый день. Спасибо за видео-урок. Подскажите пожалуйста, сделал все точно так же но но после выбора языка в адресной строке есть изменения а сам язык не переключается (при выборе любого языка страница перезагружается но остается"ua")?
я, как-то предпочитаю, такую модель реализовывать на стороне сервера, чтобы не грузить клиента лишними данными в виде языков, которые не будут использованы (т.к. одновременно может отображаться только 1 язык же)
Будут ли поисковики трех разных языков выводить на эту страницу или только один, или никто? В HTML файле нет текста для поисковиков, будут ли поисковики находить запрашиваемый текст?
Если правильно реализовать пути - то поисковик будет видеть разные страницы и для разных языков будет корректно искать.
@@itgidНа Вашем примере правильно реализованы пути или нужен другой подход для реализации правильного пути для поисковиков на разных языках?
Я привык уже что пишется код не бэст, главное идея для реализации и все ок и, но querySelector в цикле это "некст лвл плей"... Вроде можно 1 querySelectorAll и циклом по нему уменьшить количество запросов в дом.
конечно можно. Это затравка. Главные преимущества я рассмотрю в коде реакт курса.
а можешь подробнее рассказать, как в этом случае использовать querySelectorAll?
@@wake378 можно было все элементы получить заранее по селектору, и хранить их по ключу этому которому в цикле ищем, или как хеш таблицу или сет какой-нибудь. У нас ведь контент страницы(структура) не меняется. Зато доступ будет по сложности n(1)
Отличная идея с переключением языков. Один вопрос - в чём смысл замены URL и перезагрузки страницы? Разве нельзя подменять элементы исходя из select.value? И во всём коде вместо переменной hash использовать переменную lang? Для чего дополнительные реверансы?
Александр, спасибо за идею, как это сделать вообще возможно, я решил делать почти, как вы но только через data-атрибуты, data-lang="name" и так далее..
еще бы написал как это сделать )
В чем разница в браузере между location и window.location? Вы уверенны что она(разница) есть? Или это зацепка для комментариев?
Дякую!
Дякую, що поставили переклад й на українську мову)
а можно через css стили подключить разные языки? типа div { content: "english";}.и переподключать link через java script?
подскажите, пожалуйста, как решить момент, если нужно перевести на странице несколько идентичных слов? переводит только первое. как прописать, что для всех? в js новичок (пока из тех, кто в танке)
Чтобы VSCode переносил строки новую строку, когда она вылезает за границы редактора - нужно нажать Alt+Z.
Там в настройках wrap поставить галочу и всё автоматически будет
Если есть плагин на px to em rem то это не будет работать
Нкгкгугвнсшкга
А такую реализацию можно использовать в вордпресс? Есть причины, по которым не использ плагины ВП.
самое интересное начнется когда надо будет этот сайт проиндексировать)))
что начнётся?
Поисковики уже давно могут читать контент из js файлов.
@@richardwong4613 вероятно для этого и придумали SSR, потому что поисковики отлично индексируют js))
@@ksawl SSR для создания ссылок на отдельные страницы. А текстовое содержимое уже загруженного JS скрипт поисковики видят.
спасибо за видео, вы не хотели бы тоже самое но с фреймворк i18next ?
Добрый день, подскажите пожалуйста в каком уроке по верстке есть о dl, dt тегах ?
Может быть, раз так правильно делать мультиязычный сайт через бекэнд, сделать видео про это?
Почему автор всё время называет JS объект из lang.js массивом?
Скажите, как назначить placeholder класс, на сайте много полей ввода и не понятно как их переводить, мы же не можем ему назначить класс? И если есть слайдер на сайте, то видимый экрану текст переводится, а тот текст на который нужно нажать на слайдер нет (в слайдере 10 отзывов, первые 3 всегда видимы, остальный чтоб увидеть нужно нажать на стрелку в стороны, тобиш продлистать слайд, и вот этот текст который мы видем при пролистывании он не переводится), как решить эту проблему?
со слайдерами я пока не разбирался. А что касается placeholder, то я делал так: if (langSwitcher.checked) {
lang = "ru"
username.setAttribute("placeholder", "Ваше имя");
email.setAttribute("placeholder", "Ваша почта");
} else {
lang = "en"
username.setAttribute("placeholder", "Your name");
email.setAttribute("placeholder", "Email");
}
Незнаю насколько это колхоз. Если у Вас 4-5 полей для ввода, то получается 10 строк кода, если будет какая-то гигантская форма для заполнения - то конечно holyCrap. Если кто знает как менять placeholder, title, validityMessage and customValidity у форм - то буду рад ссылочке где про это почитать
@@FA1F.W у меня не работает этот код ( ставлю этот код в файл lang, и после этого на всей странице сбрасывается перевод, ставлю этот код в отдельный файл js -ничкго не происходит. Может я делаю что-то не то?
@@anetkaf2558 у меня реализовано только 2 языка: англ и рус. Поэтому переключатель я сделал из checkbox. Блин, я только что компьютер выключил😅. Мне бы проще или ваш код увидеть или просто скинуть свой
@@FA1F.W У меня тоже на 2х языках.
Отправить
Вот HTML, а перевод сделала по видео. Просто JS я только начинаю учить и не понимаю что там
Вы сказали что это массив но скобки объекта 3:35
Объясните кто-нибудь почему массив из объектов в фигурных скобках, а не объекты внутри объекта?
Так как этот файл - имитация JSON формата. А в JSON всё пишется через кавычки, иначе будут ошибки
Супер
Здравствуйте, можете помочь? перевод работает, а на попапе нет, подскажите что может быть не так?
Допустим есть на сайте селектор как в нем переводить значения?
Повторно не переводит тот же самый текст, у меня допустим есть энное количество карточек одинаковых, первую переводит дальше нет
столкнулась с той же проблемой. вам удалось решить?
@@АннаГант-л9б давно это было, уже не помню, если честно
А как сделать локализацию? если человек зашел из Англии, что-бы сразу английская версия вылезла
Через php
Не согласен, что нужно делать один файл с разными языками. Удобнее сделать 1 файл - 1 язык.
Добрый день, Александр. Смена языка в хроме в самом select не происходит, так же как и в телефоне. Подскажите пожалуйста почему.
Увы без кода
Класне відео, від себе хочу додати, що UA це код країни, а код мов визначаеться стандартом ISO-639 наступним чином:
639-1 639-2 639-3 Назва мови Оригінальна назва
uk ukr ukr Українська Українська
en eng eng Англійська English
Например у тебя есть соц сеть, и ты хочешь, чтобы люди со всего мира, могли общаться друг с другом без знания языка. Можно ли в чат добавить функцию перевода на язык который ты хочешь ?
То есть при включении данной функции, все сообщения которые будут тебе писать иностранцы, они будут переводиться
китайцы уже давно этим пользуются в своей соцсети, WeChat называется
Uncaught ReferenceError: Cannot access 'langArr' before initialization Ошибка, подскажите как устранить?
у меня такая же, как решили ?
подскажите, подогнал ваш код на сайт, проблема есть в том что когда переходишь на другую страницу на доли секунды мелькает перевод другого языка. Как можно исправить?
Разобрались как? Сам вот только столкнулся с этим.
Если на странице много селектов, как прописать выбор нужного в JS?
@@drewbieber1399 добавить идентификатор id. Или уникальный класс. Или дата атрибут.
@@itgid в html Я добавил, а как это прописать в JS, Я в нем новичок, можно пример изменённой строчки кьериселектор('select');
@@drewbieber1399 напишите в телеграм - помогу
@@itgid написал в группу
Лучше мультиязычность делать на CSS ;) Это веселее :)
@@maknoname Более того, еще удобно картинки с языком менять :)
i18n ?
Да есть i18njs специально для ванильного js
Отличный гайд, но я столкнулся с проблемой. Добавил абсолютно идентичный код (строка 25+ queryselector innerhtml) но при выборе языка язык не меняется. Все классы из html и js для перевода указал правильно. В консоли выдает ReferenceError: langArr is not defined
@@Blueris_In_Galaxy спасибо за наводку 👍,действительно помогло. Долго ломал голову, а все оказалось так просто 😅
@@Firzj очень рад что помогло. Сам тоже на этом гайде построил сайт
В мене та сама помилка, можите підсказати, яким чином її усунули, дякую!
@@maksimbadu7696 извините, никакого расизма, но я не понимаю по украински
або навпаки
Не понял, зачем нужна 25 строка кода? Объясните , пожалуйста, какую функцию она выполняет
Достаёт из DOM'а title документа и присваивает ему значение ключа unit из массива langArr, в котором есть другой ассоциативный массив, в котором есть совпадение со значением hash.
Т.е., ранее по коду ты получаешь значение hash из адресной строки, как en
u\ua. К примеру, получил значение ru.
Джаваскрипт лезет в ассоциативный массив langArr, находит там ключ unit, видит, что там 3 ключа - 'en', 'ru' и 'ua'. Т.к. ранее из hash ты получил значение 'ru', то он берёт значение ключа буквально arrLang['unit']['ru'], что равно "создаем многоязычный сайт". Если бы в хэше было бы другое значение ('en', к примеру), то данные брались бы из arrLang['unit']['ua']
@@LuciferAngelos подскажите, пожалуйста, как правильно реализовать данный подход на многостраничном сайте?
Чому немає дде глянути код?
у меня: key is not definde :(
Пж создай группу в телеге где мы сможем общаться и задавать вопросы
Я держал и вел такую группу 3 года, где с утра до вечера помогал и отвечал людям в любое время. И ночью и в час ночи и в два и в три. Еще и недовольство выслушивал, когда просил уточнить вопрос или код закинуть на codepen.io - чтобы помочь. С прошлого года решил - хватит.
@@itgid понятно, как хотите
реально флаги стран вставить както ?
Прапори країн не зовсім логічно перегукуються з мовами, адже можна поставити, наприклад, прапор Німеччини для німецької мови, але тоді Австрійці, Швейцарці, та громадяни інших країн (наприклад в Італії є германоязичні люди) не будуть бачити в цьому логіки, інший приклад - іспанська мова: поставити прапор Іспанії, а як же уся Латинська Америка? Вони теж говорять іспанською. Але не є громадянами Іспанії і її прапор їм, по суті, не важливий. А ще більш відверто говорячи - такий підхід буде харити багато користувачів. 😎
Тому на переважній більшості сайтів великих міжнародних компаній ви не побачите прапорці біля вибору мов.
a few speaking , more practice please , and make video by english version i dont know what should i do
Как всегда урок -- супер!
Супер 👍🏻