JavaScript_기본문법

<기본 문법>

1) 변수와 자료형

2) 데이터 형변환

3) 연산자

4) 조건문과 반복문

 

1)변수와 자료형

1-1) 변수 선언

: 함수 내부에서 'var 변수명;' 으로 선언하면 지역변수가 된다.

  함수 내부에서 '변수명;'으로 선언하거나 함수 밖에서 '변수명;' 혹은 'var 변수명;'으로 선언하면 전역변수가 된다.

  전역변수와 지역변수가 동일한 이름인 경우 함수 내부에서 변수 명을 호출하면 지역변수가 우선권을 가진다.

  전역 변수 사용 시 'window.변수 명;' 혹은 'this.변수 명;'으로 표현하여 지역변수가 구분된다

  전역변수는 해당 window내에서 어디든 사용할 수 있으며, 지역변수는 해당 함수 내에서만 사용이 가능하다.

 

<예시>

<script>
		str1="전역변수";//함수밖에서 사용해서 전역변수
		var str2 = "전역변수";
		
		window.onload = function(){
		//페이지가 로드되면 자동으로 실행하는 함수	
		//한 페이지에서 하나의 onload함수만 기술 가능
		
		var str1="지역변수1";//함수안에 있어서 지역변수
		var str3="지역변수2";//함수 안에 있어서 지역변수
		
		console.log('str1 : ' + str1);//지역변수1
		console.log('this.str1 : ' + this.str1);//전역변수
		console.log('window.str1 : ' + window.str1);//전역변수
		
		console.log('str2 : ' + str2);//var전역변수
		console.log('this.str2 : ' + this.str2);//var전역변수
		console.log('window.str2 : ' + window.str2);//var전역변수
		
		console.log('str3 : ' + str3);//지역변수2
		console.log('this.str3 : ' + this.str3);//undefined : 자바스크립트에서는 데이터로 받아들임, 에러가 아닌 정의되지않은 값
		console.log('window.str3 : ' + window.str3);//undefined
		
		what= '난 뭘까?';//전역변수 (var없이 변수명으로 호출해서)
		showWhat();
			
		}
		function showWhat(){
			console.log(what); 
			console.log(this.what);
			console.log(window.what);
		}
</script>

window.onload = function(){}

: 페이지가 로드되면 자동으로 실행하는 함수

 

undefined

: 자바스크립트에서는 데이터로 받아들임, 에러가 아닌 정의되지않은 값

 

1-2) 자료형

: 자바스크립트에서 자료형 별로 변수 타입이 지정되지 않고 리터럴에 의해 자료형 결정

<button onclick="typeTest();">자료형 테스트</button>
	<script>
	 	function typeTest(){
	 		var name = "강건강"; //문자열
	 		var age = 20; //숫자
	 		var check = true;//논리값
	 		var hobby = ['축구', '야구', '농구']; //배열
	 		var user = {
	 			name: '강건강',
	 			age: 20,
	 			id: 'user01'
	 		};// 객체
	 		var testFunction = function(num1, num2){
	 			var sum = num1 + num2;
	 			alert(sum);
	 		};//함수
	 		
	 		console.log(name);
	 		console.log(typeof(name));//string
	 		console.log(age);
	 		console.log(typeof age);//number
	 		console.log(check);
	 		console.log(typeof check);//boolean
	 		console.log(hobby);
	 		console.log(typeof hobby);//object
	 		console.log(user);
	 		console.log(typeof user);//object
	 		console.log(testFunction);
	 		console.log(typeof testFunction);//function
	 	}
</script>

typeof연산자

: 값의 자료형을 확인하는 연산자

 

2) 데이터 형변환

2-1) 문자열과 숫자의 +연산

<button onclick="testPlus();">문자열과 숫자의 +연산</button>
	<script>
		function testPlus(){
			var test1 = 7 + 7;
			var test2 = 7 + '7';
			var test3 = '7' + 7;
			var test4 = 7 + '7';
			var test5 = 7 + 7 + '7';
			var test6 = 7 + '7' + 7;
			var test7 = '7' + 7 + 7;//앞에 있는 문자열때문에 뒤에 있는것도 문자로 인지함. 숫자로하고싶으면 뒤에 7+7을 (7+7)
			
			console.log(test1);
			console.log(test2);
			console.log(test3);
			console.log(test4);
			console.log(test5);
			console.log(test6);
			console.log(test7);
			
			//강제 형변환 : Number(), parseInt(), parseFloat()...
			console.log(test2 + 1);
			console.log(Number(test2) + 1);//문자를 숫자로 형변환
			console.log(parseInt(test2) + 2);//문자를 숫자로 형변환
			console.log(parseFloat(test2) + 3);
		}
	</script>

문자가 들어가면 문자 뒤에 숫자도 문자로 인지한다. 문자열 뒤에 숫자를 계산식으로 바꾸려면 

(숫자+숫자) 소괄호로 묶어줘야 한다.

 

 Number(), parseInt(), parseFloat()

: 강제 형변환

 

3) 연산자

 

3-1)=== , !==

: 값과 자료형 둘 다 일치하는지 / 일치하지 않는지 확인할 때 사용

 

<예시>

일반 ==을 사용했을 때

function opTest(){
		var check1 = 1;
		var check2 = '1';
		console.log('check1 == 1 : ' + (check1 == 1));
		console.log('check1 == "1" : ' + (check1 == '1'));
		console.log('check2 == 1 : ' + (check2 == 1));
		console.log('check2 == "1" : ' + (check2 == '1'));
}

==는 타입이 다른 경우 강제 형변환을 통해 비교한다.

기준이 애매해서 사용할때는 이러한 방법이 아닌 정확한 계산방법으로 하는 것이 나을 것 같다.

 

<예시>

===을 사용했을 때

function opTest(){
		var check1 = 1;
		var check2 = '1';
		console.log('check1 === 1 : ' + (check1 === 1));
		console.log('check1 === "1" : ' + (check1 === '1'));
		console.log('check2 === 1 : ' + (check2 === 1));
		console.log('check2 === "1" : ' + (check2 === '1'));
}

true, false을 엄격하게 구별할 수 있다.

 

4) 조건문

4-1) if문

<button onclick="ifTest();">if버튼</button>
	<script>
		function ifTest(){
			var result = prompt('당신의 성별은 무엇입니까?', '남자/여자');
			
			if(result == '남자'){
				alert("XY입니다");
			} else if(result == '여자'){
				alert("XX입니다");
			} else{
				alert("잘못 입력했습니다");
			}
		}
	</script>

알림창에 "당신의 성별은 무엇입니다?" 라는 질문이 뜨고 작성부분에는 "남자/여자"가 설정되어있게 만든 후

남자라고 입력하면 "XY입니다"라고 뜨고, 여자라고 입력하면 "XX입니다" 라고 뜨고,

그 외의 값을 입력하면 "잘못 입력했습니다" 라고 뜬다.

 

4-2) switch문

<예시>

<button onclick="switchTest();">switch버튼</button>
	<script>
		function switchTest(){
			var month = Number(prompt('현재는 몇 월입니까?', 'M월은 N일까지입니다'));
			console.log(typeof month);
			
			var day;
			switch(month){
			case 1: case 3: case 5: case 7: case 8: case 10: case 12: 
				day=31; break;
			case 4: case 6: case 9: case 11:
				day=30; break;
			case 2:
				day = 28;
			}
			alert(month + '월은' + day + '일까지입니다.');
		}
	</script>

월을 입력받아서 그 월에 몇일인지 뜨게한다.

 

<반복문>

1) for문

<예시>

<button onclick="forTest();">for버튼</button>
	<script>
		function forTest(){
			var result = '';
			for(var i = 0; i <= 10; i ++){
				result += i + ' ';
			}
			alert(result);
		}
	</script>

0부터 10까지 알림창에 띄우기

 

2) while문

<예시>

<button onclick="whileTest();">while버튼</button>
	<script>
		function whileTest(){
			var result = '';
			var i = 1;
			while(i <= 10){
				result += i + '';
				i++;
			}
			alert(result);
		}
	</script>

1부터 10까지 알림창에 출력하기

 

3) for in문

: for in문에서 배열을 가지고 사용할 때 앞에 있는 변수에 담기는 값은 배열의 인덱스가 담긴다.

<button onclick="forInTest();">for in버튼</button>
	<script>
		function forInTest(){
			var result = '';
			var array= ['A', 'B', 'C', 'D', 'E'];
			
			for(var i in array){
				console.log(i);
				result += array[i] + ' ';
			}
			alert(result);
			/*
				for(Employe e : list){
					System.out.println(e);
				}
			*/
		}
	</script>

A B C D 알림창에 출력하기