[웹 프로그래밍] Json string 변환, 웹브라우저 객체, 이벤트 컨트롤

티스토리 뷰

프로그래밍 공부/에이블스쿨

[웹 프로그래밍] Json string 변환, 웹브라우저 객체, 이벤트 컨트롤

sikaro 2024. 5. 10. 14:39

Json object

웹상에서 데이터를 주고 받는 용도로 사용되는 데이터 포맷

웹에서는 객체 자체를 주고 받을 수 없다.

클라이언트가 있고 서버가 있을 때, 브라우저에서 자바스크립트로 오브젝트를 전달하면 WAS에서 오류가 난다.

주고 받을 때 네트워크에서는 string 데이터 타입을 쓰기 때문이다.

그래서 Json 포맷의 object를 string으로 바꿔서 보내고,

또 string으로 받은 것을 Json 포맷으로 다시 변환해야 한다.

그래서 이 방법을 알고 있어야 한다.

Json 포맷의 object를 string으로 바꾸기

var data = {name: 'peter', age:29, skills: ['code', 'read']};
var json_str = JSON.stringify(data);
console.log(typeof data, typeof json_str)
console.log(data,json_str)

>object string
>{ name: 'peter', age: 29, skills: [ 'code', 'read' ] } {"name":"peter","age":29,"skills":["code","read"]}

JSON.stringify를 이용해서 string으로 변환한다.

String을 Json object로 바꾸기

json_obj = JSON.parse(json_str);
console.log(typeof json_obj);
console.log(json_obj, json_obj.name);

>object
{ name: 'peter', age: 29, skills: [ 'code', 'read' ] } peter

비동기 통신을 할 때 이런 방식을 사용한다.

웹 브라우저 객체

파이썬이라고 하는 문법이 있다.

이 syntax(문법)으로 WAS,DA,해킹, Windows app도 만들 수 있다.

자바스크립트도 마찬가지로 WAS,mongodb sql, web 브라우저에서도 사용할 수 있다.

그 중에서 웹 브라우저로 사용을 할 때는 pandas, 사이킷런처럼 기능들을 모아놓은 게 웹 브라우저 객체이다.

크게 3가지가 있다.

window : 전역 객체. 모든 변수와 함수와 객체를 저장하는 객체

location : url 데이터를 저장하는 객체

document : 페이지 문서에 대한(HTML) 데이터를 저장하는 객체

이 3가지 객체가 기본적으로 주어지고 이 객체를 통해서 사용할 수 있다.

개발자 도구에서 콘솔을 열어보자(f12+esc)

var data=10;
console.log(data);
window.data

이렇게 쓰면, window 안에는 전체 함수와 변수와 객체가 들어간다.

한마디로 window라는 박스 안에 해당 데이터들이 들어간다고 보면 된다.

해당 영역에서 어떤 함수가 있는지 확인을 하려면 window 객체를 실행해보면 된다.

lcation 명령어

location 명령어도 똑같다.

location을 쓰면 여러개의 url들이 쓴다.

href = 현재 url

도메인, 경로, 프로토콜,쿼리 등등의 경로를 알 수 있다.

사용방법은 이렇다.

location.href = 'https://kt.com'

로케이션 객체의 경로 데이터가 바뀌므로 페이지가 이동된다.

document

document는 안에 html 코드가 들어 있다.

document.tilte => 헤더쪽에 있는 타이틀이 출력된다.

문서에 대한 정보를 가져올 때 사용한다.

이런 자바스크립트 코드를 이용해서 이벤트 컨트롤을 할 수 있다.

cdn js jQuery를 사용한다.

https://cdnjs.com/libraries/jquery

서버에 jquerymin.js를 쓴다.

min의 의미는 이렇다.

자바 스크립트 파일이 작을수록 서버 비용이 적게 든다.

넣으면 네트워크에서 변한다.

동기방식/ 비동기 방식

동기방식 - 받은 후에 받는다. 결과 데이터를 받는 걸 확인해야 코드가 실행되기 때문에 신뢰성이 보장된다.

비동기방식 - 동시에 받는다. 그래서 결과에 대한 데이터 보장을 하지 않는다.

Ajax가 비동기 방식이다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>
      <input class="itxt" type="text" value="KT" />
      <p class="ptxt">KT Aivle!</p>
      <button class="txt_btn">Click</button>
    </div>
    <hr />
    <div>
        <p class="shtxt">Javascript</p>
        <button class="show">show</button>
        <button class="hide">hide</button>
    </div>
    <div>
        <input type="text" class="addr_txt">
        <button class="addr_btn">Addr</button>
    </div>

  </body>
  <!-- 보통의 경우에는 자바스크립트 코드를 위에 써주지는 않는다. 
  화면이 나오지 않았는데 이벤트를 입힐 수 없기 떄문 -->
  <script
    src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
     console.log('hello js!');
     var data1 = document.getElementsByClassName('itxt');
     console.log('data1', data1[0].value);
     <!-- getE 까지만 치면 해당하는 것들을 불러올 수 있다. -->
     var data2 = document.querySelector('.ptxt');
     <!-- querySelector를 쓰면 css selector로 가져올 수 있다. 앞에 .p와 같은 문법을 붙여준다. -->
     console.log('data2', data2.textContent);
     /*
     var btn = document.querySelector('.txt_btn');
     btn.addEventListener('click',function(){
         <!-- 이벤트가 발생하는 걸 모니터링한다. 해당 함수를 실행한다.-->
         var data3 = document.querySelector('.itxt');
         <!-- 인풋창에 입력된 데이터가 가져와진다. -->
         console.log(data3.value);
         alert(data3.value);
     });
    */
     $(document).ready(function(){
         $('.txt_btn').on('click', function(){ //함수를 실행
             var data4 = $('.itxt').val();
             console.log(data4);
             alert(data4);
             $('.ptxt').text(data4);
         });

         $('.show').on('click',function(){
            $('.shtxt').show();
         });
         $('.hide').on('click',function(){
            $('.shtxt').hide();
         });

         $('.addr_btn').on('click',function(){ //버튼에서 누르면 request response를 한다.
            var addr = $('.addr_txt').val();
            console.log(addr);
            var url = 'https://apis.zigbang.com/v2/search?leaseYn=N&q=' + addr + '&serviceType=원룸';
            $.getJSON(url, function(response){
                console.log(response.items[0]); //함수를 받아서 response 객체로 출력된다   
            })
         });

                  
     })



  </script>
</html>

다음과 같이 활용한다.

시카로의 공부방

티스토리 뷰