자바스크립트 기초 - 이벤트 처리(addEventListener, removeEventListener, DOMContentLoaded, defer, load, click, mousedown, mouseup, mousemove, mouseenter, mouseleave, mouseover, mouseout, event.clientX, event.clientY, event.offsetX, event.offs..
이벤트 처리 - 이벤트 처리는 addEventListener()를 사용해 제어함 메소드 의미 이벤트타깃.addEventListener(이벤트명, 리스너, [옵션]) 이벤트 리스너 설정 const button = document.querySelector('.btn'); button.addEventListener('click', onClickButton); //방법1 function onClickButton(){ console.log('버튼 클릭 이벤트'); }; button.addEventListener('click', () => { //방법2 console.log('버튼 클릭 이벤트'); }); button.addEventListener('click', function(){ //방법3 console.lo..
2023. 8. 21.
자바스크립트 기초 - 브라우저(alert, confirm, prompt, Viewport, innerWidth, innerHeight, devicePixelRatio, location.href, location.reload, history, window.open, document.title , focus, blur, fullScreen, onLine)
경고 표시 - alert - 알림창을 표시하고 싶을 때 - 유저에게 메시지를 표시하고 싶을 때 메소드 의미 반환 alert(내용) 알림창 표시 없음 alert()은 메시지 내용과 ok 버튼으로 이루어진 알림창을 표시함. 창이 닫히기 전까지 자바스크립트가 실행 중인 상태로 유지가 되며, ok 버튼을 눌러 창을 닫기 전까지는 다른 작업이나 브라우저의 조작이 불가능함. 메시지 내용의 줄바꿈은 \n과 템플릿 문자열을 이용한다. const btn = document.querySelector('button'); btn.addEventListener('click', (event) => { alert('안녕하세요.\n반갑습니다.'); }); window.alert('안녕하세요'); alert()는 window 객체 메..
2023. 8. 17.
자바스크립트 기초 - 데이터 타입(원시 타입, 객체 타입, typeof, instance, 타입변환, Undefined, Null)
데이터 타입 데이터 타입 의미 원시(Primitive) 타입(기본) 원형 데이터 객체(Object) 타입(복합) 참조 데이터 자바스크립트는 숫자, 문자열, 진릿값, 객체 등의 데이터를 타입으로 분류한다. 원시타입 원시타입 의미 예 Boolean 진릿값 타입 true, false String 문자열 타입 '토끼', '사과' Number 숫자 타입 1, 2, 3, 100 Undefined 값 미정 undefined Null 빈 값 null Symbol 심볼 타입 Symbol() 메모리상의 데이터를 가르키는 걸 참조(Reference)라 한다. const num = 100; //100을 참조 const text = '사자'; //'사자'를 참조 객체 타입 의미 예 Object 객체 타입 원시 타입을 제외한 모..
2023. 8. 14.
