https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser?rq=1  에서 본 내용을 간단하게 정리해봄.




결과


'프로그래밍 > Javascript' 카테고리의 다른 글

How to detect browser.  (0) 2018.07.23
IOS 버전 관련 처리  (0) 2018.07.20
[Jquery] .each에서 break, continue 구현하기.  (0) 2018.07.02
How to create dynamic a form!  (0) 2018.06.07
javascript replaceAll 사용하기  (0) 2018.03.08
Timer 구현하기  (0) 2017.01.25

1. IOS Useagent


Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.34 (KHTML, like Gecko) Version/11.0 Mobile/15A5341f Safari/604.1


2. 하고싶은 것

 - 11.4 버전 이상일 경우를 체크하고 싶다.


 - 소스

function osVersion(){
var mt = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);

if (mt === undefined || mt === null || nt === '') {
return false;
}

var version = [
parseInt(mt[1], 10),
parseInt(mt[2], 10),
parseInt(mt[3] || 0, 10)
];

return parseFloat(version.join('.'))
}

 - 사용법

if (osVersion() > 11.4) {
alert("에러");
}


* IOS 인지 아닌지에 대한 처리는 없습니다. 관련 소스는 추가해서 사용하세요 ^_^

'프로그래밍 > Javascript' 카테고리의 다른 글

How to detect browser.  (0) 2018.07.23
IOS 버전 관련 처리  (0) 2018.07.20
[Jquery] .each에서 break, continue 구현하기.  (0) 2018.07.02
How to create dynamic a form!  (0) 2018.06.07
javascript replaceAll 사용하기  (0) 2018.03.08
Timer 구현하기  (0) 2017.01.25



1. Jquery Each 

 - API 문서 바로가기

 - 쉽게 말해 반복문이다.


2. Break, Continue란?

 - break 는 반복문을 중지하는 기능

 - continue 는 해당하는 반복구간을 건너뛰는 기능


3. Jquery each에서는??

 1) 요약

  - break는 return false;

  - continue는  return true;

  2) 샘플

   - 소스

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$("ul li").each(function(index) {

var tmpTxt = $(this).text();

if (tmpTxt == "1") {
console.log("Continue value "+ tmpTxt);
return true;

} else if (tmpTxt == "5") {
console.log("Break value "+ tmpTxt);
return false;
}

console.log("value "+ tmpTxt);

});


</script>
</body>
</html>

  - 결과( <li>6</li>에 해당하는 value값은 출력되지 않는다.)



'프로그래밍 > Javascript' 카테고리의 다른 글

How to detect browser.  (0) 2018.07.23
IOS 버전 관련 처리  (0) 2018.07.20
[Jquery] .each에서 break, continue 구현하기.  (0) 2018.07.02
How to create dynamic a form!  (0) 2018.06.07
javascript replaceAll 사용하기  (0) 2018.03.08
Timer 구현하기  (0) 2017.01.25

1. 동적으로 HTML Form을 생성

<html> 
<head>
</head>
<body>
<script>
generatorForm();

function generatorForm() {
var formEle = document.createElement("form");
formEle.setAttribute('method',"post");
formEle.setAttribute('action',"/action");

var tmpInput = document.createElement("input"); //input element, text
tmpInput.setAttribute('type',"text");
tmpInput.setAttribute('name',"tempValue");

formEle.appendChild(tmpInput);

var submitBtn = document.createElement("input"); //input element, Submit button
submitBtn.setAttribute('type',"submit");
submitBtn.setAttribute('value',"Submit BTN");

formEle.appendChild(submitBtn);

document.body.appendChild(formEle);
}
</script>
</body>
</html>


2. 문제 발생

 1) 에러

document.body.appendChild(formEle);

  - 위 소스를 추가 안할 경우 제대로 동작을 안함. 꼭 추가해야함.


자바스크립트에서는 replaceAll이 없다. 그래서 다른 방법으로 사용해야한다.


1. 기존 replace

var str = "TEST : Sample TEST text";
var replaceStr = str.replace("TEST","Test"); // TEST라는 텍스트를 Test으로 변경
console.log("replaceStr : ", replaceStr);

- 결과값

replaceStr :  Test : Sample TEST text


- 첫번째 조건만 변경하고 멈춘다.


2. replaceAll 사용하기

1) string prototype 메소드 추가해서 사용하기

 - searchStr을 구분자로 분리(split)한 다음, replacement라는 연결자로 연결(join)하는 형태

/**
* String prototype replaceAll 추가
* - searchStr을 구분자로 분리(split)한 다음, replacement라는 연결자로 연결(join)하는 형태
*
* @param searchStr : 바꾸려는 String
* @param replacement : 바꾸어질 String
*/
String.prototype.replaceAll = function(searchStr, replacement) {
return this.split(searchStr).join(replacement);
}

var protoTypeTestStr = "TEST : Sample TEST text";
var protoTypeTestRtnStr = protoTypeTestStr.replaceAll("TEST", "Test");
console.log("protoTypeTestRtnStr : ", protoTypeTestRtnStr);

- 결과값

protoTypeTestRtnStr :  Test : Sample Test text


2) 정규식을 활용

 - 변경하려는 값과 같은 것만(g 값을 사용)

var regexTestStr = "TEST : Sample TEST text";
var regexTestRtnStr = regexTestStr.replace(new RegExp("TEST", "g"), "Test");
console.log("regexTestRtnStr : ", regexTestRtnStr);

- 대소문자 구분 없이 처리(gi 값 사용)

var regexTestTipStr = "test : Sample test text";
var regexTestTipRtnStr = regexTestTipStr.replace(new RegExp("TEST", "gi"), "Test");
console.log("regexTestTipRtnStr : ", regexTestTipRtnStr);



3. 실제 사용하는 방법

1) String prototype으로 추가

/**
* String prototype replaceAll 추가
* - 정규식으로 replaceAll 구현
* - ignoreCasetrue이면 대소문자 구분없이 변경한다.
*
* @param searchStr : 바꾸려는 String
* @param replacement : 바꾸어질 String
* @param ignoreCase(boolean) : 대소문자 구분여부
*/
String.prototype.rexReplaceAll = function(searchStr, replacement, ignoreCase) {
return this.replace(new RegExp(searchStr, ignoreCase ? "gi" : "g"), replacement);
}


2) 실행

 - 소스

var regexProtoTestStr = "test : Sample test text";
var regexProtoTestRtnStr = regexProtoTestStr.rexReplaceAll("TEST", "Test", true);
console.log("regexProtoTestRtnStr : ", regexProtoTestRtnStr);

- 결과

regexProtoTestRtnStr :  Test : Sample Test text



4. 전체소스

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JAVASCRIPT replaceAll 구현하기</title>
</head>
<body>
<script>
/* 자바스크립트 기본 replace 테스트 */
var oriReplaceTestStr = "TEST : Sample TEST text";
var oriReplaceRtnStr = oriReplaceTestStr.replace("TEST","Test"); // TEST라는 텍스트를 Test으로 변경
console.log("oriReplaceRtnStr : ", oriReplaceRtnStr);

/**
* String prototype replaceAll 추가
* - searchStr을 구분자로 분리(split)한 다음, replacement라는 연결자로 연결(join)하는 형태
*
* @param searchStr : 바꾸려는 String
* @param replacement : 바꾸어질 String
*/
String.prototype.replaceAll = function(searchStr, replacement) {
return this.split(searchStr).join(replacement);
}

var protoTypeTestStr = "TEST : Sample TEST text";
var protoTypeTestRtnStr = protoTypeTestStr.replaceAll("TEST", "Test");
console.log("protoTypeTestRtnStr : ", protoTypeTestRtnStr);

var regexTestStr = "TEST : Sample TEST text";
var regexTestRtnStr = regexTestStr.replace(new RegExp("TEST", "g"), "Test");
console.log("regexTestRtnStr : ", regexTestRtnStr);

/** TIP : 대소문자 구분없이 처리 **/
var regexTestTipStr = "test : Sample test text";
var regexTestTipRtnStr = regexTestTipStr.replace(new RegExp("TEST", "gi"), "Test");
console.log("regexTestTipRtnStr : ", regexTestTipRtnStr);

/**
* String prototype replaceAll 추가
* - 정규식으로 replaceAll 구현
* - ignoreCasetrue이면 대소문자 구분없이 변경한다.
*
* @param searchStr : 바꾸려는 String
* @param replacement : 바꾸어질 String
* @param ignoreCase(boolean) : 대소문자 구분여부
*/
String.prototype.rexReplaceAll = function(searchStr, replacement, ignoreCase) {
return this.replace(new RegExp(searchStr, ignoreCase ? "gi" : "g"), replacement);
}

var regexProtoTestStr = "test : Sample test text";
var regexProtoTestRtnStr = regexProtoTestStr.rexReplaceAll("TEST", "Test", true);
console.log("regexProtoTestRtnStr : ", regexProtoTestRtnStr);
</script>
</body>
</html>


5. TIP

1) 정규식 추가

 - m을 추가하면 여러줄에 대해서도 처리가 가능하다.

1. 기능

 - HTML에서 특정 시간 카운트 다운

 - HTML에 카운트 되는 시간 출력


2. Code

 1) HTML Source

 <div id="timerTxt"></div> <!-- 타이머를 노출할 Div -->


 2) Javascript Source

var timerId;

var timerSec = 3;


window.onload= function() {

timerId = setInterval('timer()', 1000);

}


function timer() {

var min = Math.floor(timerSec / 60)

var sec = timerSec % 60;

var msg = (min < 10 ? "0"+ min : min) + ":" + (sec < 10 ? "0"+ sec : sec);

timerSec--;

if (timerSec < 0) { /* time End*/

msg += "<br>Timer End!"

clearInterval(timerId);

}

document.getElementById("timerTxt").innerHTML = msg;

}


 3) Full Source

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="UTF-8">

<title>타이머 샘플 소스</title>

</head>

<body>

<div id="timerTxt"></div>


<script type="text/javascript">

var timerId;

var timerSec = 3;

window.onload= function() {

timerId = setInterval('timer()', 1000);

}

function timer() {

var min = Math.floor(timerSec / 60)

var sec = timerSec % 60;

var msg = (min < 10 ? "0"+ min : min) + ":" + (sec < 10 ? "0"+ sec : sec);

timerSec--;

if (timerSec < 0) { /* time End*/

msg += "<br>Timer End!"

clearInterval(timerId);

}

document.getElementById("timerTxt").innerHTML = msg;

}

</script>

</body>

</html>


1. 개요

 - 글로벌 서비스를 진행하는 웹 페이지의 경우 다국어를 적용해야한다.

 - 그러나 모든 처리를 서버 사이드에서 진행하기에는 굉장히 부담이 크다.

 - 특히나 외부 javascript 파일의 경우 더욱 골치가 아프다.

 - 그래서 간단히 사용할 수 있는 자바스크립트 모듈 "i18n"을 소개하려고 한다.

 - Github URL : https://github.com/jquery-i18n-properties/jquery-i18n-properties


2. 간단한 설명

 - 기본 jquery lib는 무조건 import해야함.

 - jquery-i18n-properties에서 .js 파일을 다운로드함

 - 소스에 추가


 - 소스 사용은 아래 Example을 참고하시기를

 - i18n 명칭이 약간 이상해서 검색해봄

- 국제화는 때로 줄여서 그저 "I18N"이라고도 표기하는데, 그 의미는 이 용어의 영어 표기에서 첫 글자인 "I"자와 마지막 글자인 "N"의 사이에 18글자가 들어가 있다는 의미이다.​

출처 : http://www.terms.co.kr/internationalization.html


아래는 github README.md 내에 포함된 자료를 복사 붙여넣기 한거다. 

Messages.properties: # This line is ignored by the plugin 

msghello = Hello msgworld = World 

msg_complex = Good morning {0}!

Messages_pt.properties:


# We only provide a translation for the 'msg_hello' key

msg_hello = Bom dia

MessagesptPT.properties:


#We only provide a translation for the 'msg_hello' key

msg_hello = Olá


Now, suppose these files are located on the bundle/ folder. One can invoke the plugin like below:


$.i18n.properties({

     name:'Messages'

     path:'bundle/'

     mode:'both',

     language:'pt_PT'

     callback: function() {

         // We specified mode: 'both' so translated values will be

         // available as JS vars/functions and as a map


         // Accessing a simple value through the map

         jQuery.i18n.prop('msg_hello');

         // Accessing a value with placeholders through the map

         jQuery.i18n.prop('msg_complex', 'John');


         // Accessing a simple value through a JS variable

         alert(msg_hello +' '+ msg_world);

         // Accessing a value with placeholders through a JS function

         alert(msg_complex('John'));

     } 

});​​




+ Recent posts