본문 바로가기
JavaScript

JS 6일차

by Zㅣ존수빈zz 2022. 12. 27.

# 자바스크립트와 HTML

 

1. window 객체

- 웹개발을 위한 도구모음

 

- 메시지 창 띄우기

  window.alert("Hello");

 

- 접속 기기의 위치를 리턴(ex. 위치기반앱)

  window.navigator.geolocation

 

- 유저의 페이지 탐색기록

  window.history

 

- 브라우저의 저장공간 (ex. 로그인토큰, 테마, 쇼핑카트)

  document.cookie     // 쿠키

  window.localStorage     // 쿠키의 대체제

 

- 서버에 데이터를 요청하는 메서드 (ex. AJAX: 페이지 새로고침없이 서버에 요청을 전송할 수 있는 기술)

  window.XMLHttpRequest

  window.fetch     // 비교적 최신메서드

 

- 뷰 개발(화면 출력과 관련)

  window.document     // HTML문서


2. 엘리먼트 다루기

 

2-1) 엘리먼트 선택자

    <ul>
        <li id= "foo" class="item">foo</li>
        <li class="item">bar</li>
        <li class="item">baz</li>
    </ul>

- 태그 이름으로 선택하기

  •   let ul = document.querySelector( 'ul' );     // ul 태그를 가진 element 하나만 선택
  •   let ul = document.querySelectorAll( 'li' )     // li 태그를 가진 모든 엘리먼트를 선택

  console.log( li );     // NodeList(3)

  console.log( li[0] );     // foo

  console.log( li[1] );     // bar

  console.log( li[2] );     // baz

 

 

- 클래스 이름으로 선택하기

  •   const li = document.getElementsByClassName( 'item' );
  •   const li = document.querySelectorAll(' .item' )
    // querySelectorAll을 사용하는 경우에는 앞에 클래스를 나타내는 .을 붙여준다

  console.log( li );     // HTMLCollection(3)

  console.log(li.length)     // 3

 

 

- id로 선택하기

  • const foo = document.getElementById( 'foo' );
  • const foo = document.querySelector ( '#foo' );
    // querySelectorAll을 사용하는 경우에는 앞에 아이디를 나타내는 #을 붙여준다.

 

- 자식선택자 (자식엘리먼트 선택하기)

  const ul = document.querySelector( 'ul' );

  

  console.log(ul.childern);     // HTMLCollection(length)

  console.log(ul.childrdn[0]);     // foo

  console.log(ul.firstElementChild);     // foo

  console.log(ul.lastElementChlid);     // baz

 

 

- 형제선택자 (같은 라인에서 바로 다음에 오는 엘리먼트 선택하기)

  const foo = document.getElementById( 'foo' );

 

  console.log(foo.nextElementSibling);     // bar

 

 

2-2) class 속성

    <ul>
        <li id="foo" class="class1 class2">foo</li>
        <li>bar</li>
        <li>baz</li>
    </ul>

- Js로 class 추가하기 , 삭제하기

  const foo = document.getElementById( 'foo' );     // element 선택

  

  방법1) foo.className += ' class3';

             console.log(foo.className);     // class1 class2 class3

 

  방법2) foo.classList.add( 'class3' );       // 추가

             foo.classList.remove( 'class3');   // 삭제

             console.log(foo.classList);     // DOMTokenList(length)

 

 

2-3) attribyte 속성

    <ul>
        <li><a id="foo" href="Foo">Foo</a></li>
        <li><img id="bar" src="" alt="Bar"></li>
        <li><input id="baz" type="text" value="Baz"></li>
    </ul>
 

  const foo = document.getElementById("foo");

  const bar = document.getElementById("bar");

  const baz = document.getElementById("baz");

 

- attribute 확인

  (방법1)

  console.log(foo.href);     // Foo

  console.log(bar.alt);     // Bar

  console.log(baz.value);     // Baz

 

  (방법2)

  console.log(foo.getAttribute('href'));

  console.log(bar.getAttribute('alr'));

  console.log(baz.getAttribute('value'));

 

  - attribut 수정하기

  (방법1)

  foo.href = 'FOO';

  bar.alt = 'BAR';

  baz.value = 'BAZ';

 

  (방법2)

  수정할 element.setAttribute(attributeName, 수정값)

  foo.setAttribute('href', 'FOO');

  bar.setAttribute('alt', 'BAR');

  baz.setAttribute('value', 'BAZ');

 

2-4) style 속성

    <ul>
        <li>foo</li>
        <li>bar</li>
        <li>baz</li>
    </ul>

  const ul = document.querySelector("ul");

  const li = document.querySelectorAll('li');

 

  console.log(ul.style)     // CSSStyleDeclaration

 

- ul에 테두리 추가

  ul.style.border = '1px solid';

 

- 첫번째 li에 밑줄 추가

  li[0].style.textDecoration = 'underline';

 

2-5) text content

    <ul>
        <li id="foo">foo</li>
        <li>bar</li>
        <li>baz</li>
    </ul>

  const foo = document.getElementById('foo');

  console.log(foo.innerHTML);      // foo

  

- text 업데이트

  foo. innerHTML = 'FOO';

 

2-6) element 주입

    <ul>
        <li>foo</li>
        <li>bar</li>
    </ul>

- ul 엘리먼트 선택

  const ul = document.querySelector( 'ul');

 

- li태그를 가진 엘리먼트 새로 만들기

  const li = document.createElement( 'li' );

 

- innerHTML을 사용하여 만들어놓은 li에 text를 업데이트

  li.innerHTML = 'baz';

  console.log(li);     // baz

 

- 만든 li를 ul의 child로 추가하기

  element1.appendChild(element2)     // element2를 element1의 마지막 child로 추가한다

  ul.appendChild( li );


3. 이벤트와 이벤트 다루기

- 이벤트: 웹사이트에서 유저의 행위

  ex) 클릭, 스크롤, 브라우저 크기조절, 마우스 포인터 이동, 키보드 누르기 등

    <button>Button</button>

    <script>
        const button = document.querySelector('button');

        // element.addEventListener (event, callback)
        // 이벤트를 포착해서 그에 맞는 작업을 실행한다.
        button.addEventListener('click', (e) => {
            console.log(e);     // PointerEvent
            console.log(e.target);  // 이벤트가 발생한 엘리먼트

            alert('lol');
        });
    </script>

'JavaScript' 카테고리의 다른 글

JS 8일차  (0) 2022.12.29
JS 7일차  (0) 2022.12.27
JS 5일차  (0) 2022.12.23
JS 4일차  (0) 2022.12.19
JS 3일차  (0) 2022.12.19

댓글