아래의 함수는 인코딩과 디코딩에 관련된 함수이다.
가끔 인터넷 주소창을 복사하여 붙여넣기 했을 때 분명 한글로 된 문자가
%$4764$%&$% 와 같이 이상하게 표시되는 걸 본적이 있을 것이다.
이와 관련된 인코딩에 대해서 확인해보자
escape : 영문 알파벳, 숫자, 일부 특수문자(@, *, -, _, ., /)를 제외한 모든 문자를 인코딩한다.
encodeURI : escape에서 인터넷 주소에 사용되는 일부 특수문자 (:, ;, /, =, ?, &)는 변환하지 않는다.
encodeURIComponent : 알파벳과 숫자를 제외한 모든 문자를 인코딩한다.(UTF-8 방식)
unescape : escape()로 인코딩 된 문자를 디코딩한다.
decodeURI : encodeURI()로 인코딩된 문자를 디코딩한다.
decodeURIComponent : encodeURIComponent()로 인코딩된 문자를 디코딩한다.
eval은 입력받은 문자열을 스크립트 코드로 적용하는 것이다.
innerHTML의 스크립트 버젼이라고 이해하면 쉽다.
또한 계산 식 같은 경우도 쉽게 연산해주기 때문에
eval("(3 * 4) + 1 / 3 + 5"); 와 같이 사용하면 연산 값을 반환한다.
Infinity는 무한이란 의미로 숫자 값을 0으로 나누면 Infinity를 반환한다.
isFinite() 함수를 이용해서 유한한지 무한한지 알 수 있고 음의 무한과 양의 무한이 구분되어 있다.
NaN, Not a Number은 연산의 결과나 자바스크립트로 표현 할 수 없는 숫자일 때 표시되는 문구이다.
형변환
Number는 숫자형으로 형 변환하는 함수로 변환하지 못하면 NaN을 반환한다.
parse
parseInt는 정수형으로 변환하고
parseInt( 'XXX', XX)와 같이 인자를 두 개 넣어서 사용하면 16진수 10진수 8진수 2진수를 10진수로 변환이 가능하고
지정된 형식을 입력하면 자동으로 10진수로 변환해준다.
parseFloat는 java와 비슷한데 중간에 e라는 문자를 만나면 지수로 인식하여 연산 결과를 반환한다.
다음 예를 확인해보자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.area{
background: lightgray;
border: 1px solid black;
height: 150px;
}
.area-big{
background: lightgray;
border: 1px solid black;
height: 350px;
}
</style>
</head>
<body>
<h1>JavaScript 내장함수</h1>
<h3>인코딩과 디코딩에 관련된 내장함수</h3>
<p>
escape() : 영문 알파벳, 숫자, 일부 특수문자(@, *, -, _, ., /)를 제외한 모든 문자를 인코딩한다.<br>
encodeURI() : escape에서 인터넷 주소에 사용되는 일부 특수문자
(:, ;, /, =, ?, &)는 변환하지 않는다.<br>
encodeURIComponent() : 알파벳과 숫자를 제외한 모든 문자를 인코딩한다.(UTF-8 방식)<br>
<br>
unescape() : escape()로 인코딩 된 문자를 디코딩한다.<br>
decodeURI() : encodeURI()로 인코딩된 문자를 디코딩한다.<br>
decodeURIComponent() : encodeURIComponent()로 인코딩된 문자를 디코딩한다.
</p>
<button onclick="test1();">실행확인</button>
<div id="area1" class="area"></div>
<script type="text/javascript">
function test1() {
var uri = "http://www.naver.com?test=한글입니다.";
var esURI = escape(uri);
var enURI = encodeURI(uri);
var enURIC = encodeURIComponent(uri);
var area1 = document.getElementById("area1");
area1.innerHTML += "escape() : " + esURI + "<br>";
area1.innerHTML += "encodeURI() : " + enURI + "<br>";
area1.innerHTML += "encodeURIComponent() : " + enURIC + "<br>";
area1.innerHTML += "unescape() : " + unescape(esURI) + "<br>";
area1.innerHTML += "decodeURI() : " + decodeURI(enURI) + "<br>";
area1.innerHTML += "decodeURIComponent() : " + decodeURIComponent(enURIC) + "<br>";
}
// ? test = 한글입니다. 라는 변수를 전달
</script>
<hr>
<h3>eval() 함수</h3>
<p>문자열을 자바스크립트 코드로 변환해 실행하는 함수이다.</p>
<br>
<label>숫자 1 입력</label>
<input type="text" id="number1">
<br>
<label>숫자 2 입력</label>
<input type="text" id="number2">
<br>
<button onclick="test2();">실행확인</button>
<div id="area2" class="area"></div>
<script type="text/javascript">
function test2() {
var testEval = "";
testEval = "var number1 = parseInt(document.getElementById('number1').value);";
testEval += "var number2 = parseInt(document.getElementById('number2').value);";
testEval += "var sum = 0;";
testEval += "sum = number1 + number2;";
testEval += "document.getElementById('area2').innerHTML += number1 +'과 ' + number2 + '의 합은 ' + sum + '입니다.';";
eval(testEval);
}
</script>
<hr>
<h3>infinity 와 NaN</h3>
<p>대부분의 프로그래밍 언어는 0으로 숫자를 나누면 자동으로 오류가 발생하고
프로그램이 종료된다<br>
하지만 자바스크립트는 0으로 숫자를 나누면 infinity라는 값이 들어가게 되고<br>
자바스크립트가 표현할 수 없는 숫자는 NaN(Not a Number)으로 표시된다.</p>
<button onclick="test3();">실행확인</button>
<div id="area3" class="area"></div>
<script>
function test3(){
var num1 = 10 / 0;
var num2 = 10 / 'a';
var area3 = document.getElementById("area3");
area3.innerHTML += "10 / 0 : " + num1 + "<br>";
area3.innerHTML += "10 / 'a' : " + num2 + "<br>";
area3.innerHTML += "isFinite() : " + isFinite(num1) + "<br>";
area3.innerHTML += "num1 == Infinity : " + (num1 == Infinity) + "<br>";
// Finite = 유한수
var num3 = -10 / 0;
area3.innerHTML += "num3 == -Infinity : " + (num3 == -Infinity) + "<br>";
// 무한 대수는 양의 무한대수와 음의 무한대수가 있다.
// NaN은 Infinity와 달리 비교연산자로 확인할 수 없다.
if (num2 == NaN) {
area3.innerHTML += "num2는 숫자가 아닙니다.<br>";
}else {
area3.innerHTML += "num2는 숫자입니다.<br>";
}
if (isNaN(num2)) {
area3.innerHTML += "num2는 숫자가 아닙니다.<br>";
}else {
area3.innerHTML += "num2는 숫자입니다.<br>";
}
}
</script>
<hr>
<h3>Number(), parse(), parseFloat()</h3>
<p>Number() : 숫자로 바꿀 수 없으면 무조건 NaN을 리턴한다.<br>
parseInt(), parseFloat() 숫자로 변환할 수 있는 부분까지는 모두 숫자로 변환한다.
</p>
<button onclick="test4();">실행확인</button>
<div id="area4" class="area-big"></div>
<script type="text/javascript">
function test4() {
var money = '1000원';
var dollar = '1.5$';
var area4 = document.getElementById("area4");
area4.innerHTML += "Number(money) : " + Number(money) + "<br>";
area4.innerHTML += "Number(dollar) : " + Number(dollar) + "<br>";
// 앞에서부터 정수로 인식할 수 있는 부분까지 변환
area4.innerHTML += "parseInt(money) : " + parseInt(money) + "<br>";
area4.innerHTML += "parseInt(dollar) : " + parseInt(dollar) + "<br>";
area4.innerHTML += "parseFloat(money) : " + parseFloat(money) + "<br>";
area4.innerHTML += "parseFloat(dollar) : " + parseFloat(dollar) + "<br>";
// 16진수도 10진수로 계산 가능
area4.innerHTML += "parseInt(0X1234) : " + parseInt(0X1234) + "<br>";
// 8진수(앞에 0이 붙음)도 10진수로 계산 가능
// 그러므로 문자열로 입력받을 때 앞에 0을 입력하지 않게 주의
area4.innerHTML += "parseInt(01234) : " + parseInt(01234) + "<br>";
// 10진수 문자열을 10진수로 변환
area4.innerHTML += "parseInt('1234') : " + parseInt('1234') + "<br>";
// n진수 숫자를 10진수로 변환한다.
area4.innerHTML += "parseInt('FF', 16) : " + parseInt('FF', 16) + "<br>";
area4.innerHTML += "parseInt('52', 10) : " + parseInt('52', 10) + "<br>";
area4.innerHTML += "parseInt('11', 8) : " + parseInt('11', 8) + "<br>";
area4.innerHTML += "parseInt('10', 2) : " + parseInt('10', 2) + "<br>";
// float에서 e는 지수로 인식
// 중간데 e 전까지만 parsing 하는것이 아니고 제곱 처리를 한다.
area4.innerHTML += "parseFloat('52.273e5') : " + parseFloat('52.273e5') + "<br>";
}
</script>
</body>
</html>
'HTML, CSS, JavaScript, jQuery > 04.Java Script' 카테고리의 다른 글
| [JS]04-014.JS의 객체 배열과 생성자 함수 (0) | 2018.11.14 |
|---|---|
| [JS]04-013.JS의 객체 사용 방법 (0) | 2018.11.13 |
| [JS]04-010.JS에서의 함수2(인자에 함수 선언, 함수를 매개변수로 전달, 익명 함수를 리턴) (0) | 2018.11.13 |
| [JS]04-009.JS에서의 함수(기본 선언, 익명 함수, 스스로 실행되는 함수, 인자 및 매개변수, 리턴처리, 가변인자 함수, 내부(중첩) 함수) (0) | 2018.11.13 |
| [JS]04-011.JS에서의 함수(스코프, 클로져, 여러개의 클로져) (0) | 2018.11.13 |