JavaScript30 RGB와 HEX const h2 = document.querySelector('h2'); const BASE_COLOR = '#2980b9'; const CLICK_COLOR = '#e74c3c'; function handleColor(){ const currentColor = h2.style.color; console.log(currentColor); if(currentColor === BASE_COLOR){ console.log('if got it'); h2.style.color = CLICK_COLOR; }else{ console.log('else got it'); h2.style.color = BASE_COLOR; } } function init(){ h2.style.color = BASE_COLOR; h2.ad.. 2020. 1. 30. JavaScript Event JavaScript는 이벤트를 제어하기 위해 사용한다. 이벤트 리스너 추가 EventTarget.addEventListener(이벤트 명, 적용 function) //원하는 DOM 엘리먼트를 넣으면 된다. *function의 경우 function()이라고 쓰면 페이지 로딩시 바로 호출된다. function명만 적어줘야 이벤트 발생시 호출 된다. event 객체 event를 다룰 function을 만들때마다 JS는 event 객체를 function에 붙인다. 이를 통해 function제어를 한다. function handleResize(event){ console.log(event); } //event를 제어하기 위해 event parameter를 사용함 window.addEventListener("res.. 2020. 1. 29. querySelector() html에서 엘리먼트를 가져오기 위해 보통 getElement를 사용한다. document.getElementById('id'); document.getElementsByClassName('className') querySelector() 를 사용하면 번거롭게 여러가지 쓸 필요없이 css 선택자를 사용할 수 있다. const 태그 = document.querySelector('h2'); const 아이디 = document.querySelector('#id'); const 클래스 = document.querySelector('.class'); 이러면 해당 엘리먼트 중 첫번째 것을 가져온다. 해당 요소가 없으면 NULL을 반환한다. 해당 엘리먼트를 모두 가져오는 데에는 querySelectorAll() 을.. 2020. 1. 29. console 객체 console 객체에는 log외에도 유용한 function들이 여러가지 있다. log console.log('기본'); console.info('정보'); console.warn('경고'); console.error('에러'); dir console.log는 요소를 HTML과 같은 트리 구조로 출력합니다. console.dir은 요소를 JSON과 같은 트리 구조로 출력합니다. 구체적으로, console.log는 DOM 요소에 대해 특별한 처리를 제공하지만 console.dir은 그렇지 않습니다. 이것은 종종 DOM JS 객체의 전체 표현을 보려고 할 때 유용합니다 참고 https://developer.mozilla.org/ko/docs/Web/API/Console/log https://www.zeroch.. 2020. 1. 29. 이전 1 ··· 4 5 6 7 8 다음
