Олександр, дякую Вам за Ваші відео! Переглядаю поступово весь Ваш канал, лайкаю кожне відео, бо кожне з них це просто чиста інформація по JS, мій рівень та скіл значно виріс. Багато хто чекає, щоб ви створили курс по Ангуляр!
Очень крутой видос и подача материала. Было бы круто, если бы было без перезагрузки страницы и без смены адреса (ищу именно это, но видос все равно посмотрел). Спасибо!
Классная идея реализации. Очень интересно увидеть ваше решение с использованием контекста, чтобы выполнять смену языка без перезагрузки страницы (на случаи, если с сервера подгружается много данных, чтобы не загружать их по-новой каждый раз)
я, как-то предпочитаю, такую модель реализовывать на стороне сервера, чтобы не грузить клиента лишними данными в виде языков, которые не будут использованы (т.к. одновременно может отображаться только 1 язык же)
Здравствуйте. Видео зачетное, но не подскажете как сделать такое для многостраничного сайта? классы также копирую, но у меня перестает меняться с языка на язык
Я привык уже что пишется код не бэст, главное идея для реализации и все ок и, но querySelector в цикле это "некст лвл плей"... Вроде можно 1 querySelectorAll и циклом по нему уменьшить количество запросов в дом.
@@wake378 можно было все элементы получить заранее по селектору, и хранить их по ключу этому которому в цикле ищем, или как хеш таблицу или сет какой-нибудь. У нас ведь контент страницы(структура) не меняется. Зато доступ будет по сложности n(1)
Здраствуйте, можете помочь с реализацией через дата-атрибут? Я в html прописал дата-атрибути для каждого нужного для перевода елемента, и сделал отдельний файл с переводом для двух язиков и группировал сначало по язику, а не так как сделал автор видео. Одно не могу сделать подходящий js-код для етого, попробовал реализовать как автор видео, но все-равно не работает( И для своего сайта я не делал селект, как автор видео, а просто сделал две ссилки (en, ru). Может у вас есть готовий js-код для перевода через дата-атрибути?
Александр, спасибо за идею, как это сделать вообще возможно, я решил делать почти, как вы но только через data-атрибуты, data-lang="name" и так далее..
Будут ли поисковики трех разных языков выводить на эту страницу или только один, или никто? В HTML файле нет текста для поисковиков, будут ли поисковики находить запрашиваемый текст?
Отличная идея с переключением языков. Один вопрос - в чём смысл замены URL и перезагрузки страницы? Разве нельзя подменять элементы исходя из select.value? И во всём коде вместо переменной hash использовать переменную lang? Для чего дополнительные реверансы?
Добрый день. Спасибо за видео-урок. Подскажите пожалуйста, сделал все точно так же но но после выбора языка в адресной строке есть изменения а сам язык не переключается (при выборе любого языка страница перезагружается но остается"ua")?
подскажите, пожалуйста, как решить момент, если нужно перевести на странице несколько идентичных слов? переводит только первое. как прописать, что для всех? в js новичок (пока из тех, кто в танке)
Например у тебя есть соц сеть, и ты хочешь, чтобы люди со всего мира, могли общаться друг с другом без знания языка. Можно ли в чат добавить функцию перевода на язык который ты хочешь ? То есть при включении данной функции, все сообщения которые будут тебе писать иностранцы, они будут переводиться
Отличный гайд, но я столкнулся с проблемой. Добавил абсолютно идентичный код (строка 25+ queryselector innerhtml) но при выборе языка язык не меняется. Все классы из html и js для перевода указал правильно. В консоли выдает ReferenceError: langArr is not defined
Скажите, как назначить 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. Блин, я только что компьютер выключил😅. Мне бы проще или ваш код увидеть или просто скинуть свой
подскажите, подогнал ваш код на сайт, проблема есть в том что когда переходишь на другую страницу на доли секунды мелькает перевод другого языка. Как можно исправить?
Достаёт из 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']
Класне відео, від себе хочу додати, що UA це код країни, а код мов визначаеться стандартом ISO-639 наступним чином: 639-1 639-2 639-3 Назва мови Оригінальна назва uk ukr ukr Українська Українська en eng eng Англійська English
Я держал и вел такую группу 3 года, где с утра до вечера помогал и отвечал людям в любое время. И ночью и в час ночи и в два и в три. Еще и недовольство выслушивал, когда просил уточнить вопрос или код закинуть на codepen.io - чтобы помочь. С прошлого года решил - хватит.
Прапори країн не зовсім логічно перегукуються з мовами, адже можна поставити, наприклад, прапор Німеччини для німецької мови, але тоді Австрійці, Швейцарці, та громадяни інших країн (наприклад в Італії є германоязичні люди) не будуть бачити в цьому логіки, інший приклад - іспанська мова: поставити прапор Іспанії, а як же уся Латинська Америка? Вони теж говорять іспанською. Але не є громадянами Іспанії і її прапор їм, по суті, не важливий. А ще більш відверто говорячи - такий підхід буде харити багато користувачів. 😎 Тому на переважній більшості сайтів великих міжнародних компаній ви не побачите прапорці біля вибору мов.
![Налог на незнание JavaScript - [Hamster Kombat]](/img/n.gif)
Олександр, дякую Вам за Ваші відео! Переглядаю поступово весь Ваш канал, лайкаю кожне відео, бо кожне з них це просто чиста інформація по JS, мій рівень та скіл значно виріс. Багато хто чекає, щоб ви створили курс по Ангуляр!
Еще не досмотрел, но уже ставлю комментарий - Очень приятно рассказывает! Хочется слушать.
подача материала на супер высоком уровне! спасибо
Группировку нужно делать по языкам, отдельный файл для каждого языка. Это позволит нескольким людям работать над разными переводами одновременно.
Алекс, огромное Вам спасибо за Ваш труд!!! Очень помогаете понять js
Супер! Неделю назад думал над этим вопросом)
Делала по видео с небольшими изменениями (без перезагрузки, document.title = langArr.unit[hash] и проч.). Работает. Спасибо !
для первого раза сойдёт
СУПЕР!
спасибо
Огромная благодарность вам за ваши труды!
Александр, как и всегда прекрасно и полезно ! Спасибо
хорошее чоткое видео!!! лайк за него от вебмастера-легенды СЕООНЛИ
Очень полезное видео. Спасибо, Алекс!
Спасибо за видео! Вопрос: будут ли страницы с hash en и ua индексироваться поисковиками по соответствующим языкам?
Чудовий контент, як то кажуть, просто про складне.
класний урок, дякую
спасибо большое, было очень полезно
Очень крутой видос и подача материала. Было бы круто, если бы было без перезагрузки страницы и без смены адреса (ищу именно это, но видос все равно посмотрел). Спасибо!
так у него и так язык меняется без перезагрузки страницы, разве нет?
@@VIJana79 все правильно.
spasibo vam bolshoe
Супер!
Классная идея реализации. Очень интересно увидеть ваше решение с использованием контекста, чтобы выполнять смену языка без перезагрузки страницы (на случаи, если с сервера подгружается много данных, чтобы не загружать их по-новой каждый раз)
это в реакт тогда ) а там это в 3 функции
Просто і зрозуміло. Дяка!
Супер большое спасибо 👍👍👍
я, как-то предпочитаю, такую модель реализовывать на стороне сервера, чтобы не грузить клиента лишними данными в виде языков, которые не будут использованы (т.к. одновременно может отображаться только 1 язык же)
Пушка, бомба, петарда!
Здравствуйте. Видео зачетное, но не подскажете как сделать такое для многостраничного сайта? классы также копирую, но у меня перестает меняться с языка на язык
привет, такая же проблема, как решили ?
Спасибо! Ваше видео было полезно.
Я привык уже что пишется код не бэст, главное идея для реализации и все ок и, но querySelector в цикле это "некст лвл плей"... Вроде можно 1 querySelectorAll и циклом по нему уменьшить количество запросов в дом.
конечно можно. Это затравка. Главные преимущества я рассмотрю в коде реакт курса.
а можешь подробнее рассказать, как в этом случае использовать querySelectorAll?
@@wake378 можно было все элементы получить заранее по селектору, и хранить их по ключу этому которому в цикле ищем, или как хеш таблицу или сет какой-нибудь. У нас ведь контент страницы(структура) не меняется. Зато доступ будет по сложности n(1)
А не лучше класс на какой-нибудь data-атрибут заменить?
В этом видео показа идея кода. С кучей ограничений по возможности применения. А реализовать можно как угодно.
Здраствуйте, можете помочь с реализацией через дата-атрибут? Я в html прописал дата-атрибути для каждого нужного для перевода елемента, и сделал отдельний файл с переводом для двух язиков и группировал сначало по язику, а не так как сделал автор видео. Одно не могу сделать подходящий js-код для етого, попробовал реализовать как автор видео, но все-равно не работает( И для своего сайта я не делал селект, как автор видео, а просто сделал две ссилки (en, ru). Может у вас есть готовий js-код для перевода через дата-атрибути?
Дякую, що поставили переклад й на українську мову)
Александр, спасибо за идею, как это сделать вообще возможно, я решил делать почти, как вы но только через data-атрибуты, data-lang="name" и так далее..
еще бы написал как это сделать )
Чтобы VSCode переносил строки новую строку, когда она вылезает за границы редактора - нужно нажать Alt+Z.
Там в настройках wrap поставить галочу и всё автоматически будет
Если есть плагин на px to em rem то это не будет работать
Нкгкгугвнсшкга
Будут ли поисковики трех разных языков выводить на эту страницу или только один, или никто? В HTML файле нет текста для поисковиков, будут ли поисковики находить запрашиваемый текст?
Если правильно реализовать пути - то поисковик будет видеть разные страницы и для разных языков будет корректно искать.
@@itgidНа Вашем примере правильно реализованы пути или нужен другой подход для реализации правильного пути для поисковиков на разных языках?
Отличная идея с переключением языков. Один вопрос - в чём смысл замены URL и перезагрузки страницы? Разве нельзя подменять элементы исходя из select.value? И во всём коде вместо переменной hash использовать переменную lang? Для чего дополнительные реверансы?
Thank you for video very good👍👍
Добрый день. Спасибо за видео-урок. Подскажите пожалуйста, сделал все точно так же но но после выбора языка в адресной строке есть изменения а сам язык не переключается (при выборе любого языка страница перезагружается но остается"ua")?
Супер
самое интересное начнется когда надо будет этот сайт проиндексировать)))
что начнётся?
Поисковики уже давно могут читать контент из js файлов.
@@richardwong4613 вероятно для этого и придумали SSR, потому что поисковики отлично индексируют js))
@@ksawl SSR для создания ссылок на отдельные страницы. А текстовое содержимое уже загруженного JS скрипт поисковики видят.
Спасибо
В чем разница в браузере между location и window.location? Вы уверенны что она(разница) есть? Или это зацепка для комментариев?
спасибо очень помогли
Почему автор всё время называет JS объект из lang.js массивом?
Может быть, раз так правильно делать мультиязычный сайт через бекэнд, сделать видео про это?
спасибо за видео, вы не хотели бы тоже самое но с фреймворк i18next ?
подскажите, пожалуйста, как решить момент, если нужно перевести на странице несколько идентичных слов? переводит только первое. как прописать, что для всех? в js новичок (пока из тех, кто в танке)
Дякую!
Не согласен, что нужно делать один файл с разными языками. Удобнее сделать 1 файл - 1 язык.
Объясните кто-нибудь почему массив из объектов в фигурных скобках, а не объекты внутри объекта?
Так как этот файл - имитация JSON формата. А в JSON всё пишется через кавычки, иначе будут ошибки
А как сделать локализацию? если человек зашел из Англии, что-бы сразу английская версия вылезла
Через php
Лучше мультиязычность делать на CSS ;) Это веселее :)
@@Makaler Более того, еще удобно картинки с языком менять :)
А такую реализацию можно использовать в вордпресс? Есть причины, по которым не использ плагины ВП.
а можно через css стили подключить разные языки? типа div { content: "english";}.и переподключать link через java script?
Здравствуйте, можете помочь? перевод работает, а на попапе нет, подскажите что может быть не так?
Повторно не переводит тот же самый текст, у меня допустим есть энное количество карточек одинаковых, первую переводит дальше нет
столкнулась с той же проблемой. вам удалось решить?
@@АннаГант-л9б давно это было, уже не помню, если честно
Например у тебя есть соц сеть, и ты хочешь, чтобы люди со всего мира, могли общаться друг с другом без знания языка. Можно ли в чат добавить функцию перевода на язык который ты хочешь ?
То есть при включении данной функции, все сообщения которые будут тебе писать иностранцы, они будут переводиться
китайцы уже давно этим пользуются в своей соцсети, WeChat называется
Допустим есть на сайте селектор как в нем переводить значения?
Вы сказали что это массив но скобки объекта 3:35
Отличный гайд, но я столкнулся с проблемой. Добавил абсолютно идентичный код (строка 25+ queryselector innerhtml) но при выборе языка язык не меняется. Все классы из html и js для перевода указал правильно. В консоли выдает ReferenceError: langArr is not defined
@@Blueris_In_Galaxy спасибо за наводку 👍,действительно помогло. Долго ломал голову, а все оказалось так просто 😅
@@Firzj очень рад что помогло. Сам тоже на этом гайде построил сайт
В мене та сама помилка, можите підсказати, яким чином її усунули, дякую!
@@maksimbadu7696 извините, никакого расизма, но я не понимаю по украински
або навпаки
Скажите, как назначить 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 я только начинаю учить и не понимаю что там
Добрый день, подскажите пожалуйста в каком уроке по верстке есть о dl, dt тегах ?
Uncaught ReferenceError: Cannot access 'langArr' before initialization Ошибка, подскажите как устранить?
у меня такая же, как решили ?
подскажите, подогнал ваш код на сайт, проблема есть в том что когда переходишь на другую страницу на доли секунды мелькает перевод другого языка. Как можно исправить?
Разобрались как? Сам вот только столкнулся с этим.
Добрый день, Александр. Смена языка в хроме в самом select не происходит, так же как и в телефоне. Подскажите пожалуйста почему.
Увы без кода
i18n ?
Да есть i18njs специально для ванильного js
Не понял, зачем нужна 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 подскажите, пожалуйста, как правильно реализовать данный подход на многостраничном сайте?
Если на странице много селектов, как прописать выбор нужного в JS?
@@drewbieber1399 добавить идентификатор id. Или уникальный класс. Или дата атрибут.
@@itgid в html Я добавил, а как это прописать в JS, Я в нем новичок, можно пример изменённой строчки кьериселектор('select');
@@drewbieber1399 напишите в телеграм - помогу
@@itgid написал в группу
Класне відео, від себе хочу додати, що UA це код країни, а код мов визначаеться стандартом ISO-639 наступним чином:
639-1 639-2 639-3 Назва мови Оригінальна назва
uk ukr ukr Українська Українська
en eng eng Англійська English
у меня: 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
Как всегда урок -- супер!
Супер 👍🏻