2021.07.29 수업일지

- JSON(JavaScript Object Notation) ; 자바스크립트 객체 표기법 *****

클라이언트와 서버에서 데이터를 주고 받을 때 사용한다.
데이터가 가벼워 전송이 빠르다.
모든 프로그래밍 언어에서 사용 가능하다.
보안이 가종되지 않는 데이터의 경우 RestFul을 이용한 데이터 전송 시 JSON을 주로 사용 한다.
JSON은 JS Obj 형식의 문자열이다.

https://www.json.org/json-ko.html

JSON

JSON (JavaScript Object Notation)은 경량의 DATA-교환 형식이다. 이 형식은 사람이 읽고 쓰기에 용이하며, 기계가 분석하고 생성함에도 용이하다. JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1

www.json.org

32_json

1. 간단한 JSON 예제

    <script>
        let jsObj1={"id":"aaa","age":30};
        // let json='{"id":"aaa","age":30}';
        let json = JSON.stringify(jsObj1); // jsObj1 -> json
        console.log(jsObj1);
        console.log(json); // 제이슨은 문자열이라 위와 같이 OBJ로 볼 수 없다.
    </script>

2. 속성 넣기 복습

        // 1. 속성 넣기
                    //{속성명:값,속성명:값};
        let jsObj1={"id":"aaa","age":30};
        let jsObj2={"id":"bbb"};
        jsObj2.age=30;
        jsObj2["age"]=40; // [변수]
        console.log(jsObj2);

3. 속성 배열에 넣기 복습

        // 1. 속성 넣기
                    //{속성명:값,속성명:값};
        let jsObj1={"id":"aaa","age":30};
        let jsObj2={"id":"bbb"};
        jsObj2.age=30;
        jsObj2["age"]=40; // [변수]
        console.log(jsObj2);

        // 2. 객체 배열에 넣기
        // let objArr = [jsObj1,jsObj2];
        let objArr = [];
        objArr.push(jsObj1); // 배열에 하나씩 push
        objArr.push(jsObj2);
        console.log(objArr);

4. 배열을 객체에 넣기

        // 3. 배열을 객체에 넣기
        let jsMem={member:objArr};
        console.dir(jsMem);

5. 반복문을 통한 id, age 각각 받아서 출력

        // 4. 반복문 id, age 각각 출력
        for(let i in jsMem.member){
            for(let key in jsMem.member[i]){
            console.log(jsMem.member[i][key]); 
            // [key]는 배열이 아니라 속성을 받기 위한 도구다.
            }
        };

        // 4. 반복문 id, age 각각 출력
        // for(let i in jsMem.member){
        //     for(let key in jsMem.member[i]){
        //     console.log(jsMem.member[i][key]); 
        //     // [key]는 배열이 아니라 속성을 받기 위한 도구다.
        //     }
        // };

        for(let obj of jsMem.member){ // of 객체가 아니라 값이 넘어옴
            for(let key in obj){
                console.log(obj[key]);
            }
        }

33_json2

<head>
    <meta charset="UTF-8">
    <title>JSON 2</title>
    <style>
        textarea {
            resize: none;
        }
    </style>
</head>

<body>
    <textarea id="jText" cols="60" rows="10">
        {
            "employee":[
                {"firstName":"Jhon","lastName":"Doe"},
                {"firstName":"Anna","lastName":"Smith"},
                {"firstName":"Peter","lastName":"Jhones"}
            ]            
        }
    </textarea>

    <br>
    <button id="jWrite">입력</button>
    <br>
    <input id="eNum" type="text" value="" />
    번째 사원 이름
    <button id="jRead">추출</button>
    <br>
    <h2 id="result"></h2>
    <script src="jsonData.js"></script>
</body>

+ jsonData.js

/*변수 지정*/
//텍스트 에어리어
var jsonText = document.getElementById("jText"); 
//불러올 사원 순서 입력
var employeeNum = document.getElementById("eNum");

//js 객체 만들기 버튼
var writeBtn = document.getElementById("jWrite");
//js 객체 읽기 버튼
var readBtn = document.getElementById("jRead");

//결과값 출력 요소
var nameResult = document.getElementById("result");

//js 오브젝트
var jsObj;

/*기능 구현*/
//1. 텍스트 에어리어에 있는 값을 제이슨 객체로 만들기
writeBtn.addEventListener("click",function(){
    var jsonValue = jsonText.value;//json형태의 문자열
    console.log(jsonValue);
    /*js 오브젝트로 변환*/
    jsObj = JSON.parse(jsonValue);
    console.log(jsObj);
});

//2. 순서를 입력받아 해당 속성의 값을 불러오기
readBtn.addEventListener("click",function(){
    var num = employeeNum.value - 1;
    console.log("idx=", num);
    
    nameResult.innerHTML= "이름 : "+jsObj.employee[num].firstName
    +", 직업: "+jsObj.employee[num].lastName;
});

34_json3

<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>
    <div id="showList" style="border:1px solid blue"></div>

    <script>
        let addBtn = document.getElementById("add");
        // 최상의 객체
        let obj = {};
        // employee 속성에 대한 배열
        let list = [];
        let jsonText;

        addBtn.addEventListener('click', addVal);
        function addVal() {
            let person = {};
            let first = document.getElementById("fn").value;
            let last = document.getElementById("ln").value;

            person.firstName = first;
            person.lastName = last;
            list.push(person);

            obj.employee = list;
            console.log(obj);

            jsonText = JSON.stringify(obj);
            document.getElementById("result").innerHTML = jsonText;

            // div 출력
            let str="";
            for(let i in obj.employee){
                for(let key in obj.employee[i]){
                    str+=(key+" : "+obj.employee[i][key]+" ");
                }
                str+="<br>";
            }
            document.getElementById("showList").innerHTML = str;
        };
    </script>
</body>

- jQuery *****

https://developers.google.com/speed/libraries#jquery

Hosted Libraries | Google Developers

A stable, reliable, high-speed, globally available content distribution network for the most popular open-source JavaScript libraries.

developers.google.com

00_intro

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>jquery intro</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        // 1. 개념
        // $, ready ; jQuery
        // body의 onload보다 아래가 더 좋다. 일반적으로 제약이 없이 사용가능하다.
        // $(document).ready(function(){
        //     alert("jQuery hi ~");
        // });
        // 위를 줄여서 아래와 같이 쓴다.
        // $(function(){
        //     alert("jQuery hi ~");
        // });

        // $ == jQuery 와 같다.

        // 2. 간단한 메서드
        // 내용추가
        // $(function () {
        //     $('#btn').click(function () {
        //         $('#result').append("내용추가 <br>")
        //     });
        // });

        // 덮어쓰기
        $(function () {
            $('#btn').click(function () {
                // $('#result').html("새로 쓰기 <br>")
                console.log(this); // js로 현재객체
                console.log($(this)); // jQuery로 현재객체
                $('#result').html("덮어 쓰기 <br>").css('background-color','red');
            })
        });
    </script>
</head>

<body>
    <button id="btn">추가</button>
    <div id="result">이전 쓰기</div>

</body>

01_intro2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery-3.6.0.js"></script>
</head>
<body>
    <input type="text" id="txt" value="Hello">
    <button id="btn">클릭</button><br>
    <input type="checkbox" id="cb">
    <script>
        $(function(){
            $('#btn').click(function(){
                // .val("값") 값을 넣으면 set, .val() 값을 안넣으면 get
                console.log($('#txt').val("Bye").val());
                $('#txt').attr('type','password');
                console.log($('txt').attr('type'));
                // prop : checked, readonly, disabled
                $('#txt').prop('disabled');
                console.log($('#txt').prop('disabled',true));
                $('#cb').prop('checked');
                console.log($('#cb').prop('checked',true))
            });
        });
    </script>
</body>
</html>

저작자표시

'ICIA 수업일지' 카테고리의 다른 글

2021.08.02 수업일지(HTML, CSS, JAVA SCRIPT,MySQL) (0)	2021.08.07
2021.07.30 수업일지 (0)	2021.07.31
2021.07.28 수업일지 (0)	2021.07.31
2021.07.27 수업일지 (0)	2021.07.31
2021.07.26 수업일지 (0)	2021.07.31

나의 웹 공부 이야기

2021.07.29 수업일지

- JSON(JavaScript Object Notation) ; 자바스크립트 객체 표기법 *****

- jQuery *****

'ICIA 수업일지' 카테고리의 다른 글

티스토리툴바

2021.07.29 수업일지

- JSON(JavaScript Object Notation) ; 자바스크립트 객체 표기법 *****

- jQuery *****

'ICIA 수업일지' 카테고리의 다른 글

관련글

티스토리툴바