1. 배열의 요소 개수 구하기

const everything = ['사과', 1 , undefined, true, '배열', null];
everything.length; // 6

빈 값도 유효한 값이므로 요소 개수를 셀 때 포함된다.

const arr = ['a', 'b', 'c', 'd', 'e'];
arr[arr.length -1]; // 'e'

const arr = ['a', 'b', 'c', 'd', 'e'];
arr.at(4); // 'e'
arr.at(-1); // 'e'

at의 소괄호 안에 넣은 숫자가 0 또는 양의 정수이면 배열의 앞에서부터 해당 인덱스 요소를 찾고, 숫자가 음의 정수면 배열의 마지막에서부터 요소를 찾는다.

2. 배열에 요소 추가하기

const target = ['a', 'b', 'c', 'd', 'e'];
target[5] = 'f';
target; // (6) ['a', 'b', 'c', 'd', 'e', 'f'];

맨 앞 요소를 추가하는 방법

const target = ['나', '다', '라', '마', '바'];
target[0] = '가';
target; // (5) ['가', '다', '라', '마', '바'];

맨 앞에 새로운 요소가 추가되지 않고 첫 번째 요소가 변경돼 버렸음.

배열의 맨 앞에 새로운 요소를 추가하려면 unshift()라는 기능을 사용해야 됨

const target = ['나', '다', '라', '마', '바'];
target.unshift('가');
target; // (6) ['가', '나', '다', '라', '마', '바'];

맨 뒤 요소를 추가하는 방법

const target = ['가', '나', '다', '라', '마'];
target.push('바');
target; // (6) ['가', '나', '다', '라', '마', '바'];

const target = ['가', '나', '다', '라', '마'];
target[target.length] = '바';
target; // (6) ['가', '나', '다', '라', '마', '바'];

3. 배열의 요소 수정하기

const target = ['가', '나', '다', '라', '마'];
target[3] = '카';
target; // (5) ['가', '나', '다', '카', '마'];

4. 배열에서 요소 삭제하기

맨 마지막 배열의 요소 삭제하기

const target = ['가', '나', '다', '라', '마'];
target.pop();
target; // (4) ['가', '나', '다', '라'];

맨 앞 배열의 요소 삭제하기

const target = ['가', '나', '다', '라', '마'];
target.shift();
target; // (4) ['나', '다', '라', '마' ];

맨 뒤 요소

push - 추가 / pop - 삭제

맨 앞 요소

unshift - 추가 / shift - 삭제

중간 요소 삭제하기

const target = ['가', '나', '다', '라', '마'];
target.splice(1, 1);
target; // (4) ['가', '다', '라', '마'];

첫 번째는 시작 인덱스, 두 번째는 삭제할 요소의 개수

const target = ['가', '나', '다', '라', '마'];
target.splice(1);
target; // (1) ['가'];

const target = ['가', '나', '다', '라', '마'];
target.splice(1, 3, '타', '파');
target; // (4) ['가', '타', '파', '마'];

splice(1, 3, '타', '파');는 인덱스 1부터 3개 요소('나', '다', '라')를 먼저 삭제하고, 요소를 삭제한 자리에 '타'와 '파'를 채워 넣으라는 뜻

5. 배열에서 요소 찾기

const target = ['가', '나', '다', '라', '마'];
const result = target.includes('다');
result; // true
const result2 = target.includes('카');
result; // false

includes()에 주어진 값이 배열에 존재하면 true, 존재하지 않으면 false

검색하려는 값이 어느 인덱스에 위치하는지 알 수 있는 방법

const target = [ '라' , '나', '다', '라', '다'];
const result = target.indexOf('다');
result; // 2
const result2 = target.lastIndexOf('라');
result2; // 3
const result3 = target.indexOf('가');
result3; // -1

indexOf()는 주어진 값이 있는지 앞에서부터 찾고, lastIndexOf()는 뒤에서부터 찾음

배열 안에 존재하지 않는 값을 찾을 경우 결과는 -1이 출력.

6. 배열 자르고 합치기

배열.slice(<시작 인덱스>, <종료 인덱스>)

시작 인덱스부터 종료 인덱스까지 배열을 잘라 새 배열을 만듦. 이때 시작 인덱스는 새 배열에 포함되나 종료 인덱스는 포함되지 않음. 인덱스가 음수이면 at()과 마찬가지로 뒤에서부터 센다.

['2', '3', '4', '5'].slice(1); // (3) ['3', '4', '5']
['2', '3', '4', '5'].slice(1, 3); // (2) ['3', '4']
['2', '3', '4', '5'].slice(2, 3); // (1) ['4']
['2', '3', '4', '5'].slice(1, -1); // (2) ['3', '4']
['2', '3', '4', '5'].slice(); // (4) ['2', '3', '4', '5']

두 배열을 합쳐 하나의 새로운 배열로 만들 수 있다.

배열.concat(값1, 값2, ...)

합칠 값이 꼭 배열일 필요는 없다. 다른 값을 넣어도 합칠 수 있다. 또한 여러 값을 넣으면 모두  하나로 합쳐진다. 아무 값도 넣지 않으면 기존 배열과 같은 모양의 새로운 배열이 나온다.

[1, 2].concat([3, 4]); // (4) [1, 2, 3, 4]
[1, 2].concat(3, 4); // (4) [1, 2, 3, 4]
[1, 2].concat([3, 4], [5, 6]); // (6) [1, 2, 3, 4, 5, 6]
[1, 2].concat([3, 4], 5, 6); // (6) [1, 2, 3, 4, 5, 6]
[1, 2].concat(); // (2) [1, 2]

7. 배열과 비슷한 문자열의 특징

배열을 문자열로 만들 때는 join()을 사용함

['1', '2', '3'].join(); // '1, 2, 3'
['1', '2', '3'].join('x'); // '1x2x3'
['1', '2', '3'].join(''); // '123'

문자열을 배열로 만들 때는 split()을 사용함

'2345'.split(); // ['2345']
'2345'.split('x'); // ['2345']
'2345'.split(''); // (4) ['2', '3', '4', '5']
'2, 3, 4, 5'.split(''); // (7) ['2', ',', '3', ',', '4', ',', '5']
'2, 3, 4, 5'.split(','); // (4) ['2', '3', '4', '5']

8. 배열 반복하기

const target = ['가', '나', '다', '라', '마'];
let i = 0;
while (i < target.length) {
	console.log([i]);
    i++;
}

가
나
다
라
마
< 4

const target = ['가', '나', '다', '라', '마'];
for (let i = 0; i < target.length; i++) {
	console.log([i]);
}

- indexOf()와 splice()를 사용해 다음 배열에서 '라'를 삭제해 보세요.

const target = ['가', '라', '다', '라', '마', '라'];
// target.indexOf('라'); > 1
// target.splice(1, 1)

// target.indexOf('라'); > 2
// target.splice(2, 1);

// target.indexOf('라'); > 3
// target.splice(3, 1);
// target; > (3) ['가', '다', '마']
// target.indexOf('라'); > -1

while(target.indexOf('라') > -1) {
	target.splice(target.indexOf('라'), 1);
}

const target = ['가', '라', '다', '라', '마', '라'];

let index = target.indexOf('라');
while(index > -1) {
	target.splice(index, 1);
    index = arr.indexOf('라');
}

9. 이차원 배열

배열의 요소로 배열이 들어 있으면 이를 이차원 배열이라고 한다.

const towDimension = [[1], [2], [3]];

3행 1쳘의 표를 나타낸다. 행은 가로 줄 수를 의미하고, 열은 세로 줄 수를 의미한다.

보다 보기 좋게 하려면

const towDimension = [
	[1], 
    [2], 
    [3]
];

- 'a', null, 1, undefined, NaN, true, '', 0을 4행 2열의 이차원 배열로 구성해 보세요.

const arr = [
	['a', null],
    [1, undefined],
    [NaN, true],
    ['', 0],
];

- for문으로 5(행) x 4(열) 이차원 배열을 만들어 보세요. 배열의 요소는 모두 1로 넣습니다.

const array = [];
for(let i = 0; i < 5; i++) {
	const innerArray = [];
    for (let j = 0; j < 4; j++) {
    	innerArray.push(1);
    }
    array.push(innerArray);
}
console.log(array);

10. flat()과 fill()

flat()은 배열의 차원을 한 단계 낮추는 기능을 함. 즉 n차원 배열을 n-1차원 배열로 낮춤. 이때 일차원 배열은 flat()을 적용해도 그대로 일차원 배열로 남아 있음.

const array = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
array.flat(); // (9) [1, 2, 3, 4, 5, 6, 7, 8, 9]
const array2 = [1, 2, 3, [[4, 5, 6], [7, 8, 9]]];
array2.flat(); (5) [1, 2, 3, (3) [4, 5, 6], (3) [7, 8, 9]]

배열은 배열 리터럴인 대괄호([]) 말고도 Array(길이)로도 생성할 수 있다.

다음 코드에서 Array(5)는 길이가 5인 배열을 만든다.

const empty = Array(5);
empty; // (5) [비어 있음 x 5]

하지만 Array()로 배열을 생성하면 값이 전부 비어 있다고 나오는데 이때 fill()을 사용하면 빈 배열의 값을 채울 수 있다. fill()은 빈 배열의 요소를 미리 특정 값으로 채워 넣는 기능을 한다.

empty.fill(); // (5) [undefined, undefined, undefined, undefined, undefined]

fill()의 소괄호 안에 특정 값을 넣지 않으면 모두 undefined로 채워 진다. fill()안에 특정 값을 넣으면 배열은 모두 해당 값으로 채워 진다.

empty.fill(1); // (5) [1, 1, 1, 1, 1]

fill()을 나중에 배우는 map()과 조합하면 [1, 2, 3, 4, 5]와 같이 요소가 순서대로 나열된 배열을 쉽게 만들 수 있다.

empty.fill().map((v, i) => i + 1); // (5) [1, 2, 3, 4, 5]

11. Set으로 중복 요소 제거하기

배열의 요소는 다음과 같이 중복될 수 있다. 중복 요소는 반복문으로 제거할 수 있지만, 자바스크립트에서 배열과 비슷한 Set이라는 객체를 제공한다. Set은 배열과 달리 중복을 허용하지 않는다.

[1, 2, 1, 3, 3, 5]

Set 뒤의 소괄호 안에 배열을 넣는다. 그리고 앞에 new가 나온다.(형태만 알아두기 미리 배우는 것) 실행하면 중복 요소가 사라지고 1, 2, 3, 5만 남아 손쉽게 중복을 제거할 수 있다.

new Set([1, 2, 1, 3, 3, 5]); // Set(4) {1, 2, 3, 5}

Set은 문자열 중복도 제거한다.

new Set('가가나나다다'); // Set(3) {'가', '나', '다'}

Set이 배열과 비슷해 보이지만, 사용 방법이 다르다. 예를 들어, Set의 요소 개수를 구할 때는 length 대신 size를 사용한다.

const a = new Set([1, 2, 1, 3, 3, 5]);
a.size; // 4

따라서 중복을 제거할 때만 Set을 사용하고, Set을 다시 배열로 바꿔 사용한다. Set을 배열로 바꿀 때는 Array.from()을 사용한다.

Array.from(new Set([1, 2, 1, 3, 3, 5])) // (4) [1, 2, 3, 5]

참고로 Array,from()을 사용해 문자열도 배열로 바꿀 수 있다.

Array.from('123'); // (3) ['1', '2', '3']

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이벤트</title>
    <style>
        .area {
            width: 400px;
            height: 100px;
            border: 1px solid;
        }
    </style>
</head>
<body>
    <h1>이벤트(event)</h1>
    <h2>1. 이벤트 모델 종류</h2>
    <h3>1.1 DOM 이벤트 모델</h3>
    <p>
        - DOM 0 이벤트 모델 : 인라인 이벤트 처리 방식<br>
        - DOM 1 이벤트 모델 : addEventListener와 removeEventListener메서드를 이용한 이벤트 처리<br>
        - DOM 2 이벤트 모델 : 이벤트 버블링 및 캡쳐링과 같은 개념 도입
    </p>

    <p>
        특정 특정 요소객체를 가지고 와서 해당 요소의 이벤트 속성에 접근한 후 이벤트 핸들러를 연결하는 방식<br>
        이벤트를 제거할 수도 있음
    </p>
    <h4>* DOM 0 이벤트 모델</h4>

    <p><b>요소 내부에 직접적으로 이벤트 속성을 기술 하지 않는 방식</b></p>
    <button id="btn1">이벤트 실행</button>
    <button id="btn2">이벤트 삭제</button>
    <div class="area" id="area1"></div>

    <script>
        const area1 = document.getElementById('area1');

        // const btn1 = document.getElementById('btn1');
        // btn1.onclick = function() {  }

        // document.getElementById('btn1').onclick = () => { }      화살표 함수 

        document.getElementById('btn1').onclick = function() {         // 이벤트 핸들러
            area1.innerHTML += 'btn1이 클릭되었습니다<br>';
        }

        document.getElementById('btn2').onclick = function() {
            area1.innerHTML += 'btn2이 클릭되면서 btn1이벤트 삭제<br>';
            document.getElementById('btn1').onclick = null;
        }
    </script>

    <br><br>

    <p><b>인라인 이벤트 모델</b></p>
    <p>
        요소 내부에 직접적으로 이벤트 속성을 제시하여 실행할 내용을 정의하는 방식<br>
        주로 script태그 내에 정의되어 있는 함수 호출하는 방식 선호
    </p>

    <button onclick="document.getElementById('area2').innerHTML += '첫번째 버튼 클릭<br>';">실행확인</button>
    <button onclick="test1()">실행확인</button>
    <div class="area" id="area2"></div>

    <script>
        function test1() {
            document.getElementById('area2').innerHTML += '두번째 버튼 클릭<br>';
        }
    </script>

    <br><br>

    <h3>1.2 이벤트 리스너 API(addEventListener)</h3>
    <p>
        w3c에서 공식적으로 지정한 이벤트 모델<br>
        IE(인터넷익스플로러) 9버전 이상부터 지원
    </p>

    <button id="btn3">실행확인</button>
    <script>
        const btn3 = document.getElementById('btn3');

        // 이벤트를 넣고자하는 요소객체.addEventListener('이벤트명', 이벤트 핸들러);
        // 익명함수는 화살표함수로 바꿔도 된다.
        btn3.addEventListener("click", function() {
            alert("이벤트 리스너 API 테스트");
        });

        // btn3.addEventListener("click", () => alert("이벤트 리스너 API 테스트"));

        // 요소 안에 마우스 포인터가 들어오거나 빠져 나갈때 쓰는 이벤트(mouseenter/mouseout)
        btn3.addEventListener('mouseenter', () => btn3.style.backgroundColor = 'red');
        btn3.addEventListener('mouseout', () => btn3.style.backgroundColor = '');
    </script>

    <hr>

    <h2>2. 현재 이벤트가 발생한 요소 객체에 접근하는 방법</h2>
    <button id="btn4">이벤트 속성에 핸들러 바인딩</button>
    <button id="btn5">이벤트 리스너 API</button>
    <button onclick="test2()">인라인 이벤트 방식</button>
    <button onclick="test3(this)">인라인 이벤트 방식2</button>

    <script>
        // function(e) : e => 이벤트 핸들러
        document.getElementById('btn4').onclick = function(e) {
            // console.log(e);
            console.log(window.event);      // e를 정의하지 않았다면 직접호출도 가능

            //현재 이벤트가 발생한 요소객체에 접근하고자 한다면
            console.log(e.target);
            console.log(window.event.target);
            console.log(this);

            // 현재 이벤트에 동적인 효과
            e.target.innerHTML = '버튼클릭됨';
            window.event.target.style.backgroundColor = 'red';
            this.style.color = 'white';
        }

        // 이벤트 리스너 API방식
        document.getElementById('btn5').addEventListener("click", e => {
            console.log(e.target);
            console.log(window.event.target);
            console.log(this);      // window객체를 가리킴

            e.target.innerHTML = 'API 클릭됨';
            window.event.target.style.backgroundColor = 'blue';
            e.target.style.color = 'white';
            // this.style.color = 'white';
        });

        // 인라인 방식
        /*
            인라인 방식은 초기화가 안되기 때문에 e 사용 불가(window.event만 사용 가능)
            또는 함수를 호출할 때 this를 이용하여 요소 객체를 전달해주면 됨
        */
       function test2(e) {
            // console.log(e.target);   // 사용 불가
            console.log(window.event.target);
            // console.log(this);      // window 객체를 가리킴

            window.event.target.style.backgroundColor = 'hotpink';
            window.event.target.style.color = 'white';
       }

       function test3(ev) {
            console.log(ev);
            ev.style.backgroundColor = 'magenta';
            ev.style.color = 'white';
       }
    </script>

    <hr>

    <h2>3. 태그별 기본적으로 가지고 있는 이벤트 제거</h2>

    <p>
        기본적으로 이벤트를 가지고 있는 요소<br>
        - a 태그 : 클릭시 href에 제시되어있는 url 요청을 하는기본 이벤트 보유<br>
        - submit 버튼 : form 태그 안의 내용을 서버로 전송하는 이벤트 보유<br><br>

        태그내에 기본적으로 설정되어 있는 이벤트가 실행 안되게 막고 싶을 때<br>
        => 이벤트 핸들러의 return값을 false로 하면 기본이벤트 실행 안됨
    </p>
    <a href="https://naver.com" onclick="alert('이벤트 작성');">네이버로 이동</a>&emsp;
    <a href="https://naver.com" onclick="alert('이벤트 작성'); return false;">네이버로 이동</a>     <!-- 네이버로 이동하지 않음 -->

    <br><br>

    <a href="https://google.com" onclick="return test4();">구글로 이동</a>
    <script>
        function test4() {
            alert('알림창');
            return false;
        }
    </script>

    <br><br>

    <form action="test.do">
        아이디 : <input name="userId" id="userId"><br>
        비밀번호 : <input type="password" name="userPwd" id="userPwd"><br>
        비밀번호 확인 : <input type="password" id="checkPwd"><br><br>
        <input type="submit" onclick="return validate();">
    </form>
    <script>
        function validate() {
            const userPwd = document.getElementById('userPwd').value;
            const checkPwd = document.getElementById('checkPwd').value;

            if(userPwd != checkPwd) {
                alert('비밀번호가 일치하지 않습니다');
                return false;
            }
        }
    </script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>객체 메소드</title>
    <style>
        .area {border: 1px solid;}
        .small {width: 200px;}
        .big {width: 400px;}
    </style>
</head>
<body>
    <h1>객체 메소드</h1>

    <h3>* 객체 메소드 속성</h3>
    <p>객체의 속성 중 함수 자료형인 속성을 메소드라고 부름</p>
    
    <button onclick="test1();">실행확인</button>
    <div class="area small" id="area1"></div>
    <script>
        function test1() {
            let area1 = document.getElementById('area1');
            let name = '이고잉';

            const dog = {
                name : '귀요미',
                kind : '요크셔테리어',
                eat : function(food) {
                    area1.innerHTML += 'eat 메소드가 호출됨<br>';
                    area1.innerHTML += food + '<br>';
                    area1.innerHTML += `${this.kind}종류인 ${this.name}가 ${food}를 먹고 있어요<br>`;
                }
            }
            dog.eat('사과');

            area1.innerHTML += '----------------------------<br>'

            name = 'hong';
            let age = 25;

            // ES4
            const p1 = {
                name : name,
                age : age,
                fun1 : function() {
                    const result = this.name.toUpperCase();
                    area1.innerHTML += result + `!!!<br>`;
                },
                setAge : function(vAge) {
                    this.age = vAge;
                    area1.innerHTML += `나이 : ${this.age}<br>`;
                }
            };

            // ES6(2015)
            const p2 = {
                name,
                age,
                fun1() {
                    const result = this.name.toUpperCase();
                    area1.innerHTML += result + `!!!<br>`;
                },
                setAge(vAge) {
                    this.age = vAge;
                    area1.innerHTML += `나이 : ${this.age}<br>`;
                }
            };
            p1.fun1();
            p1.setAge(30);
            p2.fun1();
            p2.setAge(30);
        }
    </script>

    <hr>

    <h3>* in과 with 키워드</h3>
    <p>
        in : 객체 내에 해당 속성이 있는지 확인해 주는 키워드(존재하면 true, 아니면 false)<br>
        with : 객체의 속성에 접근시 객체명을 제시하는 걸 생략할 수 있음(코드를 줄여주는 키워드)
    </p>

    이름 : <input id="name"><br>
    국어점수 : <input type="number" id="kor"><br>
    수학점수 : <input type="number" id="math"><br>
    영어점수 : <input type="number" id="eng"><br>
    <button onclick="test2();">실행확인</button><br>
    <div class="area big" id="area2"></div>

    <script>
        function test2() {
            let area2 = document.getElementById('area2');
            const student = {
                name : document.getElementById('name').value,
                kor : Number(document.getElementById('kor').value),
                math : document.getElementById('math').value,
                eng : document.getElementById('eng').value,
                toString : function() {
                    return `${this.name}, ${this.kor}, ${this.math}, ${this.eng}`;
                },
                getSum : function() {
                    return this.kor + Number(this.math) + parseInt(this.eng);
                },
                getAvg : function() {
                    // return Math.round(this.getSum() / 3);
                    return Math.round((this.getSum() / 3)*100)/100;                // 소수점 둘째자리까지 출력
                }
            };
            console.log(student);
            area2.innerHTML += student;                                            // 결과값이 object만 나온다.
            // 객체 student 호출 시 toString()메소드 호출
            // toString()을 재정의하여 재정의한 값 출력
            area2.innerHTML += `student : ${student}<br>`;
            area2.innerHTML += `name속성이 있는가? ${'name' in student}<br>`;       // true
            area2.innerHTML += `age속성이 있는가? ${'age' in student}<br>`;         // false

            area2.innerHTML += `학생이름 : ${student.name}<br>`;
            area2.innerHTML += `국어점수 : ${student.kor}<br>`;
            area2.innerHTML += `수학점수 : ${student.math}<br>`;
            area2.innerHTML += `영어점수 : ${student.eng}<br>`;

            area2.innerHTML += `총점 : ${student.getSum()}<br>`;
            area2.innerHTML += `평균 : ${student.getAvg()}<br>`;

            area2.innerHTML += '----------------------------<br>'

            with(student) {
                area2.innerHTML += `학생이름 : ${name}<br>`;
                area2.innerHTML += `국어점수 : ${kor}<br>`;
                area2.innerHTML += `수학점수 : ${math}<br>`;
                area2.innerHTML += `영어점수 : ${eng}<br>`;

                area2.innerHTML += `총점 : ${getSum()}<br>`;
                area2.innerHTML += `평균 : ${getAvg()}<br>`;
            }
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>객체</title>
    <style>
        .area {border: 1px solid;}
        .small {width: 200px;}
        .big {width: 400px;}
    </style>
</head>
<body>
    <h1>객체</h1>

    <h3>* 객체의 선언과 사용</h3>
    <p>
        객체는 중괄호 { }를 이용하여 생성하고,<br>
        중괄호 안에 이 객체에 필요한 속성들을 정의함<br>
        속성명:속성값의 형태로 정의(key:value)<br>
        속성값으로는 모든 자료형을 담을 수 있음
    </p>
    <pre>
        변수 = {
            속성명:속성값,
            속성명:속성값,
            속성명:속성값,
            ...
        }
    </pre>
    
    <button onclick="test1()">실행확인</button>
    <div class="area big" id="area1"></div>

    <script>
        function test1() {
            const area1 = document.getElementById('area1');

            const product = {
                pName : 'Mango',
                Price : 4000,
                'kind' : 'fruit',
                fruitKind : ['Lime', "Peach", 'berry']
            };
            console.log(product);
            console.log(typeof product);

            area1.innerHTML += `product : ${product}<br><br>`;          // 결과값이 object로만 나온다.

            // 객체의 속성에 접근하는 방법
            // 방법1. 대괄호를 이용하는 방법 : 객체명['속성명'] -> 속성명은 반드시 문자열로 넣어줘야 됨
            area1.innerHTML += "<b>객체명['속성명'] 으로 접근하기</b><br>";
            area1.innerHTML += `<b>pName</b> : ${product['pName']}<br>`;
            area1.innerHTML += `<b>Price</b> : ${product['Price']}<br>`;
            area1.innerHTML += `<b>kind</b> : ${product['kind']}<br>`;
            area1.innerHTML += `<b>fruitKind</b> : ${product['fruitKind']}<br>`;
            area1.innerHTML += `<b>fruitKind</b> : ${product['fruitKind'][1]}<br>`;         // 배열에서 peach만 갖고오고 싶을 때
            
            area1.innerHTML += "--------------------------------------------------<br>";
            
            // 방법2. 점(.)을 이용하는 방법 : 객체명.속성명
            area1.innerHTML += "<b>객체명.속성명 으로 접근하기</b><br>";
            area1.innerHTML += `<b>pName</b> : ${product.pName}<br>`;
            area1.innerHTML += `<b>Price</b> : ${product.Price}<br>`;
            area1.innerHTML += `<b>kind</b> : ${product.kind}<br>`;
            area1.innerHTML += `<b>fruitKind</b> : ${product.fruitKind}<br>`;
            area1.innerHTML += `<b>fruitKind</b> : ${product.fruitKind[1]}<br>`; 
        }
    </script>

    <h3>* 객체 생성시 특이케이스(속성명 제시시 반드시 문자열 형태로 해야되는 경우)</h3>
    <button onclick="test2();">실행확인</button>
    <div class="area small" id="area2"></div>

    <script>
        // 빈칸이나 특수기호가 들어가면 반드시 " " or ' '로 감싸야 된다
        function test2() {
            const area2 = document.getElementById('area2');
            const user = {
                "user name" : '홍길동',
                'age!!' : 20
            };
            console.log(user);
            // .이용은 불가
            // area2.innerHTML += `<b>user name</b> : ${product.uer name}<br>`;     // 정보를 가지고 올 수 없음(띄어쓰기 때문)

            // 반드시 대괄호 이용해야 됨
            area2.innerHTML += `<b>pName</b> : ${user['user name']}<br>`;
            area2.innerHTML += `<b>age!!</b> : ${user['age!!']}<br>`;
        }
    </script>
    <h3>* 객체에서의 반복문</h3>
    <p>
        객체가 가지고 있는 모든 속성들에 순차적으로 접근하고자 한다면 반복문 사용<br>
        단, 일반 for문으로는 불가능. 'for in' 사용
    </p>
    <button onclick="test3()">실행확인</button>
    <div class="area small" id="area3"></div>

    <script>
        function test3() {
            let area3 = document.getElementById('area3');

            const game = {
                title : '의료용 디지털 영상',
                Price : 9000000,
                tool : 'javascript',
                company : '더조은'
            };

            for(key in game) {
                console.log('key : ', key);
                // game.key를 찾으면 key에 들어있는 값을 찾는게 아니라 속성명이 key인 것을 찾는다. 따라서 undefined가 결과값으로 나온다.
                // console.log('game.key : ', game.key);
                // console.log(game['game.key : ', 'key']);       // 위와 같음
                console.log('game[key] : ', game[key]);                  // 변수의 값을 넣어야 됨. key는 변수.

                area3.innerHTML += `${key} : ${game[key]}<br>`;
            }
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>함수</title>
    <style>
        .area {
            border: 1px solid;
            padding: 5px;
        }
    </style>
</head>
<body>
    <h1>함수</h1>

    <h2>함수 선언하는 방법</h2>

    <ol>
        <li>선언적 함수(Function Declaration) : function키워드, 함수명</li>
        <li>익명 함수(Function Expression) : 변수에 익명함수를 대입하는 방식</li>
        <li>화살표 함수(Arrow Function) : 익명함수를 간단히 작성하는 방법(ES6(ES2015)에 추가)</li>
        <li>즉시 실행 함수 iife(Immediately Invoked Function Expression)
            <ul>
                <li>선언과 호출</li>
                <li>변수를 캡슐화처리해서 유용하게 쓸 수 있음</li>
            </ul>
        </li>
    </ol>
    
    <hr>

    <h3>1) 선언적 함수</h3>
    <pre>
        function 함수명([매개변수, 매개변수, ...]) {
            해당 함수 호출시 실행할 코드;
            [return 결과값;]
        }
    </pre>

    <button onclick="test1();">실행확인</button>
    <div class="area" id="area1"></div>

    <script>
        function test1() {
            document.getElementById('area1').innerHTML = 'test1() 함수 실행 됨<br>';
        }
    </script>

    <hr>

    <h3>2) 익명 함수</h3>
    <pre>
        변수|속성 = function([매개변수, 매개변수, ...]) {
            해당 함수 호출시 실행할 코드;
            [return 결과값;]
        }

        * 주로 이벤트 핸들러 작성시 사용
    </pre>

    <button id="btn">실행확인</button>
    <div class="area" id="area2"></div>

    <script>
        let btn = document.getElementById('btn');
        // 이벤트 속성(click)에 대입되는 function => 이벤트 핸들러
        btn.onclick = function() {
            document.getElementById('area2').innerHTML = '이벤트 핸들러를 통해 실행 됨';
        }
    </script>

    <hr>

    <h3>3) 화살표 함수</h3>
    <pre>
        - 본문에 리턴만 있을 때
            변수 = ([매개변수, 매개변수, ...]) => 리턴값

        - 본문이 여러줄 일 때
            변수 = ([매개변수, 매개변수, ...]) => {
                해당 함수 호출시 실행할 코드;
                [return 결과값;]
            }
    </pre>

    <button id="btn3">실행확인</button>
    <div class="area" id="area3"></div>

    <script>
       const area3 = document.getElementById('area3');
       const btn3 = document.getElementById('btn3');

    //    btn3.onclick = function() {
    //         return area3.innerHTML = '매개변수가 없는 화살표 함수 실행';
    //    }

        // 위에 익명함수를 화살표 함수로 변환
        btn3.onclick = () => area3.innerHTML = '매개변수가 없는 화살표 함수 실행';
    </script>

    <hr>

    <h3>4) 즉시실행 함수</h3>
    <pre>
        - 정의하면서 즉시 실행되는 함수
        - 단 한번만 호출됨
            ([변수] = function([매개변수, 매개변수, ...]) {
                해당 함수 호출시 실행할 코드;
            })(인자, 인자, ...);
    </pre>

    <script>
        // 문서가 로딩된 직후 마지막 1개만 실행 
        // window.onload = function() {        // 문서가 다 로딩이 되면 맨 마지막것 하나만 실행된다.
        //     console.log('onload');
        // }
        // window.onload = function() {
        //     console.log('onload2');
        // }

        // 즉시실행 함수는 함수의 갯수만큼 실행
        (function(){
            console.log('iife');
        })();

        (function(name){
            console.log(`HI, ${name}`);
            const k = 999;
            console.log(k);
        })('철수');

        (() => console.log('iife - arrow'))();
        (name => console.log(`HI, ${name}`))('영희');
    </script>

    <hr>

    <h2>함수의 매개변수</h2>

    <!-- 함수에서의 매개변수는 모든 자료형 가능 -->
    <button onclick="test2('안녕하세요');">문자매개변수</button>
    <button onclick="test2('2');">숫자매개변수</button>
    <button onclick="test2([1,2,3]);">배열매개변수</button>
    <button onclick="test2(true);">논리매개변수</button>
    
    <br>

    <!-- 매개변수의 갯수가 맞지 않아도 오류나지 않음(많으면 뒤에것 무시, 적으면 undefined) -->
    <button onclick="test2(prompt('이름 입력'));">prompt매개변수</button>
    <button onclick="test2('안녕하세요', '반갑습니다');">문자2개매개변수</button>       <!-- 맨 앞에꺼 하나만 나옴 -->
    <button onclick="test2();">매개변수없음</button>                                  <!-- 없어도 오류 안남 -->

    <div class="area" id="area4"></div>

    <script>
        function test2(value) { // 매개변수는 자료형을 지정하지 x, 선언구문 x => 변수명만 써줌
            document.getElementById('area4').innerHTML = value;
        }
    </script>

    <hr>

    <h3>* 매개변수 관련 arguments배열</h3>
    <p>
        함수 호출 시 전달되는 값은 내부적으로 arguments 배열에 담김<br>
        * arguments : 모든 함수마다 내부적으로 하나씩 존재하는 배열 형식의 객체
    </p>

    <button onclick="test3(11, 12, 1, 5, 7);">실행확인</button>
    <div class="area" id="area5"></div>

    <script>
        function test3() {
            console.log(arguments);
            console.log(arguments[1]);

            let area5 = document.getElementById('area5');

            let sum = 0;
            for(let ele of arguments) {
                sum += ele;
            }
            area5.innerHTML = `합계 : ${sum}<br>`;
            area5.innerHTML += `평균 : ${sum/arguments.length}<br>`;

            // for in으로 arguments에 값들을 하나씩 출력
            
            var args = Array.from(arguments);
        }
    </script>

    <hr>

    <h3>매개변수에 this관련 전달하기</h3>
    <p>this : 현재 이벤트가 발생한 요소 객체</p>

    <button onclick="test4(this);">this버튼</button>
    <input type="button" value="input버튼" onclick="test4(this.value);">        <!-- .value : 인풋 속성에 들어있는 값 -->
    <button onclick="test4(this.id);" id="btn4">id버튼</button>                 <!-- id에 해당하는 값 출력 됨 -->
    <button onclick="test4(this.innerHTML);"><b>this버튼</b></button>

    <script>
        function test4(ele) {
            console.log(ele);       // 나 자신의 버튼객체
        }
    </script>

    <button onclick="test5(this);">동적효과버튼</button>
    <script>
        function test5(ele) {
            ele.style.color = 'red';
            ele.innerHTML = `빨간색으로 변경`;
        }
    </script>

    <hr>

    <h2>함수의 리턴</h2>

    <h3>* 일반적인 값</h3>

    <button onclick="test6()">랜덤값</button>
    <div class="area" id="area6"></div>

    <script>
        // 1~100사이의 랜덤값을 구해서 반환하는 함수
        function ran() {
            let random = parseInt(Math.random() * 100 + 1);
            return random;
        }
        function test6() {
            document.getElementById('area6').innerHTML = `랜덤값 : ${ran()}`;
        }
    </script>

    <button onclick="console.log(ran());">랜덤값콘솔출력</button>

    <h3>* 익명함수를 리턴</h3>
    이름 : <input type="text" id="userName">
    <button onclick="test7()();">익명함수 리턴</button>
                    <!-- ()매개변수가 들어가는 괄호 ()function이 들어가는 괄호 -->

    <script>
        function test7() {
            let inputE1 = document.getElementById('userName');

            return function() {
                alert(inputE1.value)
            }
        }
    </script>

    <hr>

    <h2>화살표 함수의 매개변수와 리턴</h2>

    <h4>* 함수의 body 지정방법</h4>
    <pre>
        * single line block
            x => { return 리턴값; }
            x => 리턴값 (중괄호 생략)
        * multi line block
            x => {
                실행구문;
                return 값;
            }
    </pre>

    <button onclick="test8()">실행확인</button>
    <div class="area" id="area8"></div>

    <script>
        function test8() {
            let area = document.getElementById('area8');

            area.innerHTML += `일반함수(매개변수 없음) 실행 : ${fun1()}<br>`;
            area.innerHTML += `화살표함수(매개변수 없음) 실행 : ${aFun1()}<br><br>`;

            area.innerHTML += `일반함수(매개변수 1개) 실행 : ${fun2(3)}<br>`;
            area.innerHTML += `화살표함수(매개변수 1개) 실행 : ${aFun2(3)}<br><br>`;

            area.innerHTML += `일반함수(매개변수 2개 이상) 실행 : ${fun3(3, 5)}<br>`;
            area.innerHTML += `화살표함수(매개변수 2개 이상) 실행 : ${aFun3(3, 5)}<br><br>`;

            area.innerHTML += `일반함수(본문이 여러줄) 실행 : ${fun4(3)}<br>`;
            area.innerHTML += `화살표함수(본문이 여러줄) 실행 : ${aFun4(3)}<br><br>`;

        }
        // 매개변수 없을 때
        let fun1 = function() {
            return '매개변수가 없는 일반함수';
        }
        let aFun1 = () => '매개변수가 없는 일반함수';

        // 매개변수가 1개 일때
        let fun2 = function(num1) {
            return num1 * 2;
        }
        let aFun2 = num1 => num1 * 2;

        // 매개변수가 2개 이상일 때
        let fun3 = function(num1, num2) {
            return num1 + num2;
        }
        let aFun3 = (num1, num2) => num1 + num2;

        // 실행 본문이 여러줄 일 때
        let fun4 = function(num1) {
            let result = num1 * 5;
            return result;
        }
        let aFun4 = num1 => {           // 실행본문에 중괄호{}를 넣으면 반드시 return이라는 키워드를 써줘야 됨
            let result = num1 * 5;
            return result;              // 리턴만 있고 리턴값이 없으면 undefined로 결과값이 나옴
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>문자열과 숫자</title>
    <style>
        .area {
            width: 300px;
            border: 1px solid;
            padding: 10px;
        }
    </style>
</head>
<body>
    <h1>문자열과 숫자</h1>

    <h3>문자열 관련 메소드</h3>
    <button onclick="stringTest()">문자열 처리 메소드</button>
    <div class="area" id="area1"></div>

    <script>
        function stringTest() {
            const area1 = document.getElementById('area1');
                       // document.querySelector('#area1');

            const str1 = 'Hello World';

            // area1.innerHTML = `str1: ` + str1 + `<br>`;
            area1.innerHTML = `str1 : ${str1} <br>`;
            area1.innerHTML += `toUpperCase() : ${str1.toUpperCase()}<br>`;
            area1.innerHTML += `toLowerCase() : ${str1.toLowerCase()}<br>`;
            area1.innerHTML += `문자열의 길이 : ${str1.length}<br>`;
            area1.innerHTML += '-------------------------------------<br>';

            for(let i=0; i<str1.length; i++) {
                // area1.innerHTML += `${i}번 인덱스 : ${str1[i]}<br>`;
                area1.innerHTML += `${i}번 인덱스 : ${str1.charAt(i)}<br>`;
            }
            area1.innerHTML += '-------------------------------------<br>';

            area1.innerHTML += `앞에서부터 첫 'l'의 위치 : ${str1.indexOf('l')}<br>`;
            area1.innerHTML += `뒤에서부터 첫 'l'의 위치 : ${str1.lastIndexOf("l")}<br>`;
            area1.innerHTML += `앞에서부터 첫 'a'의 위치 : ${str1.indexOf('a')}<br>`;
            // 존재하지 않으면 -1 반환
            area1.innerHTML += '-------------------------------------<br>';

            const str2 = '사과, 바나나, 복숭아, 포도';
            const fruits = str2.split(',');     // ['사과', '바나나', '복숭아', '포도']

            area1.innerHTML += `fruits : ${fruits}<br>`;
            area1.innerHTML += `fruits의 자료형 ${typeof fruits}<br>`;

            console.log(fruits);
        }
    </script>

    <br>

    <h3>* 문자열 관련 html메소드</h3>
    <button onclick="stringHtmlTest();">문자열 Html 메소드</button>
    <div class="area" id="area2"></div>

    <script>
        function stringHtmlTest() {
            const area2 = document.getElementById("area2");
            const str = 'javascript';

            area2.innerHTML = `str : ${str}<br>`;
            area2.innerHTML += `bold() : ${str.bold()}<br>`;
            area2.innerHTML += `italics() : ${str.italics()}<br>`;
            area2.innerHTML += `굵고 기울임꼴 : ${str.bold().italics()}<br>`;
            area2.innerHTML += `small() : ${str.small()}<br>`;
            area2.innerHTML += `sub() : ${str.sub()}<br>`;
            area2.innerHTML += `sup() : ${str.sup()}<br>`;
            area2.innerHTML += `link() : ${str.link('https://google.com')}<br>`;
        }
    </script>

    <br>

    <h3>* 숫자(수학) 관련 메소드</h3>
    <button onclick="mathTest()";>수학관련 메소드</button>
    <div class="area" id="area3"></div>

    <script>
        function mathTest() {
            const area3 = document.querySelector('#area3');

            // 자바스크립트에서 Math내장 객체 제공
            area3.innerHTML = `-123의 절대값 : ${Math.abs(-123)}<br>`;
            area3.innerHTML += `랜덤값 : ${Math.random()}<br>`;
            area3.innerHTML += `145.897의 반올림 : ${Math.round(145.897)}<br>`;
            area3.innerHTML += `145.897의 반올림 : ${Math.round(145.897,1)}<br>`;       // 위치조정 불가. 무조건 정수로 반환
            area3.innerHTML += `145.897의 버림 : ${Math.floor(145.897)}<br>`;
            area3.innerHTML += `145.123의 올림 : ${Math.ceil(145.123)}<br>`;
        }
    </script>

    <br>

    <h3>* 문자열과 숫자간의 산술연산/형변환</h3>
    <button onclick="aritmetic();">산술연산</button>
    <div class="area" id="area4"></div>

    <script>
        function aritmetic() {
            // 덧셈은 문자열이 있으면 문자열로 인식(자바와 동일)
            let test1 = 7 + 7;        
            let test2 = 7 + '7';      
            let test3 = '7' + 7;
            let test4 = '7' + 7 + 7;     
            let test5 = '7' +(7 + 7);    

            const area4 = document.getElementById('area4');
            area4.innerHTML = `test1 : ${test1} <br>`;
            area4.innerHTML += `test2 : ${test2} <br>`;
            area4.innerHTML += `test3 : ${test3} <br>`;
            area4.innerHTML += `test4 : ${test4} <br>`;
            area4.innerHTML += `test5 : ${test5} <hr>`;

            // 덧셈 이외의 산술 연산
            // 문자열이 포함되어 있으면 자동 형변환되어 산술연산 됨
            // 조건 : 문자열에 숫자만 들어있어야 됨
            let test6 = '7' - 6;
            let test7 = '7' * 3;
            let test8 = '7' / 3;

            area4.innerHTML += `test6 : ${test6} <br>`;
            area4.innerHTML += `test7 : ${test7} <br>`;
            area4.innerHTML += `test8 : ${test8} <hr>`;

            // 강제형변환
            // 덧셈연산시는 자동형변환이 안됨. 강제 형변환 해줘야 함
            /*
                1) Number(문자열)
                2) parseInt(문자열)     정수로만 변환 됨
                3) parseFloat(문자열)
            */

            // 2, '3'
            let test9 = 2 + '3';
            let test10 = 2 + Number('3');
            let test11 = 2 + parseInt('3');
            let test12 = 2 + parseFloat('3');

            area4.innerHTML += `test9 : ${test9} <br>`;
            area4.innerHTML += `test10 : ${test10} <br>`;
            area4.innerHTML += `test11 : ${test11} <br>`;
            area4.innerHTML += `test12 : ${test12} <hr>`;

            // 3, '1.234'
            let test13 = 2 + '1.234';
            let test14 = 2 + Number('1.234');
            let test15 = 2 + parseInt('1.234');
            let test16 = 2 + parseFloat('1.234');

            area4.innerHTML += `test13 : ${test13} <br>`;
            area4.innerHTML += `test14 : ${test14} <br>`;
            area4.innerHTML += `test15 : ${test15} <br>`;
            area4.innerHTML += `test16 : ${test16} <hr>`;
        }
    </script>

    <br>

    정수 1 : <input type="number" id="num1"><br>
    정수 2 : <input type="number" id="num2"><br>

    <div id="result">결과 없음</div>
    <button onclick="plus();">덧셈</button>

    <script>
        function plus() {
            const num1 = document.getElementById('num1').value;
            const num2 = document.querySelector('#num2').value;

            console.log(typeof num1);
            
            let sum = num1 + num2;
            console.log(sum);

            sum = Number(num1) + Number(num2);

            document.getElementById('result').innerHTML = `결과 : ${sum}`;
        }
    </script>

    <hr>
</body>
</html>

<실습문제>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>문자열과 숫자</title>
    <style>
        .area {
            width: 300px;
            border: 1px solid;
            padding: 10px;
        }
    </style>
</head>
<body>

<h3>* 실습문제</h3>
    <p>
        사용자로부터 prompt로 입력받은 문자열 중 알파벳(소문자만)의 갯수 세기
    </p>

    <button onclick="example();">실습문제</button>
    <div id="ex"></div>

    <script>
        function example() {
            const text = prompt("글자를 입력하시오");
            let count = 0;

            if(text != null) {          // if(text)
                for(let i=0; i<text.length; i++) {
                    if(text[i] >= 'a' && text[i] < 'z') {
                        count++;
                    }
                }
                document.getElementById('ex').innerHTML = `입력한 문자열에서 소문자 알파벳은 ${count}개 입니다.`;
            }
        }
    </script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>변수와 자료형</title>
    <style>
        .area {
            border: 1px solid;
            width: 400px;
            padding: 10px;
        }
    </style>
</head>
<body>
    <h1>변수와 자료형</h1>
    <h2>변수 선언시 var뿐만아니라 let, const를 이용하여 선언 가능</h2>

    <h3>var, let, const의 차이점</h3>
    
    <h4>1) 변수의 선언 방법</h4>
    <button onclick="diffDeclare();">클릭</button>

    <script>
        function diffDeclare() {
            // 1. var은 중복선언 가능(단점), 재할당 가능
            var userId = "user01";
            console.log(userId);

            var userId = "user02";
            console.log(userId);

            userId = "user03";      // 재할당
            console.log(userId);

            console.log("------------------------------------");

            // 2. let은 중복선언 불가능(function안에서), 재할당 가능
            let userPw = "pass01";
            console.log(userPw);

            // let userPw = "pass02";
            // console.log(userPw);

            userPw = "pass03";
            console.log(userPw);

            console.log("------------------------------------");

            // 3. const는 중복선언 불가능, 재할당 불가능(자바에서 상수와 같은 개념 == 한번 초기화된 값 변경 불가능)
            //      그러나 객체안에 자료는 변경 가능
            const userName = "홍길동";
            console.log(userName);

            // const userName = "김말똥";   // 중복선언 불가능

            // userName = "김말똥";         // 재할당 불가능
            // console.log(userName);

            /*
                * var은 자유롭게 변수 선언, 사용할 수 있다는 장점이 있지만 
                    중복된 변수가 남발할 수 있고, 의도치 않게 값이 변경되어 있을 수 있음 => 가장 큰 단점
                    => 단점을 보완하여 나온것이 let, const이다.

                * 권장사항 : let, const를 위주로 사용
            */
        }
    </script>

    <h4>2) 스코프(사용가능 범위)</h4>
    <button onclick="diffScope();">클릭</button>

    <script>
        function diffScope() {
            // 1. var : 변수가 선언되는 "함수 영역" 내에서 사용가능
            var name = "홍길동";
            console.log(name);

            if(true) {
                var age = 20;
            }
            console.log(age);

            for(var i=0; i<10; i++) {

            }
            console.log(i);

            console.log("------------------------------------");

            // 2. let, const (block scope) == 변수가 선언된 블럭() 내에서만 사용 가능(자바와 유사)
            let address = "서울";

            if(true) {
                let gender = "M";
                const hobby = "운동";
            }
            // console.log(gender);     // 사용불가
            // console.log(hobby);      // 사용불가
            
            scopeTest();
        }

        function scopeTest() {
            console.log(name);
        }
    </script>

    <h3>* 변수 선언 위치에 따른 전역변수/지역변수</h3>

    <script>
        // 현재 문서가 다 로딩된 직후에 실행
        // window.onload = function() { 현재 문서가 다 로딩된 직후에 실행시킬 코드 }
        window.onload = function() {        
            console.log("문서 로딩 완료!");
        }

        // 특정 함수 영역 밖에 선언된 변수는 전역변수임(어디든지 사용 가능)
        var declareVar = "var 전역변수";
        let declareLet = "let 전역변수";
        const declareConst = "const 전역변수";

        declareNone = "그냥 전역변수";      // 변수명 앞에 아무런 키워드가 없으면 전역변수임

        window.onload = function() {
            // console.log(declareVar);
            // console.log(declareLet);
            // console.log(declareConst);
            // console.log(declareNone);

            // 전역변수와 동일한 이름으로 지역변수 선언
            // 전역변수와 지역변수의 이름이 동일하면 지역변수가 우선순위가 더 높다.
            var declareVar = "var 지역변수";
            let declareLet = "let 지역변수";
            const declareConst = "const 지역변수";

            console.log(declareVar);
            console.log(declareLet);
            console.log(declareConst);
            console.log(declareNone);

            console.log("------------------------------------");

            // 만약 전역변수에 접근하고 싶다면 window. 또는 this. 으로 접근 가능(var만 가능)
            console.log(window.declareVar);
            console.log(this.declareVar);

            // let, const는 전역변수를 불러올 수 없음 undefined가 뜸
            console.log(this.declareLet);
            console.log(window.declareConst);

            declareNone = "얘는 뭘까요?";
            console.log(declareNone);
            console.log(this.declareNone);

            test();
        }

        function test() {
            console.log("------------------------------------");
            console.log(declareNone);
            console.log(declareVar);
            console.log(declareLet);
            console.log(declareConst);
        }
    </script>

    <h3>* 자료형</h3>
    <p>
        Dynamic Type : 변수 선언시 자료형을 별도로 지정하지 않음(자료형의 개념이 없는건 아님)<br>
        => 변수별로 타입이 지정되지 않고, 대입되는 값에 의해 타입이 결정 됨
    </p>

    <h4>자바스크립트의 자료형</h4>
    <ul>
        <li>string(문자열)</li>
        <li>number(숫자)</li>
        <li>boolean(논리값)</li>
        <li>object(객체)</li>
        <li>function(함수)</li>
        <li>undefined(초기화가 안된 변수)</li>
    </ul>

    <button onclick="typeTest();">자료형 테스트</button>
    <div class="area" id="area1"></div>

    <script>
        function typeTest() {
            // 문자열 : 쌍따옴표(""), 외따옴표(''), 백틱(``)
            const name = '홍길동';
            const age = 23;
            const flag = true;
            const hobby = ['영화', '음악감상', '낮잠'];                 // 배열 객체
            const divE1 = document.querySelector('#area1');           // div요소 객체
            // Javascript에서의 객체 선언
            const user = {name: '김말똥', 
                            age: 25, 
                            id: 'user01'};

            const testfn = function() {
                alert('ㅎㅎㅎ');
            }

            // 상수는 초기화 하지 않으면 오류
            // const noVal;
            let noVal;

            // typeof 변수명 : 자료형 확인시 사용하는 함수
            console.log("------------------------------------");
            console.log(typeof name, name);
            console.log(typeof age, age);
            console.log(typeof flag, flag);
            console.log(typeof hobby, hobby);
            console.log(typeof divE1, divE1);
            console.log(typeof user, user);
            console.log(typeof testfn, testfn);
            console.log(typeof noVal, noVal);

            // 문자열 : 쌍따옴표(""), 외따옴표(''), 백틱(``)
            // 백틱(ES6) : 사용시 문자열과 변수 사용시 +기호 및 \n을 넣지 않고 사용 가능
            let str = 'hello' + name +'나이 : ' + age;
            let str1 = `hello ${name} 나이: ${age}`; 

            let str3 = '이름\n홍길동';
            let str4 = `이름
                        홍길동`;

            // divE1.innerHTML = typeof name + ', ' + name + '<br>';
            divE1.innerHTML = `${typeof name}, ${name}<br>`;
            divE1.innerHTML += `${typeof age}, ${age}<br>`;
            divE1.innerHTML += `${typeof flag}, ${flag}<br>`;
            divE1.innerHTML += `${typeof hobby}, ${hobby}<br>`;
            divE1.innerHTML += `${typeof divE1}, ${divE1}<br>`;
            divE1.innerHTML += `${typeof user}, ${user}<br>`;
            divE1.innerHTML += `${typeof testfn}, ${testfn}<br>`;
            divE1.innerHTML += `${typeof noVal}, ${noVal}<br>`;
            // 화면에 출력(텍스트 출력되기 때문에 콘솔출력과 결과가 다를 수 있음)
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>요소가져오기(접근하기)</title>
    <style>
        .area {
            border: 1px solid;
            width: 300px;
            height: 100px;
        }
    </style>
</head>
<body>
    <h1>HTML요소에 접근하기(해당 요소 객체 가져오기)</h1>

    <h3>1) 아이디를 이용하여 요소 가져오기</h3>
    <div class="area" id="area1"></div>
    <button onclick="accessId();">아이디로 접근</button>

    <script>
        function accessId() {
            // 아이디로 요소 가져올 때
            // document.getElementById("아이디명") => 선택된 요소객체 반환
            var area1 = document.getElementById("area1");

            // 선택된 요소의 속성값 가져온다거나 변경가능
            // 속성 접근하고자 할 때 => 선택된요소.접근하고자하는 속성
            area1.innerHTML = "아이디로 접근 성공!<br>";

            // 선택된 요소에 스타일 변경
            area1.style.backgroundColor = "yellow";
            area1.style.color = "red";
            area1.style.width = "200px";
            area1.style.height = "200px";
        }
    </script>

    <br><br>

    <fieldset>
        <legend>range</legend>
        <!-- oninput : input에 값이 들어오는 이벤트 발생하면-->
        <input type="range" name="score" min="0" max="100" value="0" oninput="document.getElementById('score').innerHTML=this.value;">
        
        <span id="score">0</span>
    </fieldset>
    <!-- value -->
    <input type="text" value="name">

    <br><br>

    <div class="area" id="area2" style="background-color: azure;"></div>
    <button onclick="changeColor();">클릭마다 색 변경</button>
    
    <script>
        function changeColor() {
            var area2 = document.getElementById("area2");
            console.dir(area2);
            console.log(area2.style.backgroundColor);       // 색상 갖고오기

            if(area2.style.backgroundColor == "azure") {
                area2.style.backgroundColor = "blue";
            } else {
                area2.style.backgroundColor = "azure";
            }
        }
    </script>

    <h3>2) 태그명을 이용하여 요소 가져오기</h3>
    <ul>
        <li>목록1</li>
        <li>목록2</li>
        <li>목록3</li>
        <li>목록4</li>
        <li>목록5</li>
    </ul>

    <button onclick="accessTagName();">태그명으로 접근</button>

    <script>
        function accessTagName() {
            // 태그명으로 요소를 가져올 때
            // document.getElementsByTagName("태그명") => 선택된 요소객체들이 배열에 담겨서 반환
            var list = document.getElementsByTagName("li");         // [li요소객체, li요소객체, ...]

            console.log(list);
            console.log("배열의 크기(선택된 li요소 갯수) : " + list.length);
            console.log(list[0]);

            list[0].innerHTML = "변경된 값";

            var blueColor = 50;
            for(var i=0; i<list.length; i++) {
                list[i].innerHTML = "안녕" + (i+1);
                list[i].style.backgroundColor = "rgb(130,220," + blueColor + ")";
                blueColor += 50;
            }
        }
    </script>

    <br><br>

    <h3>3) name속성을 이용하여 요소 가져오기</h3>
    <form action="">
        <fieldset>
            <legend>취미</legend>
            <input type="checkbox" name="hobby" value="game" id="game">     <!-- id와 label for(이름 누르면 체크박스의 체크가 되는 것)의 값은 같아야 된다.-->
            <label for="game">게임</label>

            <input type="checkbox" name="hobby" value="movie" id="movie">
            <label for="movie">영화감상</label>

            <input type="checkbox" name="hobby" value="reading" id="reading">
            <label for="reading">독서</label>

            <input type="checkbox" name="hobby" value="sport" id="sport">
            <label for="sport">운동</label>
        </fieldset>
    </form>
    <br>

    <div class="area" id="area3"></div>
    <button onclick="accessName();">name으로 접근</button>

    <script>
        function accessName() {
            // name 속성값으로 요소 가져올 때
            //document.getElementsByName("name속성값"); => 선택된 요소들이 배열에 담겨 반환
            var hobby = document.getElementsByName("hobby");
            console.log(hobby);

            var area3 = document.getElementById("area3");
            for(var i=0; i<hobby.length; i++) {
                // 선택이 되어 있으면 true반환 그렇지 않으면 false반환
                if(hobby[i].checked) {
                    area3.innerHTML += hobby[i].value + "<br>";
                }
            }
        }
    </script>

    <h3>4) 클래스를 이용하여 요소 가져오기</h3>
    <!--속성명=속성값-->
    <div class="test"></div>
    <p class="test"></p>
    <ul class="test">
        <li></li>
        <li></li>
    </ul>
    <pre class="test test1"></pre>

    <button onclick="accessClass();">class로 접근</button>

    <script>
        function accessClass() {
            // class 속성으로 요소 가져올 때
            // document.getElementsByClassName("class속성값") => 선택된 요소들을 배열에 담아서 반환
            var arr = document.getElementsByClassName("test");
            console.log(arr);

            for(var i=0; i<arr.length; i++) {
                console.log(arr[i]);
            }
        }
    </script>

    <h3>5) 내가 원하는 요소를 자유자재로 가져오기(선택자 활용)</h3>

    <div id="test2">테스트입니다.</div>
    <div class="test2">
        <h2>안녕</h2>
        <h2>좋은아침</h2>
    </div>
    <span>ㅎㅎㅎ</span>
    <br>

    <button onclick="accessSelector();">클릭</button>

    <script>
        function accessSelector() {
            // 선택자를 이용하여 요소를 가져오고자 할 때
            // document.querySelector("선택자(아이디면 #, 클래스면 ., 태그는 그냥 넣기)") => 선택된 첫번째 요소 객체 하나만 반환
            // document.qurerySelectorAll("선택자") => 선택된 요소객체들을 배열에 담아서 반환

            var divE1 = document.querySelector("#test2");
            var h2E1 = document.querySelector(".test2>h2");
            console.log(h2E1);
            var spanE1 = document.querySelector(".test2+span");
            console.log(spanE1);

            var h2E2 = document.querySelectorAll(".test2>h2");
            for(var i=0; i<h2E2.length; i++) {
                console.log("querySelectorAll : " + h2E2[i]);
            }
        }
    </script>

    <br>

    <div>
        <p class="cls1">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut fuga quae, vero animi, veniam hic odio saepe consequatur accusantium ea aspernatur doloremque numquam voluptate ab et voluptates obcaecati magnam excepturi!
        </p>
        <p class="cls2">
            Nesciunt accusantium, dolorem soluta cum enim dolores earum numquam consectetur facere, adipisci doloribus at. Officiis est quo totam id a consequuntur architecto quasi, ducimus quas! Laborum quisquam et nesciunt iste.
        </p>
        <p class="cls1">
            Dolores ipsa, ea eaque iusto odit vitae natus libero nulla incidunt impedit numquam iure tempora architecto quaerat doloremque esse iste quae pariatur vero minus non sunt asperiores repellendus! Numquam, quae!
        </p>
    </div>
    <br>
    <button onclick="select();">querySelector</button>
    <button onclick="selectAll();">querySelectorAll</button>

    <script>
        function select() {
            var p2 = document.querySelector(".cls2");
            p2.style.color = "hotpink";
        }
        function selectAll() {
            var p = document.querySelectorAll(".cls1");
            for(var i=0; i<p.length; i++) {
                p[i].style.color = "green";
            }
        }
    </script>

</body>
</html>