Maison >interface Web >js tutoriel >Comment changer la langue des pages en utilisant JavaScript ?

Comment changer la langue des pages en utilisant JavaScript ?

WBOYavant: 2023-09-15 14:53:101432parcourir

Chaque fois que vous développez un site Web ou une application pour une entreprise mondiale, vous devez également vous concentrer sur le langage que votre public peut comprendre. Par exemple, l’anglais est une langue internationale, mais dans certaines régions du monde, les gens ne peuvent pas comprendre l’anglais parce qu’ils parlent allemand, espagnol, etc.

Cependant, si vous observez, certains sites Web offrent la possibilité de changer la langue du site Web. Vous pouvez changer la langue de l’ensemble de votre site Web en cliquant sur un bouton. Vous êtes-vous déjà demandé comment cela était possible ?

Ici, nous apprendrons à utiliser JavaScript pour changer la langue d'une page Web.

Grammaire

Les utilisateurs doivent suivre la syntaxe suivante pour utiliser JavaScript afin de modifier la langue de la page Web.

if (lang == "en") {
   element.innerHTML = "content";
} else if (lang == "fr") {
   element.innerHTML = "content";
} else if (lang == "de") {
   element.innerHTML = "content";
}

Dans la syntaxe ci-dessus, nous avons écrit des instructions if-else pour modifier le contenu de la page Web en fonction de la langue sélectionnée. Les utilisateurs doivent remplacer le contenu par du contenu dans une langue spécifique.

Exemple 1

Dans l'exemple ci-dessous, nous avons ajouté du contenu d'éléments div. Chaque fois que l'utilisateur appuie sur un bouton pour changer la langue de la page Web, nous appelons la fonction changeLanguage() en passant la langue en paramètre. Dans la fonction changeLanguage(), nous accédons à l'élément div et modifions son contenu en fonction de la langue sélectionnée.

<html>
<body>
   <h2>Switching the language of web page using JavaScript</h2>
   <div id = "div">Hi How are you! This is written in English.</div><br>
   <div id = "languageSwitcher">
      <button onclick = "changeLanguage('en')"> English </button>
      <button onclick = "changeLanguage('fr')"> French </button>
      <button onclick = "changeLanguage('de')"> German </button>
   </div>
   <script>
      // function to switch language of web page
      function changeLanguage(lang) {
         let element = document.getElementById("div");
         if (lang == "en") {
            element.innerHTML = "Hi How are you! This is written in English.";
         } else if (lang == "fr") {
            element.innerHTML = "Bonjour Comment allez-vous! Cela est écrit en français.";
         } else if (lang == "de") {
            element.innerHTML = "Hallo Wie geht es dir! Das ist auf Deutsch geschrieben.";
         }
      }
   </script>
</body>
</html>

Exemple 2

Dans l'exemple ci-dessous, nous avons créé une page Web avec plusieurs éléments. De plus, nous avons attribué à chaque élément un identifiant unique. En JavaScript, nous créons un objet appelé « LanguageContent ». Dans l'objet, nous stockons la langue comme clé et le contenu comme valeur. Dans l'objet content, nous utilisons l'identifiant de l'élément comme clé et son contenu spécifique à la langue comme valeur.

Dans la fonction switchLang(), nous accédons au contenu spécifique à la langue à partir de l'objet languageContent et remplaçons le contenu de tous les éléments de la page Web.

<html>
<body>
   <h2>Switching the language of web page using JavaScript</h2>
   <div id = "text1"> This is a sample content </div>
   <div id = "language"> English </div>
   <div id = "BrandName"> TutorialsPoint </div>
   <div id = "Programming_lang"> JavaScript </div>
   <div id = "languageSwitcher">
      <button onclick = "swithcLang('en')"> English </button>
      <button onclick = "swithcLang('fr')"> French </button>
      <button onclick = "swithcLang('es')"> German </button>
   </div>
   <script>
      let languageContent = {
         "en": {
            "text1": "This is a sample content",
            "language": "English",
            "BrandName": "TutorialsPoint",
            "Programming_lang": "JavaScript",
         },
         "fr": {
            "text1": "Ceci est un contenu d'exemple",
            "language": "Français",
            "BrandName": "TutorialsPoint",
            "Programming_lang": "JavaScript",
         },
         "es": {
            "text1": "Este es un contenido de ejemplo",
            "language": "Español",
            "BrandName": "TutorialsPoint",
            "Programming_lang": "JavaScript",
         }
      }
      function swithcLang(lang) {
         for (let key in languageContent[lang]) {
            document.getElementById(key).innerHTML = languageContent[lang][key];
         }
      }
   </script>
</body>
</html>

Les utilisateurs ont appris à utiliser JavaScript pour changer de langue pour les pages Web. Dans le premier exemple, nous montrons comment basculer entre plusieurs langues.

Nous pouvons utiliser le deuxième exemple pour un site Web en direct. Les développeurs doivent créer un fichier JSON pour stocker le contenu plutôt que dans le même fichier, car les applications en temps réel peuvent contenir de grandes quantités de contenu. Ensuite, ils peuvent utiliser une boucle for pour parcourir tous les éléments du fichier JSON et mettre à jour le contenu de la page Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript json if for 循环对象

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：10 choses amusantes que vous pouvez faire avec seulement quelques lignes de JavaScriptArticle suivant：10 choses amusantes que vous pouvez faire avec seulement quelques lignes de JavaScript

Articles Liés

Voir plus