JavaScript 기본편(3) - 기본문법

자바스크립트 복습하기 3편

 

자바스크립트는 자바랑 연관이 없는데 

 

문법구조는 상당히 비슷하다

 

1. 조건문

               (1) if 

                         - 기본적인 골격은 java와 같다 ( if - else if - else 구조)

                         - 논리식을 쓰는 부분에서 '같다' 라는 의미의 표시가 '==' 와 '===' 2개있다.

                                                 '==' : 데이터 값만을 비교해서 같다라는 의미 

                                                 '===' : 데이터 값 뿐만아니라 데이터 형식까지 비교해서 같다라는 의미

                         - 예시 :

        let col = prompt("색깔을 적어주세요(빨강, 초록, 파랑)")

        if( col == '빨강'){
            document.querySelector('body').style.backgroundColor = 'red';
        }else if (col == '초록') {
            document.querySelector('body').style.backgroundColor = 'green';           
        }else if(col == '파랑'){
            document.querySelector('body').style.backgroundColor = 'blue';
        }else {
            document.querySelector('body').style.backgroundColor = 'black';
        }

 

               (2) switch

                         - 기본적인 골격은 java와 같다

                         - 예시 :

function switchOfStuff(val) {
  var answer = "";
  switch (val){
    case "a":
      answer = "apple";
      break;
    case "b":
      answer ="bird";
      break;
    case "c":
      answer ="cat";
      break;
    default:
      answer ="stuff"; 
      break;
  }
  return answer;
}

switchOfStuff(1)       //"stuff"  
switchOfStuff("c")     //"cat"

(** default  :  만약 매칭이 되는 케이스문이 없을때 실행되야 할 코드를 지정 (if문의 else와 비슷))

 

 

2. 반복문

           (1) while

                         - 기본적인 골격은 java와 같다

                         - 예시 :

        //1. 랜덤 수 지정      
        let num1 = prompt('1~10사이의 정수를 입력해주세요');
        
        //2. 입력받기
        rand = Math.floor(Math.random()*10)+1;
        
        //3. 조건문 통해서 입력받은 숫자와 random숫자가 같은지 비교
        while(true){
            if(rand > Number(num1)){
                alert("입력한 숫자보다 큰 수 입니다.");
            }else if(rand< Number(num1)){
                alert("입력한 숫자보다 적은 수 입니다.");
            }else{
                alert('정답입니다! 축하합니다!');
                break;
            }
            num1 = prompt('숫자를 입력해주세요');
        }

     

           (2) for

                         - 기본적인 골격은 java와 같다

                         - 예시 :

        let num1 = prompt('시작할 숫자를 입력해주세요');
        let num2 = prompt('마지막 숫자를 입력해주세요');
        let totaladd = 0;
        for(let i= Number(num1); i<=Number(num2);i++ ){
            totaladd += i;
        }
        console.log(num1+'부터 '+num2+'까지의 합 >> '+totaladd) ;

(** Number : java의 Integer같이 데이터 타입으로 숫자데이터로 형변환하는데 쓰임)

 

 

3. 배열

           (1) 선언

                         - 2가지 방법이 있다

        // 1. 배열 선언
        let nameList = [];                  // 1번 방법
        let nameList2 = new Array();        // 2번 방법

           (2) 생성

                         - 2가지 방법이 있다

        // 2. 배열 생성
        nameList = ['a', 'b','c','d'];
        nameList2 = new Array('a', 'b','c','d');

 

           (3) 값 추가 

                         - Java와 달리 서로 다른 데이터타입을 저장할 수 있다.

        // 3. 배열에 값 추가(인덱스) -> 서로 다른 데이터 저장
        let arr = [];
        arr[0] = 'segno';
        arr[1] = true;
        arr[2] = 27;

 

           (4) 배열의 크기

                         - Java와 같이 length를 이용한다

        console.log(nameList.length);
        console.log(nameList2.length);
        console.log(arr.length);

 

           (5) 배열의 메소드

                         5-1. push() 

                                             - 배열의 마지막 인덱스에 값 추가

                                             - 배열.push(넣을값)

let arr = [1,2,3,4];

arr.push(5)
console.log("push : "+arr);

                         5-2. pop()

                                             - 배열의 마지막 인덱스의 값 삭제

                                             - 배열.pop()

    arr.pop();
    console.log("pop : "+arr);

                         5-3. unshift()

                                             - 배열의 첫번째 인덱스에 값 추가

                                             - 배열.unshift(넣을값)

    arr.unshift(0);
    console.log("unshift : "+arr);

                         5-4. shift()

                                             - 배열의 첫번째 인덱스의 값 삭제

                                             - 배열.shift()

    arr.shift();
    console.log("shift : "+arr);

                         5-5. reverse()

                                             - 배열의 요소를 반대로 정렬

                                             - 배열.reverse()

    arr.reverse();
    console.log("reverse : "+arr);

                         5-5. concat()

                                             - 두개의 배열 합치기

                                             - 배열1.concat(배열2)

let arr1 = [1,2,3];
let arr2 = [4,5,6];
    
let arr3 = arr1.concat(arr2);
console.log("concat : "+arr3);

                         5-7. join()

                                             - 배열의 요소를 구분자로 이어서 String 형태로 리턴

                                             - 배열.join(구분자)

   let result = arr3.join('/');
    console.log("join : "+result);

                         5-8. typeof

                                             - 타입확인

                                             - typeof 배열

    console.log("result의 타입 : "+typeof result);
    console.log("arr3의 타입 : "+typeof arr3);

                         5-9. slice()

                                             - 범위에 해당하는 데이터 잘라내기

                                             - 끝 인덱스는 포함 X

                                             - 잘라낸 데이터를 배열로 반환

                                             - Java의 substring메소드 역할

                                             - 배열.slice(시작인덱스,끝인덱스)

    let arr4 = arr3.slice(0, 3);
    console.log("slice : "+arr4);

                         5-10. splice()

                                             - 요소를 삭제하고 새로운 내용 추가

                                             - 삭제된 요소를 return

                                             - 배열.splice(시작인덱스, 삭제개수 , 추가할 값1,추가할값2,...,추가할값n)

    let arr5 = arr3.splice(3, 3);
    console.log("splice삭제만 : "+arr3);
    console.log("splice삭제된요소 : "+arr5);

    arr3 = [1,2,3,4,5,6];
    arr3.splice(3, 3, 7,8,9);
    console.log("splice삭제후추가: "+arr3);

                         5-11. includes()

                                             - 배열에 요소가 있는지 확인

                                             - True or False를 return

                                             - 배열.includes(확인할 데이터)

    console.log("arr3에 10 있는가? "+arr3.includes(10));
    console.log("arr3에 1 있는가? "+arr3.includes(1));

                         5-12. indexOf()  

                                             - 배열에서 요소의 위치

                                             - 인덱스 번호를 return ( 만약 없을경우 -1 return)

    console.log("arr3에 7의 위치 : "+arr3.indexOf(7));
    console.log("arr3에 10의 위치 : "+arr3.indexOf(10));