👁‍🗨javascript(js로 html태그 생성,Ajax, sticky 포지션, switch문법)

자바스크립트로 html생성하는 방법

• createElement 사용하면 코드가 길고 복잡해짐

• insertAdjacentHTML()함수를 사용하기도 하는데

  • insertAdjacentHTML()함수란 요소 안에 문자형 html을 추가해주세요 라는 의미의 함수.

  <div id="test">
  
  </div>
  <script>
    const 템플릿 = '<p>안녕</p>'
    document.querySelector('#test').insertAdjacentHTML('beforeend', 템플릿)

  • ( ) 안에 beforeend 는 추가할 위치를 나타내는데 여기서는 안쪽 맨밑에 템플릿라고 하는 변수를 추가!

  • 만약 기존에 있던 html태그를 없애고 새로 추가하는 것만 넣고 싶다면 innerHTML을 쓰면 됨.

---

Ajax

• 서버와 Ajax로 통신하는 방법에 대해 알아볼거임.

  • 1. 어떤 데이터인지? (데이터의 URL) / 2. 어떤 방식으로 통신을 할지 기재 (GET OR POST)

    • 서버란? 데이터를 달라고 요청하면 데이터를 보내주는 프로그램이라고 이해합시다.
    • get은 주로 데이터를 읽고 싶을 때, post는 데이터를 보낼 때 주로 사용.

  • GET 요청하는법 : 브라우저 URL창에 주소치고 엔터치는 것과 같은 동작방식임.

  • POST 요청하는 법 : <form action="url" method="post"></form>

  • 위 2가지 방식의 단점!! : get/post 요청하면 브라우저가 새로고침됨.

  • 그러나 그럴때 Ajax를 활용해서 새로고침없이 get,post 요청 가능!!!

• Ajax로 GET 요청하기

  $.get('url').done(function(data){
  	console.log(data)
  })

  • GET요청이 성공했을 시 done( )안에 있는 코드를 실행해달란 의미임.
  • get요청으로 받아온 데이터는 done( ) 안에 함수 파라미터에 잘 저장이 됨.

• Ajax로 POST 요청하기!

  $.post('url', {name:'kim'}).done(function(data){
  	console.log(data)
  })

  • get 요청방식과 거의 동일하나 url 뒤에 2번째 파라미터로 내가 보낼 데이터를 넣을 수 있다는 차이점이 있음.

• Ajax 실패 시 특정 코드실행방법

  $.get('url').done(function(data){
  	console.log(data)
  })
  .fail(function(){
  	console.log('실패')
  })

  • .fail( )을 done( ) 과 같은 방식으로 써주면 됩니다~

• fetch를 활용한 Ajax

  • fetch로 get 요청코드 만들기

    fetch('url').then(res => res.json()).then(data=>{
    	console.log(data)
    })
    .catch(error => {
    	console.log(error)
    })

    • 원래 서버와 데이터를 주고 받으려면 문자만 주고 받을 수 잇는데, array나 object를 보내고 싶으면 " "를 쳐서 문자처럼 만들어야 함.
    • "{"price: 4000"}" 과 같은 형식을 JSON이라고 함.

    • 그러나 JSON으로 변환하면 문자이기 때문에 원하는 자료만 뽑아쓰기가 어려움.
    • 그래서 JSON을 object로 바꿔주는 .then(res => res.json()) 이 코드도 같이 들어감.

---

position: sticky

• CSS 문법이지만 참고용!

  • 스크롤이 되었을 때 화면에 고정되는 요소를 만들고 싶을때 사용하는 css 속성임.
  • position: fixed는 항상 화면에 고정이 되는 요소를 만들 때 사용한다고 배웠는데 이 속성과의 차이는
  • position: sticky는 스크롤이 되어서 이 요소가 화면에 나오면 고정시킨다는 특성을 가짐.

  💥 주의사항!!

  • 스크롤을 할 만한 부모 박스가 있어야 하며,
  • top 등 좌표속성과 함께 써야 제대로 보임.

  .image {
  float: right;
  width : 400px;
  position: sticky;
  top: 100px;
  }

  • 맨위에서부터 100px 위치에서 고정이 됨.
  • 그리고 부모박스를 넘어서 스크롤 되면 이미지도 같이 사라짐!

---

Switch 문법

• 간혹 조건문 작성 시 if문대신 switch 사용

  let 변수 = 2 + 2
  switch(변수){
  	case 3:
    	alert('변수가 3이네요');
        break
    case 4:
    	alert('변수가 4이네요');
        break
    default:
    	alert('아무것도 해당안됨')
        break
  }

  • if와의 차이점 : if는 다양한 조건식이 가능함.
  • 그러나 switch는 변수 1개만 테스트가 가능함.(등호비교 밖에 안됨..)
  • defalut는 else와 비슷한 개념이며,
  • break는 실행을 중지해달라는 의미. 만약 브레이크가 없으면 아래 코드들도 계속해서 실행됨. ㅠㅠ

• 간단한 예시(심리게임)

  • 물에 빠지면 누구를 구할지에 따라 각기 다른 alert 띄우기.

    <div id="quiz">
    <h4>물에 빠지면 누구먼저 구할 것임?</h4>
    <button>와이프</button>
    <button>부모님</button>
    <button>키우던 개</button>
    </div>
    <script>
    document.querySelector('#quiz').addEventListener('click', function(e){
     switch (e.target.innerHTML){
       case '와이프':
         alert('와이프를 좋아하시네요');
         break
       case '부모님':
         alert('효자네요');
         break
       case '키우던 개':
         alert('역시 사람보단 동물이 더 낫죠');
         break
     }
    });
    </script>