yubyeong

이벤트 핸들러 등록하기 HTML의 속성이나 DOM 프로퍼티를 활용해 이벤트를 등록한다. Element.addEventListener('event', 'handler')를 통해서 이벤트 핸들러를 등록. //ex) 버튼 클릭시 이벤트 실행 btn.addEventListener('click', event1); btn.addEventListener('click', event2); 이벤트 핸들러 삭제하기 Element.removeEventListener('event', 'handler')를 통해서 이벤트 핸들러를 삭제. //ex) 등록한 이벤트 핸들러 삭제 btn.removeEventListener('click',event2); click 이벤트 외 다양한 이벤트 (더 보기 Click.) 더보기 마우스 이벤트 m..

인터랙티브 웹이란? - Interactive = 상호작용 - 다양한 기술을 통해 역동적이고 효과적인 웹사이트 - 프론트 영역에서 역동적이고 화려한 디자인, 애니메이션적의 부분이 강조된 웹사이트 id로 태그 선택하기 document.getElementById(); document 객체의 getElementById 메소드로 id속성의 태그를 선택할 수 있다. const myTag = document.getElementById('id'); console.log(myTag); class로 태그 선택하기 document.getElementsByClassName(); document 객체의 getElementByClassName 메소드로 class 속성의 여러 태그를 선택할 수 있다. const myTags = d..

JS란? JavaScript는 동적으로 변경되는 콘텐츠를 만들고, 멀티미디어를 제어하고, 이미지에 애니메이션을 적용하는 등 거의 모든 작업을 수행할 수 있는 스크립팅 언어이다. 즉 '웹 페이지에 생동감을 불어넣기 위해' 만들어진 프로그래밍 언어이다. JS를 본격적으로 다루기 전에 알아야 할 꼭 지켜야 하는 룰이 있다. (1) JavaScript 식별자는 '문자 (a-z, A-Z)', '밑줄(_)' 혹은 '달러 기호($)'로 시작해야 한다. 두 번째 글자부터는 '숫자 ( 0-9 )'도 가능하다. (2) '대문자'와 '소문자'는 구별. myname과 myName은 다른 이름이다. (3) '예약어(JavaScript가 찜해놓은 단어)'는 사용하면 안 된다. 예를 들어서 if, for, let 같은 것 들이 있..

객체(object) 값 이름 : ‘값’ → 지정 값 이름을 key, 값을 value 라고 부른다. key와 value 한 쌍을 속성(Property)이라고 한다. key를 Property Name , value를 Property Value라고 한다. Property Name 첫 번째 글자는 반드시 문자, 밑줄_, 달러기호$ 중 하나로 시작. 띄어쓰기 금지. 하이픈(-) 금지. 이런 규칙을 지키지 않으면 “”따옴표로 감싸주면 된다. Property Value 모든 자료형 사용 가능. 객체 안에 있는 여러개의 property는 쉼표,로 구분해야 한다. 점 표기법 (objectName.propertyName) 따옴표를 생략할 수 없는 propertyName(띄어쓰기)은 사용 불가능하다. 대괄호 표기법 (obj..

if문 if (조건부분) { 동작부분1 ; } else { 동작부분2 ; } 조건이 맞으면 if문의 동작부분 1 실행 조건이 틀리면 else문의 동작부분2 실행 else if 문 여러가지 조건이 있을 때 if문 안에 else if 문을 활용함. if (조건부분1) { 동작부분1 ; } else if (조건부분2) { 동작부분2 ; } else { 동작부분3 ; } switch문 switch (비교할_값) { case 조건값_1: 동작부분; break; case 조건값_2: 동작부분; break; default: 동작부분; } break 문을 만나야 동작을 종료함. switch문을 if문으로 대체할 수 있음. 범위를 만족하는 조건식을 만들 때는 if문을 활용하는 것이 효과적이고, 특정값을 만족하는 조건식을..

할당 연산자 = → 할당연산자 오른쪽의 피연산자를 왼쪽의 피연산자에 지정해주는 것. ex) let x = 5; x = x - 2; console.log(x); → 3 할당 연산자와 결합하여, 자주 쓰이는 표현을 더 간략하게 쓸 수 있게 하는 연산자를 복합 할당 연산자 라고 한다. ex) x = x +1; x += 1; 두 개의 줄은 같다. ex) x = x * 2; x *= 2; 마찬가지로 두 줄은 같은 의미이다. 변수의 값을 1씩 증가 시키거나 감소 시킬 때는 증가, 감소 연산자를 사용한다. ex) x = x + 1; x += 1; x++; 3줄 모두 같은 의미이다. return문 어떤 값을 되돌려주는 아웃풋의 역할 함수 자체의 실행을 중단한다. return문이 실행되고 나서는 함수 실행이 중단되기에 ..