21.01.05

17887 ワード
Java Script テキストリンク

1.クッキー

- 쿠키는 웹의 사용흔적을 담기 위해 만들어 졌다.
- html간에 데이터를 주고 받을 수 없기 때문에 중간에 브라우저에 저장하는데 쿠키를 활용한다.
- 사용자PC에 저장되기 때문에 보안상 문제가 있어 중요한 정보는 저장하지 않는다. -> 중요한 정보는 내장객체인 session에 저장된다.(뒤에서 배움)
- f12를 누르면 Application에서 쿠키를 볼수 있고 Expires/Max-Age를 통해 언제까지 유지되는지도 알 수 있다.

2. JSON(Java Script Object Notation)

- 자바스크립트 Object형태로 전송을 한다는 뜻이다.
- XML과 함께 최근 데이터 전송 시 굉장히 많이 활용 된다.
- 취약점이 많기 때문에 보안이 강조되는 데이터에서는 사용하지 않는 편이 좋다.
- JSON에서 알아야 할 두 가지 자료 구조
	- var obj = { "key" : "value" };
	- var arr =[ 1 , 2 , 3 , 4 , 5 ];
- JSON은 작성 시 문법 오류가 많이 나타나며 어디서 뭐가 틀린지 말안해줌 -> 그래서 json paser online 사용
1. text -> json
    <body>
        <textarea id="jText" cols="50" rows="10">
            {
                "employee":[
                    {"firstName":"Jhone","lastName":"Doe"},
                    {"firstName":"Anna","lastName":"Smith"},
                    {"firstName":"Peter","lastName":"Jhones"}
                ]
            }
        </textarea><br/>
        <input id="eName" type="text" value=""/>번째 사원이름
        <button id="jRead">추출</button>
        <br/>
        <h2 id="result"></h2>
    </body>
- text->JSON으로 변환 하기 위해 textarea로 text영역 만들어준다
- cols : 너비,  rows : 높이
 <script>
        var btn = document.getElementById('jRead');
        var num = document.getElementById('eName');
        var content = document.getElementById('jText');
        var result = document.getElementById('result');

        btn.addEventListener('click' ,function(){
            var jsontext = content.value;//json text
            console.log(jsontext);
            var jsonObj = JSON.parse(jsontext);//text->json
            console.log(jsonObj);
            console.log(jsonObj.employee[1]);//jsonObj안에있는 1번인덱스 출력
            var idx = num.value-1;
            console.log(idx);
            //json에서 내가 원하는 데이터를 어떻게 꺼내 쓰느냐?
            result.innerHTML = 'firstName : ' +jsonObj.employee[idx].firstName
                + '/ lastName : ' + jsonObj.employee[idx].lastName;
        });
    </script>
- content의 value를 jsontext에 넣는다
- var jsonObj(변수선언) = JSON.parse(jsontext); : text를 JSON으로 변환
- JSON변수에 인덱스 지정시 원하는 데이터 출력 가능
- json으로 바꾸기전 텍스트형태
- 텍스트를 json으로 바꾼형태
2. JSON -> text
    <body>
        오브젝트 : employee<br/>
        firstName : <input id="fn" type="text"/><br/>
        lastName : <input id="ln" type="text"/><br/>
        <button id="add">리스트 추가</button>
        <p id="result"></p>
    </body>
    <script>
        var btn = document.getElementById('add');
        var first = document.getElementById('fn');
        var last = document.getElementById('ln');
        var result = document.getElementById('result');
        btn.addEventListener('click',addVal);
        // {
        //         "employee":[
        //             {"firstName":"Jhone","lastName":"Doe"},
        //             {"firstName":"Anna","lastName":"Smith"},
        //             {"firstName":"Peter","lastName":"Jhones"}
        //         ]
        //     }
        var obj={}; //최상위 오브젝트
        var arr=[];

        function addVal(){
            var person={};
            person.firstName = first.value;
            person.lastName = last.value;
            arr.push(person); //배열에 넣기
            obj.employee = arr; //employee는 내가 설정한 대로
            console.log(obj);
            var str = JSON.stringify(obj);//json - > text
            console.log(str);
            result.innerHTML = str;
        }
    </script>
- 29 , 30 ,33 : JSON->text 하기 위해선 최상위 오브젝트, 배열, 배열안에 들어갈 인덱스들에 변수 선언을 해줘야한다.
- 34 , 35 : 인덱스로 들어갈 변수에 값을 넣어준다.
- 36 : 그 값을 배열에 넣는다. (0번부터 들어감)
- 37 : 오브젝트에 배열을 넣는다.
- 39 : JSON -> text 변환
CSSの起動
[Lv-1]ビット数の追加