인코딩 : 문자를 컴퓨터에 저장 또는 통신에 사용할 목적으로 부호화하는 방법

디코딩 : 부호화된 문자를 원래대로 되돌리는 것

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var s = "seoul?자바&123+4";
var out;

out = escape(s); // 영문자, 숫자, 일부특수문자(@ * - _ + . /)를 제외한 문자 인코딩
console.log("escape : " + out); // seoul%3F%uC790%uBC14%26123+4

out = encodeURI(s); 
	// 영문자, 숫자, 인터넷 주소에 사용하는 일부 특수문자(: / = + & ? ....) 를 제외한 문자를 주소형식으로 인코딩
console.log("encodeURI : " + out); // seoul?%EC%9E%90%EB%B0%94&123+4

out = encodeURIComponent(s); // 영문자, 숫자를 제외한 문자를 인코딩
console.log("encodeURIComponent : " + out); 
	// seoul%3F%EC%9E%90%EB%B0%94%26123%2B4

out = decodeURIComponent(out); // 디코딩
console.log(out);

	
</script>

</head>
<body>

<h3>인코딩과 디코딩</h3>

</body>
</html>

문자열을 코드로 실행 할 수 있는 특별한 함수

eval() 함수로 실행 된 코드에서 정의한 변수도 활용 가능

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var s;
s = "var a=10, b=5, c;";
s += "c = a + b;";
s += "alert(c);";

// console.log(s);

// 문자열을 코드로 실행
eval(s);

s = "console.log(c);";
eval(s); // eval() 함수로 호출한 코드의 변수를 사용

</script>
</head>
<body>

<h3>문자열을 자바스크립트 코드로 실행 - eval() 함수</h3>

</body>
</html>

 

isFinite(testValue) : number가 무한한 값인지 확인, 유한한 수이면 true를 리턴

isNaN(testValue) : number가 숫자인지 확인, 숫자가 아니면 true를 리턴

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var a, b;

a = "123";
b = isFinite(a); // true. 숫자로 이루어져 있는 경우 true
console.log(a + " : " + b);

a = "123.57";
b = isFinite(a); // true
console.log(a + " : " + b);

a = "1,234";
b = isFinite(a); // false. , 가 있어서 false
console.log(a + " : " + b);

a = "123a";
b = isFinite(a); // false
console.log(a + " : " + b);

a = "123";
b = isNaN(a); // false 숫자로 이루어져 있지 않으면 true
console.log(a + " : " + b);

a = "1,234";
b = isNaN(a); // true
console.log(a + " : " + b);

</script>
</head>
<body>

<h3>문자열이 숫자로 이루어져 있는지 확인</h3>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var a, b;

a = "123";
b = Number(a);
console.log(b); // 123
console.log( b === 123); // true

a = "123.57";
b = Number(a); // 123.57
console.log(a + " : " + b); //123.57 : 123.57

a = "1,234";
b = Number(a); // NaN
console.log(a + " : " + b); // 1,234 : NaN

a = "123a";
b = Number(a); // NaN
console.log(a + " : " + b); // 123a : NaN

a = "";
b = Number(a); // 0
console.log(a + " : " + b); //  : 0

a = null;
b = Number(a); // 0
console.log(a + " : " + b); // null : 0

a = "kor";
b = Number(a); // NaN
console.log(a + " : " + b); // kor : NaN

a = "0x11";
b = Number(a); // 17
console.log(a + " : " + b); // 0x11 : 17

</script>


</head>
<body>

<h3>숫자로 변환 - Number() 함수</h3>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var a, b;

a = "123";
console.log(a === 123); // false 

b = parseInt(a); // 문자열을 숫자로 변환
console.log(b); // 123
console.log(b === 123); // true

a = "1,234";
b = parseInt(a); // 1
console.log(a + " : " + b); // 1,234 : 1

a = "123a";
b = parseInt(a); // 123
console.log(a + " : " + b); // 123a : 123

a = "a123";
b = parseInt(a); // NaN
console.log(a + " : " + b); // a123 : NaN

a = "123.567";
b = parseInt(a); // 123
console.log(a + " : " + b); // 123.567 : 123

a = "";
b = parseInt(a); // NaN
console.log(a + " : " + b); //  : NaN

a = "     123";
b = parseInt(a); // 123
console.log(a + " : " + b); //      123 : 123

a = "1 2 3";
b = parseInt(a); // 1
console.log(a + " : " + b); // 1 2 3 : 1

a = "123.567";
b = parseFloat(a); // 123.567
console.log(a + " : " + b); //123.567 : 123.567


</script>
</head>
<body>

<h3>숫자로 변환 - parseInt, parseFloat</h3>

</body>
</html>

연산자란 ?

연산자는 변수나 상수에 미리 약속된 연산을 행하기 위해 사용되며, 연산되는 항의 개수 따라 이항 연산자(binary operator), 단항 연산자(unary operator)등으로 나누어진다.

 

연산자

더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var a, b, c;

// +, -, *, /, %, ++, --

c = 10 / 0; 
console.log(c); // Infinity : 무한대를 나타내는 숫자
if(c === Infinity) {
	console.log('0으로 나누었습니다.');
}


a = 2;
b = 10;
c = a ** b; // 거듭 제곱
console.log(c); // 1024

c = 2 ** 3 ** 2; // 2 ** (3 ** 2)과 동일. 우결합성
console.log(c); // 512

// c = -2 ** 2; // 에러. 모호한 표현은 허용하지 않음

// 문자열 결합
a = "seoul";
b = "korea";
c = a + b ;
console.log(c);

a = 10;
b = "5";
c = a + b ; // 숫자 + 문자 => 문자 + 문자 => 문자
console.log(c); // 105
</script>
</head>
<body>

<h3>연산자</h3>

</body>
</html>

 

연산자 - 비교 연산자

더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var a, b;

a = '123';
b = 123;

console.log(a == b); // true
console.log(a === b); // false(동치). 두 값을 비교할 때는되도록이면 ===을 사용할 것을 권장

console.log(a != b); // false
console.log(a !== b); // true(동치가 아닐 경우 참)

</script>
</head>
<body>

<h3>연산자 - 비교 연산자</h3>

</body>
</html>

 

연산자 - 논리

더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var a = "";

// 값이 "", 0, null, undefined, NaN 등은 거짓이다.
if(a) {
	console.log("참...")
} else {
	console.log("거짓...")
}

a = 0;
if(a) {
	console.log("true...")
} else {
	console.log("false...")
}
// 값이 있으면 true 로 생각함.
a = "html" && "css";
console.log(a); // css

a = "html" && true;
console.log(a); // true

a = false && "css";
console.log(a); // false

a = "html" || "css";
console.log(a); // html

a = "html" || true;
console.log(a); // html

a = false || "css";
console.log(a); // css

a = 0 || "css";
console.log(a); // css

a = 10 || "css";
console.log(a); // 10

</script>
</head>
<body>

<h3>연산자 - 논리</h3>

</body>
</html>

논리연산은 단축연산을 기억할 것

 

리터널은 데이터 그 자체를 의미하며, 변수에 넣는 변하지 않는 데이터이다.

스크립트에 부여한 고정 값으로, 변수가 아니다.

 

리터널

더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<script type="text/javascript">
var a;

a = 13; // 10진수
console.log(a);

a = 013; // 8진수
console.log(a); // 11

a = 0x13; // 16진수
console.log(a); // 19

a = 0b1001; // 2진수
console.log(a); // 9

a = 3.141592;
console.log(a); // 부동 소수점

a = 3.1E+12;
console.log(a); // 부동 소수점

a = 'seoul'; // 문자열 리터널
console.log(a);

a = "seoul"; // 문자열 리터널
console.log(a);

a = "c:\\temp"; // 문자 이스케이프
console.log(a);

a = "subject : \"java\", price:1000";
console.log(a); // 문자 이스케이프

a = 'subject : "java", price:1000';
console.log(a); 

a = /ab+c/; // 정규식 리터널
console.log(a);

a = ["html", "css", "javascript"]; // 배열 리터널
console.log(a); 

a = {name:"홍길동", age:20}; // 객체 리ㅓ널
console.log(a);

var x = "홍";
var y = "길동";
var msg;

msg = `안녕하세요 ${x} ${y}님`; // 템플릿 리터널(${}표현식으로 처리된 값을 문자열로 반환)
		// 템플릿 리터널은 반드시 백틱(`)을 사용하며 ' 또는 "를 사용하지 않는다.
console.log(msg);


</script>



</head>
<body>

<h3>리터널(liternal)</h3>

</body>
</html>

 

+ Recent posts