JAVASCRIPT - 중급 1편

* forEach

Array(배열)에 사용할 수 있는 반복문

"배열의 길이만큼 반복해주는 반복문"

ex )

javascript

var boxs = [ 1 , 2 , 3 , 4 , 5 ];
var i = 0;
boxs.forEach(function() {
  console.log(box[i]); // result : 1을 5번 출력
})

* for in

Object(객체)에 사용할 수 있는 반복문

"객체의 요소만큼 반복해주는 반복문"

ex )

javascript

var obj = { name : 'kim', age : 20 }
for ( var key in obj ) {
          console.log(key); // result : name , age
          console.log(obj[key]); // result : 'kim' , 20
        }

* switch ~ case - default

if ~ else if - else 와 동일하게 조건문을 통해 해당하는 코드를 실행하는 조건문

※ switch ~ case 뒤에는 break를 사용해서 조건문을 탈출해야 다음 case의 코드까지 실행하지 않는다.

ex)

document.querySelector("#quiz").addEventListener("click",function(e) { // id가 quiz인 요소를 클릭했을때
  switch (e.target.className) { //파라미터 값의 클래스명이
    case "1": // "1"인 경우
       		  // else if ( e.target.className == "1") 와 동일한 코드
      alert("1번 선택");
      break // break는 switch 문을 탈출하는 코드
    case "2": // "2"인 경우
      alert("2번 선택");
      break
    default:
      alert("잘못 클릭하셨습니다")

* arrow function

function 키워드 대신 () => 를 사용한 콜백 함수

"파라미터가 1개라면 () 생략 가능"

"함수 중간에 return 한 줄 시 {}와 return 생략 가능"

ex )

javascript

var pants = [28, 30, 32];
pants.forEach(function(a){ console.log(a) });
pants.forEach((a) => { console.log(a) });

---

일반 function과 arrow function의 차이점

함수 안에서 this를 써야할 경우

일반 function : 함수 안에서 this를 알맞게 재정의

arrow function : 재정의 하지 않고 함수 밖에 있는 this를 사용

* Ajax

서버 : 유저가 데이터를 달라고 요청시 보내주는 간단한 프로그램

요청할때

1. 어떤 데이터인지 url로 기재

2. 어떤 방법으로 요청할건지 결정 ( GET / POST )

주의점 : GET / POST 요청시 브라우저가 새로고침됨

따라서 "Ajax"를 사용하여 새로고침없이 데이터 요청

GET 요청

주로 서버에 있던 데이터를 읽고 싶을때 사용

juqery

$.get('https://codingapple1.github.io/hello.txt')
  .done(function(data){ // 성공
    console.log(data)
  })
  .fail(function(error){ // 실패
    console.log('실패함')
  });

POST 요청

주로 서버로 데이터를 보내고 싶을때 사용

javascript

fetch('url~~')
  .then(res => res.json())
// 서버 와 데이터 주고 받을 때 문자만 주고 받을 수 있기 때문에 JSON으로 변경하여 주고 받음
  .then(function(data){ // 성공
    console.log(data)
  })
  .catch(function(error){ // 실패
    console.log('실패함')
  });

juqery

$.post('url~~', 보낼 데이터 자료)
  .done(function(data){ // 성공
    console.log(data)
  })
  .fail(function(error){ // 실패
    console.log('실패함')
  });