(46) [JavaScript] 2일 JavaScript 기본

💻/Javascript

(46) [JavaScript] 2일 JavaScript 기본 - 2

따궈 2024. 4. 19. 11:45

자료형 변환

JavaScript는 동적 형 지정 언어로 변수를 선언할 때 데이터 형을 지정할 필요가 없다. 데이터형이 스크립트 실행 도중 필요에 의해 자동으로 변환된다.

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

	<h3>형 변환</h3>
	
	<script type="text/javascript">
	var a,b;
	
	a="123";
	console.log(typeof(a));
	
	b=a+10; // 문자+숫자 = > 문자+문자 => 문자
	console.log(b) //12310
	
	a=Number(a); // Number() 함수를 이용하여 문자열을 숫자로 변환 
	console.log(typeof(a));
	b=a+10;
	console.log(b);//123
	console.log(Number('1,234')); //NaN 
	console.log(parseInt('1,234')); // 1
	
	a=120;
	a=String(a); // String()함수를 이용하여 숫자를 문자열로 변환 
	console.log(typeof(a)); //string 
	
	a="true";
	a=Boolean(a);
	console.log(typeof(a)); // boolean 
	
	</script>

</body>
</html>

상수

상수는 스크립트가 실행 중에는 대입을 통해 값을 바꾸거나 재 선언될수없으며, 선언시 값으로 초기화해야 한다. 상수에 대한 범위 규칙은 let 블록 범위 변수와 동일하다. const 키워드가 생략된 경우에는, 식별자는 변수를 나타내는 것으로 간주한다. 상수는 같은 범위에 있는 함수나 변수와 동일한 이름으로 선언할 수 없다.

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

	<h3>상수 - const</h3>

	<script type="text/javascript">
		const PI = 3.141592; // 상수 

		//const sub = 10; 에러 : const 이름과 함수명은 같을 수 없음 

		function sub() {
			console.log(PI);
			// 	PI=3.14; // TypeError

			const x = 10;
			// var x = 20; 에러 : 상수는 같은 범위 안에서 
			//변수나 함수와 동일한 이름으로 선언 불가

			//const a; 에러. const는 초기화 필요 

			if (true) {
				const a = 10; // 에러 : const는 let 블록 범위와 동일
			}
			//console.log(a); 에러 

			let a = 50;
			console.log(a);
			
			//const로 선언된 배열의 내용 및 객체의 속성은 보호 하지 않는다. 
			const arr=['html','css']; // 배열 
			arr.push('javascript'); // 배열 뒤에 요소를 추가
			arr[0]='HTML';
			console.log(arr);
			//arr=10; 에러 : TypeError
			
			
			//const obj = {'subject':'java',score:100};
			const obj ={subject:'java',score:100};
			//{속성이름:값}
			console.log(obj.subject);
			obj.subject='html';
			console.log(obj.subject);
			
		
		}

		sub();
	</script>

</body>
</html>

리터널(Literal)

리터널은 데이터 그 자체를 의미하며, 변수에 넣는 변하지 않는 데이터. 스크립트에 부여한 고정 값으로, 변수가 아니다.

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

	<h3>리터널</h3>

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

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

		a = o13
		//o13; // 8진수. 013으로 표현 가능하지만 에러 표시  
		console.log(a); // 11 

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

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

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

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

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

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

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

		a = "subject:\"java\", score:100";
		console.log(a);

		a = 'subject:"java", score:100';
		console.log(a);

		a = /\d+/; // 정규식,1자리 이상의 숫자
		console.log(a);

		a = [ 'java', 'oracle', 'spring' ]; // 배열 리터널
		console.log(a);

		a = {
			name : '김자바',
			age : 20
		}; // 객체 리터널
		console.log(a);
		
		var name='김자바';
		var score=95;
		var msg;
		
		//msg="안녕하세요."+name+"님"+name+"님의 점수는"+score+"점 입니다.";
		//탬플릿 리터널 
		msg=`안녕하세요. ${name}님 ${name}님의 점수는 ${score}점 입니다.`;
		console.log(msg);
	</script>



</body>
</html>

연산자

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

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

<h3>연산자</h3>

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

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

c=1/2;
console.log(c); // 0.5

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; // 우결합, c=2**(3**2)과 동일 
console.log(c); //512 

//c=-2**2// 모호성에 의해 허용하지 않음 

a="1.1";
b="1.1";
c=a+b;
console.log(c); // 1.11.1

c=(+a)+(+b); //2.2, 단항연산자 +를 사용 
console.log(c);

</script>


</body>
</html>

비교 연산자

비교 연산자는 피 연산자들을 비교하여 true 또는 false를 반환한다. 피 연산자는 숫자,문자열,논리형, 객체를 사용할 수 있으며 문자열은 유니코드 값을 사용 사전 순으로 비교한다.

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

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

	<script type="text/javascript">
		var a = '123';
		var b = 123;
		
		console.log(a == b); //true
		console.log(a === b); //===:동치,false
	
		console.log(a!=b); // false
		console.log(a!==b); // true, 동치가 아닌 경우
		
	</script>


</body>
</html>

논리 연산자

논리 연산자는 보통 true,false과 사용한다. &&과 || 연산자는 실제로 명시된 피연자들 중 하나를 반환하므로 피 연산자가 부울 값이 아닐 경우 부울 값이 아닌 값을 반환할 수 있다.

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

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

	<script type="text/javascript">
	var a="";
	
	//"",0,null,undefined,NaN 등은 모두 거짓이다.
	
	if(a){
		console.log("a : 참");
	}else{
		console.log("a:거짓");
	}
	
	a=0&&"css"; // false && true
	console.log(a); // 0, 앞이 거짓이므로 뒤 연산을 하지 않아서 0을 반환
	
	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"||false;
	console.log(a); // html 
	
	a=0||"css";
	console.log(a); // css 
	
    
	</script>

</body>
</html>