[JS_03][WEB] JavaScript 문법

Program 언어

 

Program은 '순서'에 따라서 실행되도록 정의합니다.

 

조건에 따라서 반복하면서 실행되도록 할 수 있습니다.

 

● 조건문

Comparison operators

<script>
	document.write(1 === 1);
</script>

<script>
	document.write(1 < 1);
</script>

IF-else

<script>
	if(boolean 조건){
    	수행 문장
    } else {
    	수행 문장
    }
</script>

● 리팩토링

 

코드의 중복을 제거합니다.

 

유지 보수를 편리하게 만듭니다.

 

this 키워드 : 태그 자신을 가리킵니다.

 

자주 사용하는 명령어는 변수에 할당하여 코드를 줄여줍니다.

var target = document.querySelector('body');

 

● 배열

많은 데이터를 잘 담아두는 수납장 같은 역할

 

<script>
	var items = ['banana', 'apple'];
</script>

/* get */
<script>
	document.write(items[0]);
</script>

/* add */
<script>
	items.push('melon');
</script>

/* count */
<script>
	document.write(items.length);
</script>

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array

Array - JavaScript | MDN

 

● 반복문

 

<script>
	var i = 0
	while(i < 3){
    	수행 문장
        i = i + 1;
    } 
</script>

 

● 함수

 

입력과 출력으로 이루어져 있습니다.

 

<script>
	function 함수명(self){
    	변수, 조건문, 반복문
    }
</script>

 

return 으로 출력

<script>
	/* 매개변수(parameter) - left, right */
	function sum(left, right){
    	return left+right;
    }
</script>

 

● 객체

 

함수와 관련 변수가 많아지면 복잡도가 증가합니다.

 

그것을 그룹핑하여 관리하기 위한 개념이 객체입니다.

 

함수로 부터 다시 독립하여 관리하는 방법입니다.

 

<script>
    /* 객체 생성 */
    var coworkers = {
        "programmer" : "lachel",
        "designer" : "david"    
    }

    /* 객체 추가 */
    coworkers.bookkeeper = "tom"
    coworkers["data scientist"] = "john"

    /* 객체 읽기 */
    for(var key in coworkers){
        document.write(coworkers[key]);
    }
    
     /* 객체 함수 추가 */
    coworkers.showALL = function(){
    	for(var key in this){
        document.write(this[key]);
   		}
    }
    coworkers.showALL()
</script>

객체에 소속된 함수는 메소드라 합니다.

 

객체에 소속된 변수는 property(속성)라 합니다. 객체의 속성 간의 구분은 콤파(,)를 사용합니다.