21.12.06 - JavaScript, jQuery

21.12.06 - JavaScript, jQuery

* 문서 객체 모델 (DOM: Document Object Model)

태그를 자바스크립트에서 사용할 수 있는 객체로 만든 것

- 정적 생성

웹 페이지를 처음 실행할 때 HTML 태그로 적힌 문서 객체를 생성하는 것

- 동적 생성

웹 페이지를 실행 중에 자바스크립트를 사용해 문서 객체를 생성하는 것

* 1개 선택

document.getElementByID(아이디)

document.querySelector(선택자)

* 여러 개 선택

document.getElementsByName(이름)

document.getElementsByClassName(클래스)

document.querySelectorAll(선택자)

* 참고 사이트

HTML5, CSS, JavaScript ⇒ https://poiemaweb.com/coding

길벗 ebook 서비스 ⇒ https://thebook.io/

리액트를 다루는 기술 ⇒ https://thebook.io/080203/

* textContent, innerText / innerHTML의 차이

textContent, innerText는 입력한 태그가 문자 그대로 출력됨

innderHTML은 입력한 태그를 Element로 인식해서 적용되어 나옴

* setAttribute(속성 이름, 속성 값) : 속성 지정

getAttribute(속성 이름) : 속성 추출

* 이벤트 모델 : 문서 객체에 이벤트를 연결하는 방식

* JSON 알아보기

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON

https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/JSON

* for 구문과 forEach 구문 (forEach가 훨씬 데이터 효율적)

for (let i = 0; i < answerEls.length; i ++)

if (answerEls[i].checked)

~~~~~~~~~~~~~~~~~~~~

i 번째에 있는 radio 버튼의 체크 여부를 확인

answerEls.forEach(ans => {

if (ans.checked) {

answerNo = ans.id;

}

})

* CDN

콘텐츠 전송 네트워크(Content delivery network)

* jQuery

$(function() {

$('h1').css('backgroundColor', 'red');

$('h2').css('color', 'red');

console.log($('script').attr('src'));

$('h3').attr('data', 'mydata'); ⇐ H3 요소에 data 속성에 mydata 값을 설정 → setter

console.log($('h3').attr('data')); ⇐ H3 요소의 data 속성 값을 읽어 오는 것 → getter

});

* jQuery API

https://api.jquery.com/

* Masonry => jQuery 플러그인 사용

https://masonry.desandro.com/

* 이미지 제공

https://source.unsplash.com/

공유하기 글 요소 저작자표시

from http://hyunsil-k.tistory.com/10 by ccl(A) rewrite - 2021-12-06 18:01:21