21일차 - 자바 스크립트

1. 연산식

1-1) += /= *= %=

<script>

let count = 0;
    count += 100;
    count /= 2;     //  count = count/2;
    count *= 2;
    count %= 25;
    
	console.log(count);

</script>

1-2) 문자 ${변수} 문자;

<script>

let count = 0;
    count += 100;
    count /= 2;
    count *= 2;
    count %= 25;
    count += '원';  // php 결합연산자는 .=

	console.log('데이터타입' + typeof count, '값은', count);
    	 		 // , 은 + 을 의미한다 (한 칸이 미리 떨어짐)

</script>

---

2. 배열

사용법
서버/php에서 데이터베이스를 받아 -> js 배열에 저장 -> CSS나 HTML에 전송/출력

<script>

	let arr = ['CSS', 'HTML', 'JS', 'React', 'PHP']; // 원본 배열
    
    console.log( arr, arr[1] );
    		// ['CSS', 'HTML', 'JS', 'React', 'PHP'] HTML
            
</script>

---

3. for문 (모든 다중 객체용 구문)

• 배열 + for -> DB 다루는 핵심!
• 연산식 있어(i++) 내가 제어할 수 있다!

<script>

    let arr = ['CSS', 'HTML', 'JS', 'React', 'PHP'];

    for( let i=0; i<3; i++ ){
        console.log( '나는 지금 ' + arr[ 2 ] + '를 공부하는 중이야' );
    }

</script>

초기값 0 ; i가 3보다 작은 조건 ; 그 동안 증가하겠다 ( 조건=false되면 끝! )
너는 0살 ; 네가 20세 될때까지 ; 용돈을 주겠다 ( 20살 넘으면 안 줌! )

3-1. 배열의 개수만큼 i-1번 반복하겠다, i < arr.length;

<script>

    let arr = ['CSS', 'HTML', 'JS', 'React', 'PHP'];

    for( let i=0; i<arr.length; i++ ){
        console.log( '나는 지금 ' + arr[ 2 ] + '를 공부하는 중이야' );
    }

</script>

3-1-1) 배열이 반복되는 과정

<script>

    let arr = ['CSS', 'HTML', 'JS', 'React', 'PHP', '플로터'];

    for( let i=0; i<arr.length; i++ ){
        console.log( '나는 지금 ' + arr[ i ] + '를 공부하는 중이야' );
    }

</script>

3-1-2) 배열 중 1 / 3 / 5번째 요소만 꺼내는 법

<script>

    let arr = ['CSS', 'HTML', 'JS', 'React', 'PHP'];

    for( let i=0; i<arr.length; i+=2 ){
        console.log( '나는 지금 ' + arr[ i ] + '를 공부하는 중이야' );
    }

</script>

---

4. for-in 구문 (배열 전용 for문)

• 배열에서 하나씩 하나씩 빼다가 study 변수에 넣겠다
• 연산식 없어서 제어 불가 (arr 끝날 때까지 직진)

<script>
	     // [arr]에서 하나씩 하니씩 빼다가 study 변수에 넣겠다 (arr 끝날 때까지 직진)
    for( let study in arr ){
        console.log( '나는 지금 ' + arr[ study ] + '를 공부하는 중이야' );
    }

</script>

---

5. 구구단 2단 만들기

5-1) 2 x i(2~9) = 2*i

<script>

    for( let i=2; i<10; i++ ){
        console.log( '2 X ' + i + ' = ' + 2*i );
    }

</script>

5-2) 2 x i( 짝수만 ) = 2*i

<script>

    for( let i=2; i<10; i+=2 ){
        console.log( '2 X ' + i + ' = ' + 2*i );
    }

</script>

5-3) ★ if-else + for문 ★

- 정답 -

<script>

    for( let i=2; i<10; i++ ){
        if( i%2 ){
            console.log( '홀 2 X ' + i + ' = ' + 2*i );
        }else{
            console.log( '짝 2 X ' + i + ' = ' + 2*i );
        }
    }

</script>

---

6. Dom 조작하기 (js의 기본능력)

HTML

<div class="navi"></div>

6-1. HTML navi 영역에 '안녕' 삽입 ( js )

javascript

• getElementsByClassName('navi')[ 0 ] : 집합체라는 뜻
• .innerHTML

<script>
								 //집합체라는 뜻 //HTML 영역에 '안녕';
    document.getElementsByClassName('navi')[0].innerHTML = '안녕';
    				   // 클래스네임 navi로 잡기 -> 배열로 줄세우고 [0][1][2][3]..
</script>

6-2. HTML navi 영역에 '네이버' 삽입 ( js )

<script>

let naviText = ['네이버', '다음', '구글'];
document.getElementsByClassName('navi')[0].innerHTML = naviText[0];

</script>

6-3. HTML navi 영역에 naviText 배열 삽입 (for-in문)

<script>

    let naviText = ['네이버', '다음', '구글'];
    	naviText.push('11번가'); // 데이터 추가
        naviText[1] = '네이트'); // 데이터 교체
        
    let naviData = '';

    for( let i in naviText ){
        naviData += naviText[ i ];
    }

    document.getElementsByClassName('navi')[0].innerHTML = naviData;

</script>

① 배열 생성 [ '네이버', '다음', '구글' ]
③ naviData 변수 생성
③ for문으로 집합체 생성
④ innerHTML = naviData 한방에 naviData 화면 출력

---

7. 상단 네비게이션 만들기

7-1. naviText를 < li >로 감싸서 화면 출력

• < li > naviText < /li >
  배열 요소 하나하나를 li로 감쌈
• < ul > naviData < /ul >
  naviData 출력 직전에 ul로 감쌈

7-2. 네이버 다음 구글 클릭 → 사이트로 이동되도록

힌트) 새로운 링크값 array 만들어 → 링크값을 넣어서 돌린다. (온리 js)

7-3. 배열 안에 배열을 집어넣어 DB를 다루는 방법