Web Programming - HTML & CSS & Java Script (D+2)

LEE EUI JOO·2023년 2월 1일

Web Programming

목록 보기

2/17

제어문

1. 반복문

(1) while - 권장

while(표현식){
수행할 내용
}

표현식은 일반적으로 boolean을 리턴하는 식이어야 하지만
변수, 상수, falsy나 truth가 나오는 표현식도 가능

표현식이 true 라면 내용을 반복 수행

(2) do ~ while

do{
수행할 내용 - 반드시 한번 수행
}while(표현식);

반드시 1번 이상 수행해야 하는 내용이 있는 경우 사용

(3) for

for(처음 한 번 수행할 내용; 영역 내의 내용을 수행할 표현식; 두번 째 부터 수행할 내용){
내용;
}

for() 의 3개의 내용은 생략 가능

<semantic - 이제는 인간이 해석하는 것이 아니라 로봇이 해석하기 때문>
HTML5 : HTML4에 시맨틱 적인 요소와 오프라인 어플리케이션을 만들 수 있는 API가 추가

div 와 span : 영역 태그
<div class="header">
<header>

Engineer & Developer - 무조건 적어서 생각하고 실행할 것

server - client 의 데이터들은 항상 console.log 찍어서 확인할 것

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        let tot = 0;
        let idx = 1;
        /*while(idx <=10){
            tot = tot + idx;
            idx = idx + 1;

        }*/

        /*do {
            tot = tot + idx;
            idx = idx + 1;
        }while(idx<=10);
        */

        for(; idx<=10; idx = idx +1){
            tot = tot + idx;
        }
        console.log("tot:" + tot);
        
    </script>
</head>
<body>
    
</body>
</html>

제어문은 중첩이 가능

let cnt = 0;
        for(let idx=1; idx<=100; idx=idx+1){
            if(idx % 4 === 0 && idx%3 ===0){
                cnt = cnt + 1;
            }
        }
        console.log("cnt = " + cnt);
                                
<-> 위로 쓸 것 걸르는 것을 25개로 줄임

/*let cnt = 0;
        for(let idx=1; idx<=100; idx=idx+1){
            if(idx % 3 === 0 && idx%4 ===0){
                cnt = cnt + 1;
            }
        }
        console.log("cnt = " + cnt);*/

기타 제어문

break : 반복문 이나 switch를 종료
continue : 반복문에서 다음 반복으로 넘어 가도록 해주는 제어문
return : 현재 수행 중인 함수를 종료하고 호출한 곳으로 돌아가는 제어문
                                
* 호출한 곳이 없으면 프로그램 종료

순회 - 자바스크립트에서는 배열과 객체가 순회할 수 있는 대상
(1) for ~ in : index를 순회

(2) for ~ of : 내용을 순회

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>

        let ar = ["a","b","c","d","e","f"];
        for(idx in ar){
            console.log(idx); //인덱스
            console.log(ar[idx]); //배열의 내용
        }
        for(job of ar){
            console.log(job)
        }
        let obj = {"name":"lee","job":"engineer","age":"27"};
        for(arrt in obj){
            console.log(arrt)
            console.log(obj[arrt]);// in으로 접근할 때는 .을 이용할 수 없고 []를 이용해서 접근한다
        }
        

    </script>
</head>
<body>
    
</body>
</html>

함수

Function
함수 - 코드를 하나의 이름으로 묶어두고 하나의 명령으로 독립적으로 
메모리(stack)를 할당 받아서 실행되는 것

<목적> : 중복된 코드의 제거
!!모듈화 - 코드를 기능 또는 목적에 따라 분리시키는 것!!
메모리 문제

<종류>
Maker Function : 언어 or 프레임워크가 제공하는 함수
사용자 정의 함수 : 사용자가 만든 함수
3rd party Function (docker hub): 다른 개발자가 만들어 준 함수

!! 함수는 일급 객체 - 함수도 하나의 자료형!!


함수를 변수에 대입하는 것이 가능
함수를 매개변수로 사용하는 것이 가능
함수를 리턴하는 것도 가능
!! 클로저 !!
java는 반드시 인스턴스 안에 함수를 가지고 있어야함

<사용자 정의 함수>

초창기에 함수를 만들던 방법 - 비추천, hoisting 이 될 수 있음

function 함수이름(매개변수 나열){
	함수의 내용
	return 데이터; //생략 가능
}

변수를 이용해서 함수 작성 

let 함수 이름 = function(매개변수 나열){
	함수의 내용
    return 데이터;
}

화살표 함수 : 권장 - 최근의 방법

let 함수 이름 = (매개변수 나열) => {
	함수의 내용
    return 데이터;
}

<함수 호출>

(1) 직접 호출 : 함수이름 (매개변수 나열)

(2) 이벤트에 연결 : 콜백(리스너) 함수 - 상태 변화가 발생하면 
함수가 호출되도록 하는 것으로 대부분 이 경우는 비동기적으로 동작

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        let click = () => {
            console.log("클릭");
        };

        click(); //직접 함수를 호출
        window.addEventListener("load",(e) => {
            //이벤트에 연결 - bnt를 누르면 함수가 호출된다.
            document.getElementById("bnt").addEventListener("click", click);
        });
    
    </script>
</head>
<body>
    <button id="bnt">버튼</button>
    
</body>
</html>

<매개변수 - argument, parameter>

함수를 호출(요청)할 때 호출하는 쪽에서 넘겨주는 데이터
함수를 선언할 때 필요한 매개변수를 ()안에 나열할 수 있다
함수를 호출 할 때 매개변수에 구체적인 데이터를 전달해줘야 한다.
함수를 호출 할 때 매개변수를 적게 또는 많게 전달이 가능한데,
적게 전달하면 나머지 매개변수는 undefined 가 되고 
많이 전달하면 함수 내부에서 특별한 방법으로 사용하거나 사용하지 않을 수 있다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>//정수 1개를 받아서 func를 정수만큼 수행해주는 함수
        let disp = (n) => {
            for(let i=0; i<n; i=i+1){
                console.log("func");
            }
        }

        disp(4);
    </script>
</head>
<body>
    
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>//정수 1개를 받아서 func를 정수만큼 수행해주는 함수
        let disp = (n) => {
            for(let i=0; i<n; i=i+1){
                console.log("func");
            }
        }

        disp(4);
        //로그인 만들기
        let login = (email, password) => {

            console.log(email);
            console.log(password);

            if(email === "root@kakao.com"){
                if(password = "1234"){
                    console.log("로그인 success");}
                    else{
                        console.log("잘못된 password");
                    }

            }else{
                console.log("잘못된 이메일")
            }

        }
        login("root@kakaooo.com", "1234");
    </script>
</head>
<body>
    
</body>
</html>

javascript 에서는 함수 내부에 arguments라는 배열이 존재해서
매개변수를 순서대로 배열에 저장
매개변수 이름 대신에 arguments 를 이용해서 매개변수를 사용하는 것이 가능
화살표 함수에서는 사용할 수 없음

javascript 나 python에서는 함수의 원형이 보이지 않는
매개변수를 사용하는 경우가 있기 때문에 함수의 docs를 잘 읽어봐야 한다

<return>

현재 함수의 수행을 종료하고 호출한 곳으로 제어권을 넘기는 명령어
return을 할 때는 데이터 1개를 가지고 갈 수 있음
함수를 호출한 자리에 이 데이터가 남는다고 생각하면 된다
리턴이 없으면 일반적으로 현재 작업은 종료되는 것이고, 리턴이 있으면 이를 이용해서 연속된
작업을 수행할 수 있다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        let interAddWithInteger = (a,b) => {
            return a+b;//3이 써진다고 생각하면됨
        }

        let result = interAddWithInteger(1,2)
        console.log(result);

        let k = interAddWithInteger(result,50);
        console.log(k);
    </script>
</head>
<body>
    
</body>
</html>

초보 developer 는 먼저 큰 틀을 설계해야 한다

예)

로그인을 처리

매개변수 : id에 해당하는 데이터, 비밀번호에 해당하는 데이터
리턴 타입 : Boolean

회원가입을 처리
매개변수 : ...
리턴타입 : ...

이 결과를 토대로 UML을 작성하는 습관을 길러야 함


<순수 함수 (Pure Function)>

함수 외부의 데이터를 변경하지 않는 함수 - 리턴하는 것을 권장
동일한 입력이 주어지면 동일한 결과를 리턴하는 함수
  
let ar = [1,2,3];
        let nopurefunction = (xr) => {
            xr[0] = 20;

        }// 매개변수로 전달된 데이터를 변경하는 함수
        // 이런 함수는 순수함수가 아님
        console.log(ar);
        nopurefunction(ar);
        console.log(ar);

<중첩 함수>

함수 안에 함수를 만드는 것이 가능

<High Order Function>

함수 안에서 함수를 만들어서 리턴하는 함수

<!! Clousure - (람다)!! >

함수 내부에서 함수를 리턴해서 함수 외부에서 함수 내부의 데이터를 변경하는 것

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        let outer = function(){
            let local = 1;
            // 중첩 함수 - 함수 안에 함수를 만드는 것은
            let inner = function(){
                console.log(local);
                // 내부에서는 내부의 다른 변수의 값을 변경하는 것이 가능
                local = local + 1;

            }
            // 함수도 하나의 자료형이기 때문에 리턴하는 것이 가능
            // High Order Function(currying)
            return inner;
        }
        // f 에 대입되는 것은 outer 함수가 리턴한 inner 함수
        let f = outer();
        f();// inner 함수가 호출됨
        f();
        f();
        // 영역 내에서 만들어진 데이터는 영역 내에서만 사용이 가능한데
        // 함수 내부에서 로컬 데이터를 조작하는 함수를 만들어서 리턴하면
        // 함수 외부에서 함수 내부의 로컬 데이터를 조작할 수 있음 - closure
    </script>
</head>
<body>
    
</body>
</html>

<함수의 매개변수에 기본값을 설정>

- 매개변수의 값이 대입되지 않으면 사용할 값을 설정하는 것이 가능
- 매개변수를 만들 때 = 값을 같이 설정하면 된다.

<화살표 함수>

- 함수를 function 이라는 키워드 대신에 (매개변수) => { 함수의 내용 } 으로 만드는 방식
- this 나 arguments를 사용할 수 없음
- 매개변수가 1개인 경우 () 를 생략할 수 있음
- {} 안의 내용이 1줄인 경우 {}를 생략할 수 있음
- {} 안에 return 하는 문장 1개라면 return을 생략할 수 있음
- return이 없을 때는 마지막 문장의 실행 결과가 리턴됨
- 자바 스크립트에서 콜백 함수는 화살표 함수로 작성하는 것을 권장

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        let outer = function(){
            let local = 1;
            // 중첩 함수 - 함수 안에 함수를 만드는 것은
            let inner = function(){
                console.log(local);
                // 내부에서는 내부의 다른 변수의 값을 변경하는 것이 가능
                local = local + 1;

            }
            // 함수도 하나의 자료형이기 때문에 리턴하는 것이 가능
            // High Order Function(currying)
            return inner;
        }
        // f 에 대입되는 것은 outer 함수가 리턴한 inner 함수
        let f = outer();
        f();// inner 함수가 호출됨
        f();
        f();
        // 영역 내에서 만들어진 데이터는 영역 내에서만 사용이 가능한데
        // 함수 내부에서 로컬 데이터를 조작하는 함수를 만들어서 리턴하면
        // 함수 외부에서 함수 내부의 로컬 데이터를 조작할 수 있음 - closure

        /*function interAddWithInteger(a,b) {
            return a + b;
        }*/

       /*let interAddWithInteger = function(a,b){
            return a + b;
        }*/

        /*let interAddWithInteger = (a,b) => {
            return a + b;
        }
        console.log(interAddWithInteger(7,24));*/

        //위의 함수를 아래처럼 간략하게 표현할 수 있음 return 이 하나 이기 때문에 return 생략가능
        // {}안의 내용이 1줄인 경우 {}를 생략할 수 있음
        let interAddWithInteger = (a,b) => a+b;
        console.log(interAddWithInteger(7,24));
    </script>
</head>
<body>
    
</body>
</html>

<내장 함수 - window 객체의 메서드>

- window 객체의 요소는 window. 을 붙이지 않고 사용이 가능하기 때문에 전역 함수처럼 사용 가능

- alert(메시지) : 메시지를 모달 창으로 출력
- confirm(메시지) : 확인 과 취소 버튼을 갖는 대화상자로 메시지를 출력하고 확인을 누르면 true가 리턴 되고, 취소를 누르면 false가 리턴
- prompt(메시지, 기본값) : 메시지 와 기본값을 출력하는데 한 줄의 데이터를 입력받을 수 있는 형태로 출력되고 확인을 누르면 입력한 내용이 문자열로 리턴되고 취소를 누르면 null 이 리턴된다.
- eval(문자열) : 문자열을 객체로 변환해주는 함수 - 예전에 사용이 되었지만, 지금은 쓰지 않음
- encoding 과 decoding 관련 함수 : escape, encodeURI, encodeURIComponent 등이 Encoding 관련 함수인데 encodeURI를 주로 이용



!! encoding : 문자를 컴퓨터에 저장되는 형태로 변경하는 것
!! decoding : 컴퓨터에 저장된 코드를 문자로 변환 시키는 것
문자열 인코딩 : ascii, ecu-kr, ms949(cp949), utf8, iso-latin1(iso8859-1)

get 방식은 URL 뒤에 파라미터를 붙여서 전송함
get 방식의 URL은 Web Server가 해석
Web Server는 인코딩 되지 않은 문자열을 해석 할 수 없음
자바스크립트에서 파라미터에 한글이 있는데 get방식으로 요청하는 경우는 반드시 인코딩해서 전송해야 함
이 때 사용되는 함수가 encodeURL

post 방식은 body에 숨겨서 전송하기 때문에 Web Server 가 해석하지 않고 Application Server 가 해석하므로 서버 프로그램에서 디코딩을 해서 사용


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        console.log(encodeURI('에스파'));
    </script>
</head>
<body>
    
</body>
</html>


!! 대화 상자 !!

- Modal : 대화상자가 제어권을 가지고 있는 형태로 대화상자를 닫기 전까지는 제어권이 안됨
- Modeless : 대화 상자를 닫지 않고도 제어권을 이동할 수 있는 대화상자

OOP (Object Oriented Programming - 객체 지향 프로그래밍)

Object : 하나의 기능을 구현하기 위해서 모인 속성과 메서드의 집합

1. 객체의 종류

- 사용자 정의 객체 : 사용자가 만든 객체
- 내장 객체 : 제공되는 객체
	(1) 일반 객체 : 자바스크립트에서 사용하기 위해서 제공되는 객체
    (2) BOM (Browser Object Model) : 브라우저에 관련된 정보를 제공하기 위한 객체
    (3) DOM (Document Object Model) : 화면 출력에 관련된 정보를 제공하기 위한 객체, 태그
    -> 3rd party : 별도의 라이브러리에서 제공하는 객체

2. 사용자 정의 객체

- 생성 방법 : 
{속성 : 내용, 속성:내용...}

생성자 함수(매개변수)

객체를 가지고 내용을 호출하는 방법
- 객체 참조[속성이름] : 속성 이름을 문자열로 기재
- 객체 참조.속성이름 : 속성 이름을 문자열로 기재하면 안됨
- 함수의 경우는 ()없이 호출하면 함수의 내용이 기록된 곳의 참조가 된다.
- 함수를 호출할 때는 ()와 함께 호출해야 함

객체 내의 함수에서 객체 내의 속성을 호출하고자 할 때는 this.속성이름 을 사용해야 한다
- this를 생략하면 함수 내의 지역 변수를 호출하는 문장이 된다.
- 객체 내에서 다른 속성을 사용해야 하는 함수를 만들 때는 화살표 함수를 만들면 안됨
- 화살표 함수는 this를 사용할 수 없는 함수이기 때문
- this 는 객체 자신을 가리키는 숨겨진 포인터

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OOP</title>
    <script>
        //사용자 정의 객체
        let obj = {"name":"lee","age":27,"disp":()=>{
            console.log("function");
        }};
        // 속성 호출
        console.log(obj.name);
        console.log(obj["age"]);
        // 함수 호출
        obj.disp(); //()를 써줘야 함
    </script>
</head>
<body>
    
</body>
</html>

this.속성

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OOP</title>
    <script>
        //사용자 정의 객체
        let obj = {"name":"lee","age":27,"disp":function(){
            // this를 붙여야 자신의 객체 내에서 찾을 수 있다.
            console.log(this.name);
        }};
        // 속성 호출
        console.log(obj.name);
        console.log(obj["age"]);
        // 함수 호출
        obj.disp();
    </script>
</head>
<body>
    
</body>
</html>

객체 내에서의 문법
for 임시변수 in 객체 {수행할 내용} 
- 객체 내의 모든 속성을 임시변수에 대입하면서 {}내의 내용을 수행

속성 in 객체
속성이 객체에 존재하면 true 그렇지 않으면 false를 리턴

with(객체명){}
- {}내에서는 속성 이름만 사용해도 객체 내의 속성을 호출한 것으로 간주

객체에 속성을 추가하거나 수정
- 객체.속성 = 값을 기재했을 때 속성이 존재하면 수정이고 존재하지 않으면 추가

객체의 속성을 제거
delete(객체.속성)

<constructor>

생성자 함수라고 하는데 객체를 생성해서 리턴해주는 특별한 목적의 함수
function 함수이름(매개변수){
			내용
}

내용에서 this.속성이름을 사용하면 이 속성들을 하나의 객체로 묶어서 메모리를 할당한 후 참조를 리턴

호출 방법
new 함수이름(매개변수);

생성 이유 - 다른 언어에서 클래스를 만드는 이유
동일한 모양의 객체를 여러 개 만들기 위해


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OOP</title>
    <script>
        //사용자 정의 객체
        let obj = {"name":"lee","age":27,"disp":function(){
            // this를 붙여야 자신의 객체 내에서 찾을 수 있다.
            console.log(this.name);
        }};
        // 속성 호출
        console.log(obj.name);
        console.log(obj["age"]);
        // 함수 호출
        obj.disp();

        // 함수 내에서 this 가 사용되므로 생성자 함수 아니면 객체의 함수로 사용되어야 함
        function Person(name, phone){
            this.name = name;
            this.phone = phone;
        }

        let p1 = new Person("lee","3233");
        let p2 = new Person("joo","4434");
        console.log(p1.name)
        console.log(p1.phone)
        console.log(p2.name)
        console.log(p2.phone)

    </script>
</head>
<body>
    
</body>
</html>

<class>

- ES6(ECMA 2015 - 현재 자바스크립트의 일반적인 표준)
- 생성자 와 마찬가지로 동일한 모양의 객체를 여러 개 생성하고자 할 때 모형을 만드는 것

class 클래스이름{
			내용 - 속성이나 함수 모두 가능
}

<클래스를 이용해서 객체생성>

new 클래스이름(매개변수)

클래스 안에 생성자를 만들 때는 constructor 라는 예약어를 사용

class 클래스이름 {
			constructor(매개변수){
            	내용; // this를 사용하면 객체의 속성
                }
}

다른 클래스를 상속받고자 하는 경우에는 클래스 이름 다음에 extends 상위클래스 이름을 추가

상위 클래스의 객체가 소유하고 있는 모든 속성 과 메서드를 물려받음

이 경우 상위 클래스에 만들어져 있는 속성을 하위 클래스에서 다시 만들 수 있는데 
이것을 Overriding(재정의, 기능확장을 위함)라고 함

오버라이딩의 목적은 상위 클래스의 기능이 부족해서 하위 클래스에서 추가해서 사용하려고 하는 것

하위 클래스에서 상위 클래스의 속성을 호출하고자 할 때는 super.을 추가하고 호출

부술 때는 하위부터 부수면 됨 - 의존성 문제
하위 ~~> 상위


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OOP</title>
    <script>
        /*//사용자 정의 객체
        let obj = {"name":"lee","age":27,"disp":function(){
            // this를 붙여야 자신의 객체 내에서 찾을 수 있다.
            console.log(this.name);
        }};
        // 속성 호출
        console.log(obj.name);
        console.log(obj["age"]);
        // 함수 호출
        obj.disp();*/

        // 함수 내에서 this 가 사용되므로 생성자 함수 아니면 객체의 함수로 사용되어야 함
        /*function Person(name, phone){
            this.name = name;
            this.phone = phone;
            this.display = function(){

            }
        }*/

        /*let p1 = new Person("lee","3233");
        let p2 = new Person("joo","4434");
        console.log(p1.name)
        console.log(p1.phone)
        console.log(p2.name)
        console.log(p2.phone)*/

        class Person{
            constructor(name,phone){
                this.name = name;
                this.phone = phone;

            }
            display(){

                console.log(this.name + ":"+ this.phone);
            
            }
        }
        
        let p1 = new Person("lee","3233");
        p1.display();

        //상속 하는 클래스를 만들고 싶다
        // Person 클래스를 상속 받는 PersonEx 클래스
        class PersonEx extends Person{
            constructor(name,phone,age){
                //상위 클래스의 생성자
                super(name,phone);
                this.age = age;

            }
            // Person에 존재하는 display를 새로 정의 - Overriding
      //존재 하는 메서드를 overring 할 때는 상위 클래스의 메서드를
      //호출하고 필요한 기능을 추가한다
      //overring의 목적은 다시한번 말하면 "기능의 확장" 이다
            display(){
                super.display();
                console.log(this.age);

            }

        }

        let sub = new PersonEx("joo","4455","27");
        sub.display();




    </script>
</head>
<body>
    
</body>
</html>

<상속의 화살표 방향>

Person <- PersonEx

하위클래스가 상위클래스에서 '받는 거'
상위클래스가 하위클래스에게 제공하는 것이 아님!!을 주의하자

구조 분해 할당

자바 스크립트는 배열이나 객체를 분해해서 할당하는 문법을 지원

let ar = [1,2,3,4]; //ar 배열에 1,2,3,4 라는 묶음 데이터의 참조를 대입

[one, two, three, four] = ar; //one에 1 two에 2 three에 3가 대입됨

- 배열은 순서대로 할당
- 객체는 속성의 이름과 동일한 데이터를 찾아서 분해 할당한다
- 구조 분해 할당은 함수의 매개변수에도 사용이 가능 spread 연산이라고 하기도 함

spread 연산자를 이용한 구조 분해 할당에서는 변수 이름 앞에 ...을 붙이면
나머지 전부를 가져온다.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>
        let sm = ["SES", "소녀시대", "에스파", "레드벨벳"];

        let one, two, three, four;
        // 구조 분해 할당 - 배열의 요소를 순서대로 나누어서 대입
        [one,two,three,four] = sm;
        console.log(one);
        console.log(two);
        console.log(three);
        console.log(four);
        // 변수의 개수가 부족하면 앞에서부터 순서대로 채움
        [one,two,three] = sm;
        console.log(three);
        // 이 경우 five 는 undefined
        [one,two,three,four,five] = sm;
        console.log(five);


        // 객체 구조 분해 할당 - 속성 단위로 구조 분해 할당을 수행
        // 객체를 구조 분해 할당할 때는 속성의 이름 과 동일한 경우에만 할당됨.

        let obj = {"name":"lee", "job":"student","live":["bor","seoul"]};

        let adm = obj; // obj가 참조하는 데이터를 adm에 대입

        // 객체를 구조 분해 할당 할 때는 변수를 만들면서 수행
        // const를 사용하는 경우가 많다

        const {job, name} = obj;
        console.log(name);
        console.log(job);

        let aespa = ["카리나","지젤","윈터","닝닝"];
        // 스프레드 연산 - leader에 하나의 데이터를 할당하고 나머지를 etc에 할당
        let [leader, ...etc] = aespa;
        console.log(etc);

        

    </script>
</head>
<body>
    
</body>
</html>

예외처리

개념
- 물리적 오류 - 문법적인 오류로 인해서 컴파일을 하지 않는 것으로 실행되지 않음
- 논리적 오류 - 알고리즘의 설계 실패로 옳지 못한 결과가 나오는 현상(디버깅으로 해결)
- 예외 - 문법적인 오류는 없어서 실행은 되지만 특수한 상황이 발생하면 오류를 발생시키고 프로그램이 중단되는 현상(디버깅으로 해결하거나 예외 처리를 수행)
- 단언 - 강제로 프로그램을 중단시키는 것
예외 처리의 목적
- 프로그램을 중단시키지 않고 계속 수행하도록 하기 위함
- 예외를 로깅(기록)하기 위해

<예외 처리 방법>

try{
		예외가 발생할 만한 코드
}catch(변수){
		예외가 발생하면 수행될 코드
}finally{
		무조건 실행될 코드
}

try절 안에서 예외가 발생하면 catch에 있는 코드를 수행하고 finally로 넘어가고
예외가 발생하지 않으면 바로 finally로 넘어간다

- catch 나 finally는 생략이 가능한데 둘 다 생략할 수 는 없다
- catch 에 있는 변수는 예외가 발생했을 때 예외에 대한 내용을 전달 받는 변수이다

- 예외 객체 안에는 name(예외 이름) 과 message(예외와 관련된 문자열) 속성이 존재

!! 서버 개발자는 예외처리를 많이 해야 한다!!

- 강제로 예외를 발생시키고자 하는 경우는 throw new Error(메시지)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>
        try{
            let ar = new Array(100000000000000000);
            console.log(ar.length);
        }catch(e){
            console.log(e.message);
        }
        console.log("계속 수행");

        // body에 있는 내용을 전부 읽고 난 후 수행
        window.addEventListener('load',(e)=> {
            document.getElementById("content").innerHTML = "글자 추가하기";
            //다른 방법//document.querySelector('div').innerHTML = "선택자 이용";
        })

        
    </script>
</head>
<body>
    <div id="content"></div>
</body>
</html>

여러 개의 자바스크립트 파일 사이의 데이터 교환

자바스크립트에서는 하나의 파일을 하나의 모듈로 간주
현재 파일의 내용을 다른 파일에서 사용할 수 있도록 하기 위해서는 데이터를 export하고 사용하고자 하는 부분에서 import해서 사용해야 한다
export 하는 방법
- export 데이터;
import 하는 방법
- 전체를 하나의 이름으로 import
- import 이름 from 모듈이름;
- 이 경우는 전체를 받는 것이기 때문에 export 되는 데이터와 이름이 일치하지 않아도 됨
- 모듈의 전체 내용을 이름으로 묶어서 사용한다는 의미
- 구조 분해 할당해서 받는 것이 가능
- import {이름 나열} from 모듈이름;
- 이 경우는 모듈에서 export한 내용을 분해해서 동일한 이름의 데이터만 할당
- 전체를 받고 분해 할당해서 받기
- import React, {useState} from 'react';
- react 에서 export 한 모든 내용을 React 라는 이름으로 묶어서 가져오고 그 중에서 react.useState에 해당하는 것은 useState에 할당

DOM 사용

DOM(Document Object Model) : HTML body에 존재하는 태그를 자바스크립트 객체로 변환한 것
태그를 자바스크립트 객체로 변환해주는 메서드
- document.getElementById('아이디')
- document.querySelector('선택자')
  - 선택자
    태그이름
    .클래스 이름
    #아이디
script 코드가 태그 아래에 있으면 바로 사용하면 되지만 태그 위에 있는 경우는

window.addEventListener('load',(e) => {
											이 안에서 DOM을 찾아서 사용
});

이벤트 핸들링

DOM객체.addEventlistener('이벤트 이름',(e) => {
											수행할 내용
});

수행할 내용은 별도의 함수로 만들어서 대입하는 것도 가능한데
이 때 함수의 이름의 시작은 'on'으로 하는 것이 관례


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>
        try{
            let ar = new Array(100000000000000000);
            console.log(ar.length);
        }catch(e){
            console.log(e.message);
        }
        console.log("계속 수행");

        // body에 있는 내용을 전부 읽고 난 후 수행
        window.addEventListener('load',(e)=> {
            document.getElementById("content").innerHTML = "글자 추가하기";
            //다른 방법//document.querySelector('div').innerHTML = "선택자 이용";
        })

        
    </script>
</head>
<body>
    <div id="content"></div>
    <button id="btn1">버튼1</button>
    <button id="btn2">버튼2</button>
    <script>
        document.getElementById("btn1").addEventListener('click',
            (e)=>{alert("버튼 1 클릭");
        
        })
        // react 가 좋아하는 방식
        let onClick = (e) => {
            alert("버튼2 클릭");

        }

        document.getElementById("btn2").addEventListener('click',
        onClick);
    </script>
</body>
</html>