🐷전동준(Jeon DongJun)

Go with the flow

[web]JavaScript 정리4

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!


JavaScript 정리 4️⃣

DOM 사용 연습

  • 오늘은 이전에 알게 되었던 Document Object Model에 대해 공부했다.
  • 다양한 예제를 통해서 복습해본다.
  • 이미지를 사용해야하는 예제는 제외하고 작성했다.


엘리먼트 생성

  • 자바스크립트의 태그를 이용해 엘리먼트 객체를 생성할 수 있다.
  • HTML 문서를 작성할 때, 직접 작성하는 경우 말고도 다른 문서를 불러와 그 정보들을 내가 원하는 형태로 페이지에 나타낼 수 있어야 한다. 그럴 때 사용하는 기능이다.
  • 엘리먼트 객체를 생성, 객체에 속성을 부여, 텍스트 개체 생성 하는 document의 메소드를 사용해서 어떤 원리로 돌아가는지 이해해봤다.
  • 엘리멘트 생성 과정
    • 엘리먼트 객체 생성 : var 변수 = document.createElement('태그이름');
      • 태그 이름에는 우리가 아는 <div>, <p> 등이 들어간다.
    • 객체에 속성 부여
      • 방법1
        • var 변수 = document.createAttribute('속성이름') : 변수에 속성 객체를 만든다.
        • 속성객체.nodeValue = '적용할 속성들' : 객체가 적용된 변수에 nodeValue에 적용하고 싶은 속성을 저장해준다.
        • 엘리먼트객체.setAttributeNode(속성 객체) : 속성을 엘리먼트 객체에 적용해준다.
      • 방법2
        • setAttribute('속성이름', '속성값') : 이 메소드는 방법1처럼 속성객체를 만들고 따로 속성값을 정해줄 필요 없이 한번에 그 둘을 해결할 수 있다.
    • 텍스트노드 생성
      • var 변수 = document.createTextNode('텍스트내용') : 입력한 텍스트내용을 담고 있는 텍스트 노드를 생성한다.
  • 엘리먼트 생성하는 과정을 직접 확인해보자.

See the Pen hello by goodjeon (@goodjeon) on CodePen.

  • HTML의 바디 태그
    • 엘리먼트를 생성과정을 확인하기 위해 버튼을 만들었고 클릭 이벤트가 생길 경우 elementCreate()란 함수가 실행되도록 코드를 적어줬다.
  • JS의 스크립트 태그
    • 엘리먼트를 생성하는 함수 elementCreate()를 정의한다.
    • 엘리먼트 객체를 생성하자. 영역을 지정하는 <div>태그를 사용할 것이다.
    • div라는 변수에 엘리먼트 객체 생성 메소드를 저장해준다. 태그이름은 'div'
    • 객체에 속성을 부여하는 방법2를 사용했다. css의 style기능을 속성을 사용할 것이며, 속성값은 2px 크기의 빨간색 일반적인 라인 테두리를 div 엘리먼트 객체에 적용해준다.
    • txt라는 변수에 ‘엘리먼트 생성’ 이라는 문자열이 담긴 텍스트 노드를 생성해준다.
    • 자식노드를 추가하는 appendChild() 메소드를 사용해 div엘리먼트 객체의 하위에 텍스트 노드를 입혀준다.
    • 마지막으로 <body> 부분 가장 아래 위치에 div엘리먼트를 추가해준다.
  • 이 버튼을 누르면 버튼을 만든 부분 밑으로 정의한 div 엘리먼트가 계속 생성되는 것을 확인할 수 있다.

​


부모/자식 노드를 사용한 기능 구현

  • .appendChild(노드) : 부모 노드 하위 노드 끝에 자식노드를 추가(Append)하는 메소드

  • .insertBefore(생성할노드, 기준위치노드) : 선택자를 통해 해당 선택자보다 앞에 위치하게 노드를 생성하는 메소드

  • 이 두 가지 메소드는 DOM의 핵심 메소드다.

  • 예제를 통해서 복습해보자.

See the Pen hello by goodjeon (@goodjeon) on CodePen.

  • HTML의 바디 태그 내부

    • <h1>태그로 ‘태그 추가하기’라는 제목을 만들어줬다.
    • 버튼 3개를 만들어 줬다.
    • addAppend() 버튼은 클릭했을 때 엘리먼트를 자식 노드중 가장 마지막 위치에 생성하는 함수를 발동
    • addInsert() 버튼은 클릭했을 때 지정한 노드의 위치보다 앞에 위치하게 노드를 생성하는 함수를 발동
    • moveElement() 버튼은 클릭했을 때 다른 버튼을 눌러 특정 위치에 생성된 엘리먼트들이 순서대로 바디태그 하위의 마지막으로 옮기게 하는 함수를 발동
    • filedset의 id를 addElement로 지정했고 그 안에는 legend와 div 태그를 만들어줬다.

  • CSS style

    • 엘리먼트 생성할 때 <p>태그 엘리먼트를 생성할 것이므로
    • p 태그에 1px 굵기의 빨간색 일반 라인 테두리를 설정해줬다.

  • JS의 스크립트 태그

    • 우선 HTML에서 함수 별로 버튼 3개를 만들어 줬기 때문에 함수도 3개를 만들어줘야 한다.
    • addAppend() 함수를 정의해준다.
      • id=addElement인 fieldset의 요소를 불러와 fieldset 이란 변수에 객체로 저장해준다.
      • 변수 p에는 p태그 엘리먼트 객체를 생성해 저장해준다.
      • 생성된 객체 p에 .textContent를 사용해 텍스트 내용을 넣어준다.
      • fieldset의 하위노드에서 마지막 위치에 p객체를 이용해 노드를 생성해준다.
    • addInsert() 함수에 사용할 전역변수 count를 1로 만들어준다.
    • addInsert() 함수를 정의해준다.
      • newP는 <p>태그 이용해 생성한 엘리먼트 객체
      • fieldset은 위 함수와 똑같다.
      • newP에 .textContent를 사용해 텍스트를 넣어주고, 생성 순서를 확인하기 위해 내용에 (count++)도 추가해준다.
      • oldDiv는 fieldset 의 자식 div의 선택자다.
      • insertBefore를 사용해 oldDiv보다 newP 엘리먼트 요소가 앞에 생성될 수 있도록 한다.
    • moveElement() 함수를 정의해준다.
      • moveEle는 <fieldset> 태그의 <legened>의 다음 위치에 자리한 요소의 선택자
      • addEle 는 <body> 태그다.
      • 바디태그 하위로 moveEle로 선택된 요소들을 마지막에 위치시켜준다.

참고: childNodes와 children의 차이점은?

  1. childNodes는 요소가 아닌 비 요소 노드도 포함해준다.
  2. children은 요소 노드만 배열 형태로 반환해준다.


연락처를 입력 받아 테이블에 저장

  • <input> 태그의 텍스트 타입으로 아이디, 비밀번호, 주소, 전화번호 등 입력 값을 받아 표에 이쁘게 저장, 삭제해보자.

See the Pen hello by goodjeon (@goodjeon) on CodePen.

  • HTML의 바디태그

    • <form> 로 데이터를 전송하기 위한 폼을 만들어준다.(action 속성은 빼준다.)
    • 그 폼 안에 <table> 태그를 이용해 테이블을 만들어 준다.(id='intable’)
    • <input> 태그를 사용해 아이디, 비밀번호, 주소, 전화번호의 값을 받아준다.
    • 각 input 태그의 name은 id, pw, addr, phone으로 지정
    • 입력받은 내용들을 테이블에 추가하기 위한 추가버튼을 생성(클릭 시에 tableVal()함수 실행)
    • 테이블에 추가 했던 모든 요소를 삭제해주는 취소버튼을 생성(클릭 시에 deleteAll() 함수 실행)
    • input으로 입력 받은 값들을 나타내주기 위한 <div>와 <table>을 생성한다.
    • <div>의 id는 'addtable'이며 그 안의 테이블의 속성은 border='1' id='ctb'로 지정해준다.
    • <col>태그들로 테이블의 열의 너비를 지정해주고 아이디, 비밀번호, 주소, 전화번호, 삭제 열이름들을 테이블의 해더로 지정
    • 마지막으로 <tbody>에 id='addtr'를 지정해 추후에 input으로 받은 값들을 받아줄 것이다.

  • JS의 스크립트 태그

    • function tableVal(){}

      • doc 변수에 문서의 첫번째 form태그를 저장해준다.
      • vals 변수에는 문서에서 name이 id, pw, addr, phone 인 요소들의 value 값들을 배열 형태로 저장해준다.
      • 그리고 유효성 검사를 해줘야하는데, 유효성 검사란 우리가 웹사이트를 이용하면서 로그인을 할 때 서버에서 원하는 값이 아닌 것을 적으면 제대로 적으라고 알림창이 뜨는 경우가 있다. 그렇게 클라이언트에게 요청을 할 때 서버가 원하는 대로 받기 위해서 유효성 검사를 한다.
      • 반복문을 사용해 vals의 길이 만큼 각 요소들의 값이 null 이거나 ''(공백) 이거나 undefined(지정하지 않음)일 경우 제대로 입력했는지 다시 한번 확인해주세요라는 알림이 뜨게 작성했다.
      • ID가 addtr인 요소를 찾아 그 하위에 vals 값을 가진 행을 추가시킨다.

    • function createRow(vals){}

      • tr 변수에 tr태그 생성 객체를 저장해준다.
      • 그후 vals의 길이만큼 반복문을 실행한다.
      • 반복문의 내용은 td 라는 변수에 td엘리먼트 객체를 저장해 그 안의 텍스트내용으로 vals[i]를 저장해 주고 그 td 객체를 tr 의 자식노드로 추가해준다는 내용이다.
      • 그리고 vals 데이터 행이 addtr 테이블에 추가될 때마다 삭제 열에 삭제버튼이 생기도록 만들어 줬다.
      • 그 삭제버튼을 누르면 delRow(this)가 실행된다.

    • delRow(ele){}

      • 인수의 부모의 부모 노드를 delTr에 저장, 왜냐하면 Row가 이런 형태로 존재하기 때문이다.

      • <tr>
    <td>id값</td>
    <td>pw값</td>
    <td>addr값</td>
    <td>phone값</td>
    <td><input type='button' value='삭제' onclick='deRow(this)'></td>
</tr>

      • delRow 함수의 파라미터로 들어가는 ele가 input태그의 버튼이기 때문에 그 상위의 상위 노드는 <tr> 태그가 된다.

      • 아이디가 'addtr'인 엘리먼트 객체를 tbody에 저장

      • tbody에서 delTr인 자식 노드를 제거한다.

    • deleteAll(){}

      • 추가 버튼 옆의 삭제 버튼을 누르면 실행되는 함수로 tbody(테이블)의 자식노드가 존재하지 않을 때 까지 tbody의 마지막 노드를 제거해주는 함수다.
      • 실제로 볼때는 한번에 지워지는 것 같지만 그게 아니라 순차적으로 계속 지워지는 것이다.


Ajax

  • Asynchronous Javascript And Xml
  • 비동기식 자바스크립트와 xml
  • 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환하는 통신 기능이다.
  • XMLHttpRequest (XHR) : http를 통한 데이터 송수신 지원 객체
  • 브라우저가 가지고 있는 XHR 객체를 이용해 전체 페이지를 새로 고치지 않고 페이지의 일부만을 위한 데이터를 로드하는 기법이다.

비동기 방식

  • 웹페이지를 전체적으로 다시 로딩하지 않고 일부분만 갱신할 수 있다.
  • 동기 방식은 페이지 리로드를 통해 이미지, 스크립트 등의 리소스를 다시 불러와야 한다. 그래서 이것들이 바뀔 때마다 재요청 하면 불필요한 낭비가 생긴다.
  • 비동기 방식은 필요한 부분만 부르며 전체 페이지의 리로드를 기다려지 않고 할일을 한다.
  • 웹 페이지가 로드가 다 된 후에도 서버에게 데이터를 요청하고 받을 수 있다.

readyState (요청 상태)

  • 0 : uninitialized
  • 1 : loading
  • 2 : loaded
  • 3 : interactive
  • 4 : complete

status (요청 완료 후 상태)

  • 다양한 status가 존재하며, 대표적인 경우는 다음과 같다.

  • 200 : success
  • 400 : bad request
  • 401 : unauthorized
  • 403 : forbidden
  • 404 : not found(자주 볼수 있쥬?)
  • 415 : unsupported media type
  • 500 : internal server error
  • 보통 4xx은 클라이언트 문제, 5xx은 서버문제라고 생각하면 된다.

XMLHttpRequest 객체 메소드 예시

var xhr = new XMLHttpRequest(); // 객체 생성

xhr.onreadystatechange = function(){ // readystate라는 것이 변화할 때마다 호출(on) 된다.
    if(xhr.readyState == 4){ // readyState == 4는 complete 상태
        if(xhr.status == 200){  // stauts == 200은 success 상태
            var respXml = xhr.responseXML; // 응답XML객체를 respXMl 변수에 저장
    
        }
    }
}

xhr.open('GET','xml파일 등 경로');  // 준비단계 : 경로에 GET 방식으로 요청
xhr.send(); // 실행단계
  • 응답 XML 객체 respXml을 console.log(respXml)을 통해 확인하면 이렇게 문서라고 나온다.
  • image

2022

[web]jQuery 복습 3

2 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]jQuery 복습 2

11 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]jQuery 복습 1

16 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]JavaScript 정리4

5 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]JavaScript 정리3

10 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]JavaScript 정리2

7 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]JavaScript 정리1

8 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]CSS 기초 정리

11 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]HTML 기초 정리

8 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[Pandas]pandas 연습

3 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

맨 위로 이동 ↑

2021

[Python기초]module

1 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

맨 위로 이동 ↑