20210908 javascript 변수 ~ 반복문

변수

 

- 데이타를 저장 할 수 있는 메모리 공간 
- var, let 키워드로 변수를 선언한다. 
- 자료형은 저장된 데이타의 값에 의해 결정된다. 
- 기본 자료형은 문자형, 숫자형, 논리형 이 있다.
- 문자형은 홋따옴표, 혹은 쌍따옴표로 시작과 끝을 알린다.
- 변수 선언시 기본값은 undefined 이다. 
- 변수명(식별자)은 예약어를 사용 할 수 없다.  
- 변수명(식별자) 앞에는 숫자나 특수기호를 쓸 수 없다. (_, $ 제외) 
- 변수명(식별자) 한글을 사용 할 수 없다. 
- 상수(변하지 않는 값) 선언은 const 키워드로 선언한다. 
- 자료형을 확인 하기 위해서는 typeof 키워드로 확인한다. 

 

	<script type="text/javascript">
		var n; //기본값 undefined
		
		var str = ''; // <<< 문자형
		var number = 0; // <<< 숫자형
		var b = true; //논리형
		
		//상수 선언시 값을 대입하며 선언한다.
		const con = '홍길동';
		
		/*
			java -> System.out.println("");
			javascript -> consol.log("");		
		*/		
		
		var str2 = str;
		var number2 = number + 2;
		
		/*
			typeof 식별자(변수) -> 변수 담긴 값의 자료형을 확인 할 수 있다. 
		*/		
		console.log(str, typeof str);
		console.log(number, typeof number);
		console.log(b, typeof b);
		console.log(str2, typeof str2);
		console.log(number2, typeof number2);
		
		var str3 = typeof str;
		
		
		var n1 = '1000';
		
		/* 문자열을 숫자로 바꿔주는 함수 */
		console.log(n1, Number(n1));
		
		var n2 = Number(n1);
		console.log('n2 >>', n2);
		
		/* 
			문자 결합 연산자	
			문자열 + 다른형 결괏값 보기 
			문자열과 다른형이 연산이된다면 문자형이 반환된다.
		*/
		var n3 = 10000;
		var n4 = '5000';
		console.log(n3 + n4);
		
		/*
			논리형 함수, 논리형 값의 이해
			true or false -> 참 or 거짓
			Boolean(인수) -> 인수값이 참인지 거짓인지 판단
			숫자형일때 -> 0 거짓, 0이상은 참
			문자형일때 -> 공백은 거짓, 값이 있을 경우 참
			undefined -> 거짓
		*/
		var b1 = Boolean(0); //false
		var b2 = Boolean(1); //true
		console.log(b1, b2);
		
		if(0){
			console.log('참');
		}else{
			console.log('거짓');			
		}
		
		var str1 = '';
		var str2 = '안녕하세요.';
		var b3 = Boolean(str1); //false
		var b4 = Boolean(str2); //true
		console.log(b3, b4);
		
	
	</script>

 

 

---

<변수명, 변수표기법>

<h1>변수명, 변수표기법</h1>
	- 변수명 : 의미있는 단어로 구성할것.
	
	<h2>변수표기법</h2>
	언더바표기법(스네이크) : 단어와 단어사에 _ 표기 <br>
	헝가리안표기법 : 변수명앞에 자료형을 표기 하는 방식 <br>
	카멜표기법 : 낙타 등처럼 생겼다 해서 카멜표기법이라 부르며,
	처음 단어는 소문자로 시작, 다음 단어는 첫글짜는 대문자로 시작하며
	후의 단어들은 소문자 <br>
	예) userName <br>
	파스칼표기법 : 처음 단어의 첫글짜는 대문자 다음단어의 처음 시작은 대문자 <br>
	예) UserName <br>

---

<연산자>

- 연산을 하는 기호

 

<산술연산자>

- 더하기, 빼기, 나누기 (/), 나머지(%), 곱하기(*)

 

<script type="text/javascript">
		var n1 = 10;
		var n2 = 3;
		var n3 = n1 % n2;
		console.log(n3, 'n1 % n2');
		
		var n4 = 100;
		var n5 = 101;
		var n6 = 66;
		console.log(n4 % 2, '나머지가 0이면 짝수');
		console.log(n5 % 2, '나머지가 1이면 홀수');
		console.log(n6 % 3, '3으로 나눠서 나머지가 0이면 3의 배수이다.');
	
		
		var n7 = 100;
		var n8 = 3;
		console.log(n7 / n8, 'n7 / n8');		
	</script>

---

<문자결합연산자>

- 문자형과 다른형끼리 연산을 하면 문자형이 된다.
- 문자형을 결합할때는 + 기호로 한다.

 

<script type="text/javascript">
		
		/*
			NaN - 계산을 할 수 없을때
		*/
		var strn1 = '안녕하세요1000';
		var strn2 = 100;
		console.log(strn1 - strn2);
		console.log(strn1 + strn2, '+ 기호로 문자결합');
		
	</script>

 

---

<대입연산자> : 산술연산자를 간소화

<script type="text/javascript">
		var n1 = 10;
		n1 = n1 + 10;
		console.log(n1, 'n1 + 10');
		
		var n2 = 10;
		n2 += 10;
		console.log(n2, 'n2 += 10');
		
		var n3 = 10;
		var n4 = 10;
		n3 *= n4;
		console.log(n3, 'n3 *= n4');
		
	</script>

 

---

<증감연산자>

- ++, -- 기호로 1씩 증가 혹은 1씩 감소시킨다.
- 증감연산자가 변수명 앞이나 뒤에 오는 상황에 따라 결과물이 달라진다.

 

<script type="text/javascript">
		var n1 = 0;
		console.log(n1++, '후증가');
		console.log(n1, '후증가 후 결과');
		
		var n2 = 0;
		console.log(++n2, '선증가');
		console.log(n2, '선증가 후 결과');
		
		var n3 = 10;
		var n4 = 10;
		
		n4 = ++n3;
		
		console.log(n4, n3);
		
		var n5 = 0;
		var n6 = 10;
		
		n5 = n6++;
		console.log(n5, n6);
		
	</script>

 

---

 

<비교연산자>

- 크다, 작다, 같다, 같지 않다의 확인하여 결괏값을 boolean형으로 받아온다. 
- >, <, <=, >=, ==, != 숫자형 비교 일때 (=<, => 는 오류)
- 숫자형 외 ==, != 

<script type="text/javascript">
		var b1 = 10 == 11;
		console.log(b1, '10 == 11');
		
		var b2 = 10 != 10;
		console.log(b2, '10 != 10');
		
		var str1 = '홍길동';
		var str2 = '이순신';
		var b3 = str1 == str2;
		
		console.log(b3, 'str1 == str2');
		
		var n1 = 10;
		
		//같은 형끼리 비교를 한다.		
		//var b4 = n1 == str1;
			
	</script>

 

---

<논리 연산자>

- || -> or 2개 이상의 조건 중 하나라도 참이면 참. 
- && -> and 2개 이상의 조건이 모두 참이여 참. 
- ! -> 결괏값의 반대 

<script type="text/javascript">
		var b1 = true || false;
		console.log(b1);
		
		var b2 = true && false;
		console.log(b2);
		
		var n1 = 10;
		var n2 = 10;
		var n3 = 20;
		var b3 = n1 == n2 || n3 == n2 + n1;
		/*
			연산자 우선순위
			()
			단항 (++, --, !)
			산술
			비교
			논리
			대입
		*/
		console.log(b3);
		
		var b4 = n1 == n3 && n1 == n2;
		console.log(b4);
		
		// not > ! -> 결과의 반대
		console.log(!n1 == n2);
		console.log(!b4);
		console.log(!(n1 == n3 && n1 == n2));		
	
	</script>

 

n1 == n2 || n3 == n2 + n1;

(10 == 10 or 20 ==20)

하나라도 참이면 true

 

n1 == n3 && n1 == n2

둘다 참이여야 true

 

---

<switch>

- 특정값(특정 변수의 값)으로 다수를 비교할 때 유용하게 쓰인다.

 

<script type="text/javascript">
		var n = 10;
		switch(n){// switch 인수에 1개의 값이 삽입
		//case 키워드 다음에 비교 할 대상의 값 : 실행할 코드; 
			case 1 : console.log(1);
			break; //중단.
			case 5 : console.log(5);
			break; //중단.
			case 10 : console.log(10);
			break; //중단.
			default : console.log('일치하는값이 없음');
		}
	
	</script>

 

변수n 은 10

switch 인수에 1 , 5, 10 대입

일치하는 값을 출력

---

<반복문 while>

<h2>반복문</h2>
	- 반복적으로 수행이 필요할 경우.<br>
	- while, for, do while  문이 있다.
	
	<h3>while</h3>
	- 조건식이 true 일 때 반복 수행
	
	<script type="text/javascript">
		/*
			10번 반복 시키기.
		*/
		var n = 0; //반복을 중단하기 위해서 초기값으 설정하여 조건으로 활용한다.
		while (n<10){ //조건식을 false가 나올 수 있도록 해야한다.
			console.log('반복 수행', n);
			n++; // 반복이 수행될 때마다 n값을 증가
		}
	</script>

---

<반복문 while 실습>

실습1. while 문을 활용하여 구구단 2단의 결괏값을 출력하도로 하여라.

<script type="text/javascript">
		var n1 = 2;
		var n2 = 1;
		while (n2 < 10){
			console.log(n1+"*"+ n2+"="+ n1*n2);
			n2++;
		}

	</script>

 

실습2. 구구단 3단의 결과값이 짝수인 것만 출력하여라.

<script type="text/javascript">
		var n = 1;
		while (n < 10){
			if((3 * n) % 2 == 0){
				console.log(3 * n);
			}
			n++;
		}
		
	</script>