[JavaScript] 개발자 지망생 스터디 - 7일차

■ 일반 내장 객체

• String
  • 문자열 관련 클래스
  • 속성 : length - 문자열의 길이
  • 메서드
    • charAt(인덱스) - 인덱스 번째 문자 리턴
    • charCodeAt(인덱스) - 인덱스 번째 문자의 코드 리턴
  • Template Literal : 문자열 처리를 위한 템플릿
    • 문자열과 데이터를 조합해서 문자열을 생성하기 위한 추가된 문법
    • '문자열${데이터}' : 문자열 안에 데이터를 문자열로 추가해서 문자열을 생성함
      • 이 구조를 사용하면 중간에 줄바꿈을 해도 됨

    <script>
        var company = "adamsoft";

        console.log("문자열 길이 : " + company.length);
        console.log("0번째 문자 : " + company.charAt(0));
        console.log("0번째 문자 코드 : " + company.charCodeAt());

        // 대문자로 변환
        console.log("대문자로 변환 : " + company.toUpperCase());
        
        let sample = "      HELLO     "
        // 좌우 공백 제거 - trim
        console.log("좌우 공백 제거 : " + sample.trim());

        var result = "";
        var len = sample.length;
        for(var i=0; i<len; i++){
            if(sample.charAt(i) !== " "){
                result = result + sample.charAt(i);
            }
        }
        console.log("좌우 공백 제거 : " + result);

        // 찾아주는 메서드
        console.log(company.indexOf("a")); // 앞에서부터 첫번째
        console.log(company.lastIndexOf("a")); // 뒤에서부터 첫번째
        // 못찾으면 음수
        console.log(company.indexOf("x")); // 앞에서부터 첫번째

        var uri = "abc.html";
        // 문자열 분할
        // 패턴을 가지고 분할해서 배열로 생성-sprit
        var ar = uri.split(".");
        console.log(ar[0]);
        console.log(ar[ar.length - 1]);
        
        // 위치를 가지고 분할해서 문자열로 생성 - substring
        // 매개변수가 2개이면 앞은 시작하는 위치인데 뒤는 끝나는 위치인 경우도 있고 개수 인 경우도 있음
        console.log(uri.substring(0));
        console.log(uri.substring(0,3));
        console.log(uri.substring(uri.indexOf("."), uri.length));
        
        // 문자열 템플릿
        var data = 42;
        // 이 데이터는 42 입니다. 형태로 출력
        console.log("이 데이터는 " + data + " 입니다.");
        console.log(`이 데이터는 ${data} 입니다.`);

        // console.log("중간에 줄바꿈을 하면 에러가 발생합니다.");
        console.log(`중간에 줄바꿈을 해도 에러가 발생하지 않습니다.`);
    </script>

• Date
  • 날짜와 관련된 클래스로 자바에서 그래도 가져옴
  • 생성
    • new Data() : 현재 날짜 및 시간
    • new Data(년, 월, 일, 시, 분, 초, 밀리초) : 입력한 데이터를 가지고 날짜 및 시간을 만들어내는데 월은 -1로 해서 설정함
    • new Data(정수) : 정수는 1970년 1월 1일 자정(epoch time)에서 지나온 시간을 밀리초 단위로 설정
  • 메서드 : 각 단위 별로 가져오고 설정할 수 있는 메서드를 제공하고 현재 설정에 따른 시간을 문자열로 리턴해주는
    • toGTMString, toLocaleString, toString 메서드 제공
    • getTime 메서드를 이용하면 1970년 1월 1일 자정 이후로 지나온 시간을 밀리초 단위로 리턴

    <script>
        // 1986년 5월 5일에서 현재까지 지나온 날 수

        // 현재 날짜 가져오기
        let today = new Date();
        console.log(today);

        // 1986년 5월 5일 출력 (월은 -1)
        let meetday = new Date(1986, 4, 5);
        console.log(meetday);

        // 지난 날 수 확인
        var interval = today.getTime()-meetday.getTime();
        var date = interval / (1000 * 60 * 60 * 24);
        console.log("지나온 날수 : " + Math.round(date));
    </script>

• Array
  • 배열 객체
  • 다른 언어에서의 Linked List 와 유사
  • 배열의 크기가 고정이 아니고 만들고 난 후 데이터를 추가하거나 삭제하는 것이 가능함.
  • 생성
    • [데이터 나열]
    • new Array() : 비어있는 배열 생성
    • new Array(데이터 개수) : 데이터 개수만큼 저장할 수 있는 공간을 확보해서 생성
    • new Array(데이터 나열) : 데이터를 가지고 생성
  • 데이터의 개수는 length 라는 속성으로 제공
  • 하나 하나의 데이터를 접근할 수 있는 [인덱스]를 제공
    • 인덱스는 0부터 length -1 까지
  • for-in 을 이용해서 모든 인덱스를 순차적으로 접근할 수 있고 for-of 를 이용해서 모든 데이터를 순차적으로 접근 할 수 있음.
  • 메서드
    • concat(배열) : 배열 결합
    • reverse()
    • slice(start,end)
    • sort([정렬을 위한 함수]) : 데이터 정렬
    • pop() : 마지막 데이터를 삭제하고 리턴
    • push(data) : 마지막에 데이터 추가
    • shift() : 첫 번째 데이터를 삭제하고 리턴
    • unshift(data) : 데이터를 맨 앞에 추가
    • remove(인덱스) : 인덱스 번째 데이터 삭제
    • indexOf, lastIndexOf
    • toString() : 배열을 문자열로 만들어서 리턴
    • join(구분기호) : 배열의 각 요소를 구분기호를 추가하면서 하나의 문자열로 리턴
  • 방향에 따른 종류
    • ascending (오름차순) : 작은 것에서 큰 것 순으로 나열하는 것을 기본
    • descending (내림차순) : 큰 것에서 작은 것 순으로 나열하는 것
  • 알고리즘에 따른 종류
    • selection(선택)
    • bubble
    • insertion(삽입)
    • heap
    • quick
    • radix
    • merge
    • shell
    • etc...
      • quick sort를 구현하고 설명할 수 있는 것이 중요
    • JavaScript에서는 숫자 데이터의 경우 문자열로 변환해서 정렬을 수행함
      • 다른 방법으로 정렬을 하고자 할 때는 sort 함수에 매개변수가 2개이고 정수를 리턴하는 함수를 대입해야 함
      • 2개의 매개변수는 배열에 있는 2개의 데이터를 번갈아가면서 대입
        • 양수 리턴 : 앞의 데이터가 크다고 판단해 위치를 변경
        • 0 리턴 : 데이터의 크기가 같다고 판단해 위치를 변경하지 않음
        • 음수 리턴 : 앞의 데이터가 작다고 판단해 위치를 변경 하지 않음
          • 이 원리는 모든 프로그래밍 언어에서 동일함

    <script>
        var ar = ["네이버", "카카오", "라인", "쿠팡", "배달의민족"];
        // Javascript 는 숫자 배열을 문자 배열로 판단하고 정렬함.
        // 코드를 가지고 정렬하기 때문에 자릿수가 다른 데이터를 정렬하면 오류가 발생함.
        var br = [10, 20, 30, 240, 150];

        console.log(ar.reverse());
        // 숫자의 경우는 문제가 발생
        console.log(br.sort());
        // sort 메서드에는 매개변수가 2개이고 리턴은 정수를 하는 함수를 대입하는 것이 가능한데
        // 매개변수 2개는 배열의 데이터가 순차적으로 전부 대입 되고 
        // 양수를 리턴하면 앞의 데이터가 크다고 판단하고 위치를 변경

        // 오름차순 정렬 (숫자)
        console.log(br.sort((a, b) => {return a-b;}))
        // 내림차순 정렬 (숫자) : 문자열의 경우는 '-' 가 불가능함
        console.log(br.sort((a, b) => {return b-a;}))

        // 문자열 배열의 내림차순
        //오름차순 정렬한 후 reverse를 해도 되지만 크기 비교를 이용
        console.log(ar.sort((a, b) => {
            if(a < b) return 1;
            else if(a == b) return 0;
            else return -1;
        }));

        // 인스턴스를 생성할 수 있는 생성자
        function Book(name, price, date){
            this.name = name;
            this.price = price;
            this.date = date;
            
            this.toString = function(){
                return this.name + ":" + this.price + ":" + this.date;
            }
        }

        // Book 배열 생성
        var books = [
            new Book("파이썬", 30000, new Date(2022, 8, 8)),
            new Book("C언어", 56700, new Date(2022, 11, 15)),
            new Book("JAVA", 80000, new Date(2022, 7, 22)),
            new Book("JavaScript", 30000, new Date(2022, 10, 30))
        ];
        // 배열이 제대로 만들어졌는지 확인
        // console.log(books);
        // 1 : name 의 오름차순, 2 : name 의 내림차순
        // 3 : price 의 오름차순, 4 : price 의 내림차순
        // 5 : date 의 오름차순, 6 : date 의 내림차순
        // 나머지 : 입력순
        let list = prompt("정렬순 입력")
        let result;
        switch(list){
            case "1" :
                result = books.sort((a, b) => {
                    if(a.name > b.name){
                        return 1;
                    }else{
                        return -1;
                    }
                });
                break;
            case "2" :
                result = books.sort((a, b) => {
                    if(a.name < b.name){
                        return 1;
                    }else{
                        return -1;
                    }
                });
            
                break;
            case "3" :
                result = books.sort((a, b) => {
                    if(a.price - b.price){
                        return 1;
                    }else{
                        return -1;
                    }
                });
                break;
            case "4" :
                result = books.sort((a, b) => {
                    if(b.price - a.price){
                        return 1;
                    }else{
                        return -1;
                    }
                });
                break;
            case "5" :
                result = books.sort((a, b) => {
                    if(a.date.getTime() - b.date.getTime()){
                        return 1;
                    }else{
                        return -1;
                    }
                });
                break;
            case "6" :
                result = books.sort((a, b) => {
                    if(b.date.getTime() - a.date.getTime()){
                        return 1;
                    }else{
                        return -1;
                    }
                });
                break;
        }
        console.log(result);        
    </script>

• 배열에 추가된 함수 : 함수를 매개변수로 받음
  • forEach() : 매개변수가 1개이고 리턴이 없는 함수를 매개변수로 받아 배열의 모든 요소를 매개변수에 대입해서 함수를 호출
  • map() : 매개변수가 1개이고 리턴을 하는 함수를 매개변수로 받아서 배열의 모든 요소를 매개변수로 대입해서 함수를 호출한 후 그 결과를 가지고 다시 배열을 만들어 리턴
    • 배열에 어떤 연산을 가해서 새로운 배열을 만들고자 할 때 사용
  • filter() : 매개변수가 1개 이고 Boolean을 리턴하는 함수를 매개변수로 받아서 배열의 모든 요소를 매개변수로 대입해서 함수를 호출한 후 true를 리턴한 데이터만 모아서 배열로 리턴
  • every() : 매개변수가 1개이고 Boolean을 리턴하는 함수를 매개변수로 받아서 배열의 모든 요소를 매개변수로 대입해서 함수를 호출한 후 true를 리턴하는지 확인해서 Boolean으로 리턴
  • some() : 매개변수가 1개이고 Boolean을 리턴하는 함수를 매개변수로 받아서 배열의 모든 요소를 매개변수로 대입해서 함수를 호출한 후 1개의 데이터라도 true를 리턴하는지 확인해서 Boolean으로 리턴

>>>>>> JAVA는 이를 위해 람다와 스트림이라고 하는 새로운 API를 1.8 버전에서 추가함

 

    <script>
        var ar = [10, 30, 27, 38, 99];

        // 배열의 모든 데이터 출력 - forEach()
        // forEach : 배열을 순회하면서 함수를 호출
        // 함수의 매개변수 자리에 배열의 데이터를 순서대로 대입해서 함수를 호출함.
        // 내부 반복자를 사용하기 때문에 실행 속도가 빠름.
        ar.forEach((e) => {
            console.log(e);
        });

        // 배열의 모든 요소에 함수를 호출하여 그 결과를 모아 배열로 리턴
        var r = ar.map((e) => {
            return e * 10;
        });
        console.log(r);

        // filter 는 조건에 맞는 데이터만 추출하는 함수
        // 매개변수가 1개이고 Boolean을 리턴하는 함수를 설정
        // 짝수 찾기
        r = ar.filter((e) => {
            return e % 1 == 0;
        });
        console.log(r);

        // ko가 포함된 것만 찾기
        var br = ["South Korea", "China", "North Korea", "USA"];
        r = br.filter((e) => {
            return e.toLowerCase().indexOf("ko")>=0
        });
        console.log(r);
    </script>

• JSON 객체
  • JSON(JavaScript Object Notation) : 데이터를 자바스크립트의 객체 표현법의 문자열로 만드는 것
    • 현재 통신 방식에서 가장 많이 사용되는 데이터 포맷
    • 이 표현법은 자바스크립트에 파이썬이 동일함.
      • 객체 : {"속성이름" : 데이터, ....}
      • 배열 : [데이터 나열]
    • JSON.parse(json 문자열) : json 문자열을 자바스크립트 데이터로 변경해서 리턴함.
      • 서버에서 데이터를 받아온 경우 사용함
    • JSON.stringify(자바스크립트데이터) : 데이터를 json 문자열로 변환함.
      • 서버에게 데이터를 전송할 때 사용함

    <script>
        // 이 데이터는 실제로는 서버에서 받아옴
        var jsonText = '{"name" : "adam", "age" : 47}';
        // 파싱을 수행
        var result = JSON.parse(jsonText);
        // 이 번 문자열은 { } 안에 있기 때문에 객체임.
        console.log(result.name);
        console.log(result.age);

        // 배열 문자열
        jsonText = "[40, 50, 20, 30]"
        result = JSON.parse(jsonText);
        // 배열을 순회
        result.forEach((e) => {
            console.log(e);
        });
    </script>

• RegExp(정규 표현식) 객체
  • 정규 표현식
    • 문자열의 패턴을 정의하기 위한 객체로 Perl 에서 처음 사용됨.
      • 지금은 거의 모든 프로그래밍 언어에서 제공하고, 언어 차원에서 제공하지 않으면 외부 라이브러리를 통해서 제공
    • 일반적으로 문자열의 패턴을 찾거나 유효성을 검사하기 위해서 사용
  • 장점 : 복잡한 코드를 줄여서 표현 가능
  • 단점 : 가독성이 떨어짐
  • 구성
    • pattern
    • modifirer(한정자) : 제약조건을 설정
  • 객체 생성
    • new RegExp(패턴, 한정자)
    • /패턴/한정자
  • 함수
    • test(문자열) : 문자열에 정규 표현식 패턴이 존재하는지 확인
    • exec(문자열) : 정규 표현식 문자열을 리턴
  • String 의 정규 표현식 관련 메서드
    • match(정규 표현식) : 정규 표현식 과 일치하는 부분을 리턴
    • replace(정규 표현식, 변경할 문자열) : 정규 표현식에 해당하는 부분을 문자열로 치환
    • search(정규 표현식) : 정규 표현식 과 일치하는 부분의 인덱스 리턴
    • split(정규 표현식) : 정규 표현식 과 일치하는 부분을 찾아서 잘라낸 다음 배열로 리턴
  • 한정자
    • g : 전체 영역에서 비교
    • i : 대소문자 구분 없이 비교
    • m : 여러 줄에서 비교
  • 앵커 문자
    • ^패턴 : 패턴으로 '시작'하는
    • 패턴$ : 패턴으로 '끝'나는
  • 메타 문자
    • . : 아무 글자
    • [문자나열] : 문장 중 1개
    • [^문자] : 문자를 제외하고
    • [시작-끝] : 시작에서 끝에 포함되는
      • 영문소문자[a-z], 영문대문자[A-Z], 영문대소문자[A-Za-z], 한굴[가-힣]
    • \
      • \d : 숫자
      • \D : 숫자가 아닌
      • \w : 단어
      • \W : 단어가 아닌
      • \s : 공백문자
      • \S : 공백문자가 아닌
    • 수량 문자
      • + : 1개 이상
      • * : 0개 이상
      • ? : 0개 또는 1개
      • {횟수} : 횟수
      • {최소횟수,최대횟수} : 최소 ~ 최대
      • {최소횟수, } : 최소 횟수 이상 

    <script>
        var str = "JavaScript Reg Exp";
        // 위의 문자열에 script 가 포함되어 있는지 확인
        var regExp = /script/i; // 'i' 의 한정자가 없다면 대소문자로 인해 false의 값이 출력됨
        console.log(regExp.test(str));

        // (1) 주민등록번호 검사 (숫자 6개 - 숫자 7개)
        var idNum1 = "123456-1234567"
        var idNum2 = "123456-123456"
        var idNum3 = "1b3456-1234567"

        // 패턴 생성
        var idNum = /\d{6}-\d{7}/;

        console.log(idNum.test(idNum1)); // true
        console.log(idNum.test(idNum2)); // false
        console.log(idNum.test(idNum3)); // false

        // (2) 이메일 검사
        var email1 = "abc@gmail.com";
        var email2 = "abcagmail.com"

        // 패턴 생성
        var email = /^[a-zA-Z0-9+-\_.]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
        console.log(email.test(email1)); // true
        console.log(email.test(email2)); // false

        // (3) 전화번호 검사
        var selfphone1 = "010-1123-1234"
        var selfphone2 = "110-1123-1234"

        var selfphone = /^01([0|1|6|7|8|9])-?([0-9]{3,4})-?([0-9]{4})$/;
        console.log(selfphone.test(selfphone1)); // true
        console.log(selfphone.test(selfphone2)); // false

        // 입력 데이터의 유효성 검사는 문자열과 정규 표현식을 이용
        // 텍스트 마이닝 할 때 정규 표현식에 해당하는 데이터를 다른 데이터로 치환하는 경우가 있음
    </script>

※ 정규식 패턴은 일일이 작성하면 시간이 오래걸리기 때문에 구글링을 추천함.

•  Set
  • 여러 개의 데이터를 중복없이 저장하는 자료구조
  • 데이터를 가지고 key를 만들어서 저장함
    • 이 때 해싱을 수행해서 key를 만들어 냄.
    • 해싱은 데이터를 가지고 새로운 데이터를 만들어 내는 것
    • 이렇게 만들어진 코드를 Hash Code 라고 함
    • 데이터가 같으면 Hash Code는 같음
    • Hash Code가 같다고 해서 데이터가 같지는 않음
      • 확률적으로 아주 드문 경우임
    • Hash Code를 가지고 원본 데이터를 이론적으로는 찾을수 있지만 매우 어려움
  • 생성
    • new Set()
    • new Set(배열)
  • 함수
    • add, has, keys, valuss, delete, clear 등
  • for를 이용해서 순회 할 수 있음
    • 자바스크립트에서는 저장한 순서대로 접근함
    • 다른 언어에서는 저장한 순서를 기억하지 못함.

    <script>
        let set = new Set();
        set.add("JavaScript");
        set.add("JAVA");
        set.add("JavaScript");
        console.log(set);
        // 중복된 값은 저장되지 않음.
    </script>

• Map
  • key 와 value를 쌍으로 저장
  • key는 Set 으로 만들어짐
    • 동일한 key에 value를 여러 번 설정하면 마지막 value 만 저장됨
  • 생성
    • new Map()
    • new Map([key, value], [key, value], ...)
  • 함수
    • set(key, value) : 데이터 추가
    • get(key) : key에 해당하는 데이터 가져오기
      • 존재하지 않는 key를 대입했을 때 의 결과를 확인
    • key() : key를 순회할 수 있는 이터레이터 리턴
    • values() : value를 순회할 수 있는 이터레이터 리턴
    • entries() : 모든 데이터를 순회할 수 있는 이터레이터 리턴
    • delete() : key에 해당하는 데이터 삭제
    • clear() : 모든 데이터 삭제
    • has(key) : 키의 존재여부를 리턴

    <script>
        var map = new Map();
        // Map은 동일한 Key에 데이터를 여러번 저장하면 마지막 데이터로 수정
        map.set("name", "adam");
        console.log(map);
        map.set("name","아담");
        console.log(map);
        // 데이터 가져오기
        console.log(map.get("name"));
        console.log(map.get("이름"));

        // 전체 데이터 순회
        for(key of map.keys()){
            console.log(key);
        };
    </script>

▶ String, RegExp, Array, JSON, Map은 다른 클래스보다 중요함.

 

■ BOM (Browser Object Model)

- 브라우저 자체

- window가 최상위 객체이고 나머지 객체는 window 안데 포함된 객체

• window 객체
  • 브라우저 자체
  • 속성과 메서드
    • location 속성 : 현재 URL을 리턴하고 이 속성에 URL을 대입하면 그 URL로 이동함
    • 화면의 너비와 높이 관련 속성 : outerWidth, outerHeight
    • open 이라는 메서드를 이용해서 새로운 창을 화면에 출력하는 것이 가능
      • 팝업창을 만들 때 사용
      • setTimeout(함수, 시간) : 시간이 지난 후애 함수를 1번 호출
      • setInterval(함수,시간) : 시간이 지날때마다 함수를 계속 호출
      • setTimeout 과 setInterval은 자신의 참조를 리턴함
    • 타이머의 참조를 이용해서 타이머를 중지
  • • • clearTimeout(타이머 참조) : 타이머 중지
      • clearInterval(타이머 참조) : 타이머 중지
        • 일정한 시간마다 작업을 수행하도록 할 때 사용

<body>
    <div id="display"></div>
    <script>
        var itcompany = ["네이버", "카카오", "라인", "쿠팡", "배달의민족"];
        let idx = 0;
        // 3s 마다 함수를 호출
        setInterval(()=>{
            document.getElementById("display").innerHTML =
            itcompany[idx % itcompany.length];
            idx++;
        }, 3000);
    </script>
</body>

• window 객체
  • 위도우의 위치 변경이나 크기 변경 등을 위한 메서드도 제공
  • PC에서는 브라우저의 위치나 크기를 변경하지만 모바일에서는 브라우저의 위치나 크기를 변경할 수 없음
• screen 객체
  • 화면 정보와 관련된 객체
  • 너비와 높이 속성을 제공
• location 객체
  • 현재 page의 URL 관련된 객체
    • 프로토콜://IP 주소 나 도메인:포트번호/요청경로?이름=값...
    • //IP 주소 나 도메인:포트번호.요청경로?이름=값...
  • //로 시작하는 것은 https로 접속을 해보고 안되면 http로 접속
  • IP 주소나 도메인
    • hostname(컴퓨터를 구분하기 위한 주소 - 하나의 컴퓨터가 여러 개의 IP 나 Domain을 가질 수 있음)
  • 포트번호
    • 컴퓨터 내에서 프로세스(프로그램)를 구분하기 위한 번호 (0 - 65535)
    • 포트번호는 프로토콜의 기본 번호를 사용할 때는 생략이 가능
      • http -> 80
      • https -> 443
    • 요청 경로는 프로세스 내에서 구분하기 위한 문자열
    • ? 다음 이름=값
      • query string 이라고 함.
      • 클라이언트가 서버에게 전송하는 데이터
    • # 이름
      • fragment(책갈피 - 문서 내의 특정 위치) 라고 함
  • location에는 이러한 정보를 확인할 수 있는 속성을 제공함.
  • reload()를 호출하면 새로고침이 발생하고 href 속성에 다른 URL을 대입하면 URL로 이동함.
• navigator 객체
  • 웹 브라우저의 고유 정보를 제공하는 객체
  • userAgent: 클라이언트의 브라우저 와 운영체제 정보 리턴
    • 이 정보를 이용해서 접속한 운영체제를 파악해서 그에 맞는 컨텐츠를 제공함
    • Apple은 iPhone 과 iPad 등 운영체제 이름이 다름
    • android는 구분이 없음.

        // iphone에서 접속한 것을 확인
        // 이 코드는 대부분 서버에 작성
        var os = ["iphone", "android", "ipod"];
        for(o of os){
            // os 배열에 있는 문자열이 userAgent에 포함되었는지 여부를 확인
            if(navigator.userAgent.toLowerCase.indexOf(o) >= 0){
            	// 배열에 포함된 운영체제에서 접속했을 때 수행할 작업
                break;
            }
        }

• •  
• history 객체
  • 이전에 접속한 URL에 대한 정보를 가진 객체
  • back이나 forward 같은 메서드를 이용해서 이전이나 이후로 이동하는 것이 가능
  • go(인덱스)를 이용해서 이동하는 것도 가능

■ DOM (Document Object Model)

- HTML Body에 표시되는 태그들을 JavaScript에서 가져와서 사용하도록 만든 것

• document 객체
  • document는 HTML 내의 Body에 관련된 정보를 제공하고 작업을 수행할 수 있도록 해주는 객체
  • document.body 는 Body 태그 임
  • 프로퍼티
    • referrer : 이 곳에 다른 곳에서 링크를 선택해서 온 경우 다른 곳의 URL
      • "여기 어떻게 왔냐"라는 말임
    • cookie : 쿠키에 정보를 저장할 수 있도록 해주는 속성
      • http나 https 통신은 상태를 유지하지 않음
      • 한 번 요청을 하고 응답을 받으면 연결이 끊어짐.
      • 클라이언트의 브라우저에 저장해두고 클라이언트가 서버에게 요청을 할 때 마다 보내는 기술
      • 세션 : 서버에 저장해두고 서버에서 사용하는 기술
      • 최근 서버와 클라이언트 애플리케이션을 분리해서 구현하는 경우가 많은데 이렇게 되면 세션은 사용하지 못함
      • 쿠키 대신 HTML5 API에서 제공하는 로컬 스토리지 사용을 권장함
    • 메서드
      
      • body에 문자열 출력 - 태그가 적용됨.
        • write(문자열)
        • writeln(문자열)
• DOM 객체 찾아오기
  • getElementById(아이디) : 아이디에 해당하는 객체를 찾아와서 리턴 - 1개만 리턴
  • getElementsByName(이름) : 배열로 리턴
  • getElementsByTagName(태그) : 배열로 리턴
  • getElementsByClassName(클래스) : 배열로 리턴
• DOM 객체의 공통 속성과 메서드
  • appendChild(), removeChild(), createElement(), createTextNode(), getAttribute(), setAttribute()
    • document.getElementById("아이디").setArrtibute("src", 값);
    • document.getElementById("아이디").src = 값;