[TIL] 멀티랭귀지 multi language (ml)
var lang = "un"; //언어 값 받아올 변수. un은 undefined 의 앞 2글자.
// 다국어 언어 예시.
let multiLanguage = {
"ko" : {
msg : "안녕하세요.",
title: "한국어",
},
"en" : {
msg : "Hello World.",
title: "English",
}
};
window.onload = () => {
let changeNodeList = Array.prototype.slice.call(document.querySelectorAll('[data-detect]'));
changeNodeList.map( v => {
v.textContent = multiLanguage[lang][v.dataset.detect]
})
};
console.log(navigator.language);
if (navigator.language!=null) //이 값이 null이 아니면. 즉 크롬이나 파폭이면
{
lang = navigator.language;
} else if (navigator.userLanguage!=null) { //이 값이 null이 아니면. 즉 익스라면
lang = navigator.userLanguage;
} else if (navigator.systemLanguage!=null) { //여기까지는 안 올거 같은데 혹시나 해서
lang = navigator.systemLanguage;
} else { //이도저도 아니면
lang="un";
}
lang = lang.toLowerCase(); //받아온 값을 소문자로 변경
lang = lang.substring(0, 2); //소문자로 변경한 갚의 앞 2글자만 받아오기
if (lang=="ko") { //한국어라면
console.log("한국어");
} else if (lang=="cn" || lang=="tw" || lang=="zh") { //중국어라면
console.log("중국어");
} else if (lang == "en") {
console.log("미국");
} else{ //그 외~
console.log("그 외");
}
<button id="koBtn" data-lang="ko">한국</button>
<button id="enBtn" data-lang="en">영어</button>
<p id="title" data-detect="title"></p>
<p id="msg" data-detect="msg"></p>
수정
var lang = "un"; //언어 값 받아올 변수. un은 undefined 의 앞 2글자.
// 다국어 언어 예시.
let multiLanguage = {
"ko" : {
msg : "안녕하세요."
title: "알로하",
sub_title: "하이",
},
"en" : {
msg : "Hello World.",
title: "English",
sub_title: "english TEST",
},
"jp" : {
msg : "こんにちは",
title: "これわ タイトルです",
sub_title: "にほんごの ページです",
},
};
window.onload = () => {
let changeNodeList = Array.prototype.slice.call(document.querySelectorAll('[data-detect]'));
changeNodeList.map( v => {
v.textContent = multiLanguage[lang][v.dataset.detect]
})
};
function changeLanguage(lang) {
// window.onload = () => {
let changeNodeList = Array.prototype.slice.call(document.querySelectorAll('[data-detect]'));
changeNodeList.map( v => {
v.textContent = multiLanguage[lang][v.dataset.detect]
})
// };
}
console.log(navigator.language);
if (navigator.language!=null) //이 값이 null이 아니면. 즉 크롬이나 파폭이면
{
lang = navigator.language;
} else if (navigator.userLanguage!=null) { //이 값이 null이 아니면. 즉 익스라면
lang = navigator.userLanguage;
} else if (navigator.systemLanguage!=null) { //여기까지는 안 올거 같은데 혹시나 해서
lang = navigator.systemLanguage;
} else { //이도저도 아니면
lang="un";
}
lang = lang.toLowerCase(); //받아온 값을 소문자로 변경
lang = lang.substring(0, 2); //소문자로 변경한 갚의 앞 2글자만 받아오기
if (lang=="ko") { //한국어라면
console.log("한국어");
document.getElementsByClassName('dropdown-select-box')[0].value = "kr";
} else if (lang=="cn" || lang=="tw" || lang=="zh") { //중국어라면
console.log("중국어");
document.getElementsByClassName('dropdown-select-box')[0].value = "china";
} else if (lang == "en") {
console.log("미국");
document.getElementsByClassName('dropdown-select-box')[0].value = "en";
} else if(lang === "jp") {
console.log("일본");
document.getElementsByClassName('dropdown-select-box')[0].value = "jp";
} else { //그 외~
console.log("그 외");
}
/*
==================================================================
셀렉트 박스로 언어 선태할 시에
==================================================================
*/
let selectLang = "";
function handle_select_lang(e) {
// console.log(e);
for(let i = 0; i < e.options.length; i++) {
const option = e.options[i];
if(option.selected) {
lang = option.value;
changeLanguage(lang);
console.log(lang);
}
}
}
var lang = "un"; //언어 값 받아올 변수. un은 undefined 의 앞 2글자.
// 다국어 언어 예시.
let multiLanguage = {
"ko" : {
msg : "안녕하세요."
title: "알로하",
sub_title: "하이",
},
"en" : {
msg : "Hello World.",
title: "English",
sub_title: "english TEST",
},
"jp" : {
msg : "こんにちは",
title: "これわ タイトルです",
sub_title: "にほんごの ページです",
},
};
window.onload = () => {
let changeNodeList = Array.prototype.slice.call(document.querySelectorAll('[data-detect]'));
changeNodeList.map( v => {
v.textContent = multiLanguage[lang][v.dataset.detect]
})
};
function changeLanguage(lang) {
// window.onload = () => {
let changeNodeList = Array.prototype.slice.call(document.querySelectorAll('[data-detect]'));
changeNodeList.map( v => {
v.textContent = multiLanguage[lang][v.dataset.detect]
})
// };
}
console.log(navigator.language);
if (navigator.language!=null) //이 값이 null이 아니면. 즉 크롬이나 파폭이면
{
lang = navigator.language;
} else if (navigator.userLanguage!=null) { //이 값이 null이 아니면. 즉 익스라면
lang = navigator.userLanguage;
} else if (navigator.systemLanguage!=null) { //여기까지는 안 올거 같은데 혹시나 해서
lang = navigator.systemLanguage;
} else { //이도저도 아니면
lang="un";
}
lang = lang.toLowerCase(); //받아온 값을 소문자로 변경
lang = lang.substring(0, 2); //소문자로 변경한 갚의 앞 2글자만 받아오기
if (lang=="ko") { //한국어라면
console.log("한국어");
document.getElementsByClassName('dropdown-select-box')[0].value = "kr";
} else if (lang=="cn" || lang=="tw" || lang=="zh") { //중국어라면
console.log("중국어");
document.getElementsByClassName('dropdown-select-box')[0].value = "china";
} else if (lang == "en") {
console.log("미국");
document.getElementsByClassName('dropdown-select-box')[0].value = "en";
} else if(lang === "jp") {
console.log("일본");
document.getElementsByClassName('dropdown-select-box')[0].value = "jp";
} else { //그 외~
console.log("그 외");
}
/*
==================================================================
셀렉트 박스로 언어 선태할 시에
==================================================================
*/
let selectLang = "";
function handle_select_lang(e) {
// console.log(e);
for(let i = 0; i < e.options.length; i++) {
const option = e.options[i];
if(option.selected) {
lang = option.value;
changeLanguage(lang);
console.log(lang);
}
}
}
Reference
https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=quasimodo__&logNo=110179247680
https://zzdd1558.tistory.com/245
Author And Source
이 문제에 관하여([TIL] 멀티랭귀지 multi language (ml)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@iooi75/TIL-멀티랭귀지-multi-language-ml저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)