[자바스크립트] 자바스크립트 다국어 적용 방법



1. 자바스크립트


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
// 언어팩 선언.
$.lang = {};
 
$.lang.ko = {
    0: '자바스크립트 다국어 처리.',
    1: '안녕하세요',
    2: '오늘은 금요일 입니다.',
    3: '불금을 즐겨 보아요.'
};
 
$.lang.en = {
    0: 'Javascript Language Localization.',
    1: 'Hello.',
    2: 'Today is Friday',
    3: 'Fire~!!'
};
    
$.lang.ja = {
    0: 'JavaScriptの言語',
    1: 'こんにちは',
    2: '今日は金曜日です。',
    3: 'ガンバレ~!!'
};
 
/**
* setLanguage 
* use $.lang[currentLanguage][languageNumber]
*/
function setLanguage(currentLanguage) {
  console.log('setLanguage', arguments);
  
  $('[data-langNum]').each(function() {
    var $this = $(this); 
    $this.html($.lang[currentLanguage][$this.data('langnum')]); 
  });    
}  
 
// 언어 변경
$('button').click(function() {
  var lang = $(this).data('lang');
  setLanguage(lang); 
});
cs





2. HTML


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.8.3.min.js"></script>
  <meta charset="utf-8">
  <title>자바스크립트 다국어 처리.</title>
</head>
<body>
  <div id="wrap">
    <h1 data-langNum="0">자바스크립트 다국어 처리</h1>
    <button data-lang="ko">한국어</button>
    <button data-lang="ja">일본어</button>
    <button data-lang="en">영어</button>
    <hr>
  
    <h2 data-langNum="1">안녕하세요</h2>
    <h2 data-langNum="2">오늘은 금요일 입니다.</h2>
    <h2 data-langNum="3">불금을 즐겨 보아요.</h2>
  </div>
</body>
</html>
cs





출처 : http://jsbin.com/losejo/edit?html,js,output

저작자표시 비영리

'Yame Programmer > Java Script[JQuery]' 카테고리의 다른 글

javascript 배열안의 중복객체 카운트  (0) 2021.01.08
[제이쿼리] form의 내용을 한번에 오브젝트로 만들기  (0) 2018.05.09
YYYYMMDD 형식 날짜 구하기  (0) 2016.12.28
[자바스크립트] 정규식을 이용한 초간단 천단위콤마  (0) 2016.07.26
[제이쿼리] 동적으로 select option 추가 하기(empty와 append)  (4) 2016.07.13

+ Recent posts

티스토리툴바