개발자 던킨

JS 비동기 통신

- (Asynchronous Javascript and XML)은 웹 페이지의 이동없이 필요한 데이터만 전송하는 기술입니다.

일반적인 경우 데어터 처리는 요청 순서대로 진행하지만 AJAX 는 순차적으로 진행하지 않습니다. 

이런 방식을 비동기 방식이라고 합니다. 

자바스크립트의 비동기 방식은 상당히 까다로운데, 이를 간단하게 사용할수 있게 해주는 최신 자바스크립트 API인 fetch API를 이용하도록 하겠습니다.

API는 중간에서 작동하는 특정기능이라고 할수있습니다. 

동기적이라는거는 한가지 작업을 순서대로 진행합니다. 

원리를 보면 어디인가에 파일을 가져옵니다(지구반대편이라고도 할수있습니다.) 아무리 빨라도 1초이상은 걸립니다.

동기적으로 실행시키면 1다음에 2번에서 펜딩으로 3초 혹은 한시간 등등 걸릴수도 있습니다 (사람들이 몰려서 서버가 불안정하거나해서)

그래서 1 다음에 2번으로 넘어갈때 펜딩으로 무한정 으로 대기할수도 있어서

비동기적으로 실행을 시킵니다.

promise라는 함수로 실행해서 1다음에 3번으로 넘어가고 2번에서 답을 받으면 그 후에 돌아옵니다. 

 var pro = fetch("hi.text");
        pro.then(function(response){
            console.log(response);

        })
 console.log(1)
        fetch("hi.text").then(function(response){
        console.log(2)

  })
  console.log(3)
        console.log(31)
        console.log(32)

답은 

이렇게 숫자2가 맨 마지막에 나오는것을 볼수 있겠습니다.

fetch를 사용하면 promise객체를 받는다.(promise에는 요청에 대한 상태정보가 있습니다. 

promise안에 then함수안에 콜백함수를 넣으면, 콜백함수의 첫번째 매개변수에 응답에 대한 내용을 넣어줍니다.

단 then()은 시간이 오래걸릴수 있기 때문에 비동기적으로 실행됩니다. 

XML 형식으로도 간단하게 변경하여 만들수있습니다. 

xml파일은 문자열의 형식으로 일단 변경을 해주어야합니다. 

변경하는 방법은 new DOMparser()을 써서 문자열의 형태로 만들어줍니다. 

그리고 

response를 콘솔로 찍어보면 status:200 이 라는 값이 나오느데 보면 뜻은 성공이라는 것이다.  그외에 값들중엔 404 혹은 505이 나올수 있습니다.

자바스크립트의 두번째 강력한 기능

Browser Object Model VS Document Object Model

BOM 은 브라우저 객체 모델이라 하며, 내장객체들을 의미합니다.

window, location, history,document 등이 포함되어있습니다.

DOM은 문서 객체 모델이라 하며, document객체를 의미합니다.

DOM은 요소(element)의 선택, 삭제 생성 등을 위해 사용합니다. 

DOM객체를 이용한 요소의 접근은 자바스크립트의 강력한 기능이며 반드시 외워야 하는 기능입니다. 

DOM

<button id="check1>체크박스요소 확인</button><br>
<script>
var check1 =document.getElement("check1")
check1.onclick=function(){


}							많이 사용되는 id취득방법 요소를
							check1에 저장하고 기본 이벤트 모델 사용

노드 선택 querySelectAll()

예약 버튼을 클릭시 좌석이 최소 한개 이상 체크 되게 만들고 갯수가 없다면 경고창 을 띄우고

체크되어 있다면 배열에 체크된 좌석을 추가합니다.

마지막으로 JSON 형태의 문자열로 변환 시켜줍니다.

<form >
        좌석:
        <input type="checkbox" name="seat" value="1">1
        <input type="checkbox" name="seat" value="2">2
        <input type="checkbox" name="seat" value="3">3
        <input type="checkbox" name="seat" value="4">4
        <input type="checkbox" name="seat" value="5">5
        <input type="checkbox" name="seat" value="6">6
        <input type="checkbox" name="seat" value="7">7
        <input type="checkbox" name="seat" value="8">8
        <input type="checkbox" name="seat" value="9">9

        <br>
        <button type="button" id="btn">예약하기</button>
    </form>
    
    좌석과 버튼을 만들었습니다. 
    
    var btn=document.getElementById("btn") //document.getElementBtId 를 
    //통해 아이디값을 가져옵니다.
    btn.onclick=function(){ //아이디값을 대입한 변수에 onclick 을 만들고? 함수를 대입합니다.
    
    var name=document.getElementsByName("seat"); //폼 안에 input태그에서 getelementsbyName 을 
    //통해 name에 저장된 seat값을 가져옵니다.
    //문제에 배열에 체크된 좌석을 추가하라고했으니 배열을 생성해줍니다.
    var arr=new Array();
    for(var i=0; i<name.length; i++){
    console.log(name[i].checked) //.checked 를 통해서 name에 길이만큼 잘 돌아가는지 확인합니다.
    //checked값이 있으면 true 없으면 false로 나타납니다. 
    
  //체크박스를 클릭시 배열에 값을 저장하는 구문을 만들겠습니다.
  if(name[i].checked==true){
  arr.push(name[i].value)
  }//arr.push 는 배열에 값을 집어넣는다 입니다. 배열값에 name[i].value를 집어 넣습니다. 
  }
  if(arr.length==0){
  alert("경고창")
  }else{
  console.log(arr)
  }
  console.log(JSON.stringify({value:arr}))
  
  //배열안에 값이 없다면 체크박스를 클릭하지 않았다는 뜻이므로 경고창을 띄어줍니다 그리고 배열을 띄웁니다.
 // json으로 문자열을 만들기로 하였기에 stringify를 씁니다 ()안에 중괄호를 넣고 key 값을 입력합니다.
  //key:value 입니다 .

이벤트란? 

화면에서 클릭이나, 동작시 발생하는 동적인 기능입니다.

자바스크립트의 첫번째 강력한 기능 이며 사용방법만 암기하면 충분합니다.

태그와 스크립트의 이벤트를 연결하는 방식에는

인라인 이벤트모델, 기본 이벤트 모델, 표준 이벤트 모델 이 있으며 이벤트 앞에  on을 붙입니다.

인라인 이벤트 모델

- 인라인 이벤트 모델은 html 요소에 직접 이벤트를 연결하는 방식입니다. 

태그 안에 이벤트 종류가 들어가며 on 이 붙습니다. 

onclick 같은 이벤트 안에는 모든 스크립트 코드가 들어갈 수 있습니다. 

예시
<button onclick="console.log('출력')">

예시2
<button onclick="check()">인라인이벤트</button>

<script>
function check(){
alert("인라인이벤트)";} </script>

1. onclick 은 일반적으로 가장 많이 사용되는 이벤트 입니다. 

2. 동일한 함수에 여러 이벤트를 걸어줄 수 있습니다.

3.이때 어떤 이벤트에 대한 동작인지 확인하는 키워드는 this 입니다. 

 <h3>여러버튼에 인라인 이벤트 적용하기</h3>
    <button type ="button" onclick="check2(this)" id="a">1</button>
    <button type ="button" onclick="check2(this)" id="b">2</button>
    <button type ="button" onclick="check2(this)" id="c">3</button>
    <button type ="button" onclick="check2(this)" id="d">4</button>
    
     <script>
 function check2(x){
             //console.log("이벤트실행됨")
            console.log(x)
            console.log(x.type)    
            console.log(x.id)

            
            x.innerHTML =x.id; //
        }
     </script>

인라인 이벤트 예시입니다 화면에서는 어떻게 나오는지 보겠습니다. 

숫자 1을 누르면 x.innerHTML=x.id 로 인해 1에 id값으로 변경해버립니다. 그리고 onclick 구문안에  this 를 넣으므로 같은 변수이름이지만 확연하게 알수있습니다. 

기본 이벤트 

<script>
window.onload=function(){
function test(){
console.log("출력");
}
var bt =document.getElementById("bt")' <-----------요소취득 명령
bt.onclick=test;}           <----------------------
</script>
<button id="bt">인라인이벤트</button> <-------취득할 요소

앞에서 확인 했던 익명함수 방식은 이렇게도 사용가능 합니다.

단 함수 호출시 () 를 붙이지 않습니다

() 를 붙이면 코드 실행시 무조건 함수가 한번 실행 되 버립니다.

표준 이벤트

<script>
window.onlod=fuciton() {

var bt=document.getElementById("bt");				<---취득할 요소
function view(){
console.log("출력");}
bt.addEventListener('click',view);}				<-----이벤트에 on을 붙이지 않습니다.
</script>
<button id="bt">인라인 이벤트</button>

표준이벤트로 구성된 쉬운 코드입니다. 

코드를 실행하면 두개의 바가 있는데 클릭시 이동할래라는 문구가 뜨고 확인을 누르면 연결된 사이트로 이동이 됩니다. 

alert 에서 확인은 true이고 취소는 false를 나타냅니다. 

document.getElementById는 잘 쓰여지기 때문에 외우시는게 편리합니다. 

함수(화살표 함수)

화살표 함수 

-ES6에 추가된 함수 내용으로 => 를 이용하는 함수 입니다.

var compute = function(a,b){
return a+b;
}
이게 이런식으로 바뀜니다.
var compute=(a,b)=>a+b;


var comput= fucntion(a,b){
 
 var avg=(a+b)/2;
 return avg;
}

이렇게 바뀜니다.
var compute(a,b)=>{
var avg(a+b)/2;
return avg;
}

단일 명령문일 경우{} 를 생략할 수 있습니다. 
스크립트 사용에 많은 변화를 줄 함수입니다.

즉시실행 함수

(function(){

})

즉시 실행 함수- 함수 표현(function expression)은 함수를 정의하고 ,Or 변수에 함수를 저장하고 실행하는 과정을 거칩니다.

하지만 즉시 실행 함수는 함수를 정의하고 바로 실행하여 이러한 과정을 거치지 않는 특징이 있습니다.

함수를 정의하자마자 바로 호출하는것을 즉시 실행함수라고 합니다.

사용이유?

페이지 시작시 호출할 함수를 기술합니다.

전역변수(global) 지역변수(local)