[Today I Learn] 2022.05.24

TIL

 

jQuery

- 입력양식에 대한 이벤트

• change() : 내용을 변경할 때
• focus()
• focusin() : 초점이 맞춰지기 바로 전에 발생
• focusout() : 초점이 사라지기 바로 전에 발생
• blur() : 초점이 사라지면 발생
• select() : 선택할 때
• submit() : submit 버튼을 누를 때 
• reset() : reset 버튼을 누를 때 

- 이벤트 연결 종류

• bind() : 현재 존재하는 문서 객체에만 ex) bind("click", function() {});
• unbind() : bind()로 연결된 이벤트 제거
• on() : bind와 비슷하게 이벤트 연결. 동적으로 추가된 요소들에게 이벤트 추가가 가능
  ex) $(document).on("click", "#parent div", function() {}); : 동적으로 생성된 생성자를 선택하기 위해서는 $(document).on()을 사용해야 한다 (← bind로는 동적 요소 선택 불가능)
• off() :  on으로 걸린 이벤트를 끄기

 

• ajax
  ajax : 자바스크립트의 라이브러리 중 하나. 비동기식 통신이 가능(전체 페이지를 새로고치지 않고 일부만을 위한 데이터를 로드가 가능, 리소스 낭비 방지)
• xml
  데이터 전송 형식. 태그로 데이터를 표현
• json
  데이터 전송 형식. 최근에는 xml을 대체하는 경향. 자바스크립트를 이용해서 객체를 쉽게 변환할 수 있다. 특정 언어에 종속되지 않기 때문에 대부분의 프로그래밍 언어에서 데이터 핸들링이 가능. 
• XMLHttpRequest
  http를 통해서 쉽게 데이터를 받을 수 있는 객체를 제공. 웹페이지 일부만 갱신하는것 가능
  • onreadystatechange 속성 : 객체의 현재 상태에 따라 반환하는 값이 0~4의 값을 갖는다.
    서버 상태를 나타내는 Status 프로퍼티와 함께 데이터 전송이 올바르게 되었는지 확인할 때 사용할 수 있다.
  • request.open("전송방식", "경로", "비동기 사용여부") :
    true : 동기. 요청이 전부다 처리될 때까지 기다림
    false : 비동기. 요청 완료를 기다리지 않고 처리함 

// XMLHttpRequest 객체 생성
var request = new XMLHttpRequest();
request.open('GET', "/data/html', false);

// Ajax 수행
request.send();

// 출력
document.body.innerHTML += request.responseText;

 

function callHTML2() {
    var request = new XMLHttpRequest();

    request.onreadystatechange = function() {
        // readyState → 요청에 대한 상태
        // status → 응답 상태
        if (request.readyState == 4 && request.status == 200) {
            var data = request.responseText;

            document.getElementById("result").innerHTML = data;
        };
    };

    request.open('GET','data/data1.html',true);
    request.send();

};

 

What I did

1. jQuery 학습
2. 데이터 파일 형식 ajax, xml, json 
3. 개인 노트북, 학원 컴퓨터 환경 설정
4. 개인 포트폴리오 작업 : 로그인 완료 시 변경사항, 자유게시판 게시글(작업중) 
   
   

Memo

• 생각없이 프로젝트 명 한번 바꿨다가 톰캣이 망가져서 고생했다..
  프로젝트 명을 바꿀 때는 영향이 어디까지 미칠지 꼭 생각하도록 하자..
  * 특히 깃과 연결된 작업물일수록 주의가 필요하다