본문 바로가기

웹개발/JavaScript

 (12)
[CodeIt] JavaScript 중급 토픽1(다양한 이벤트 알아보기) - 마우스 버튼으로 하는 이벤트는 MouseEvent객체의 button 프로퍼티를 이용하면 됩니다. MouseEvent.button에서 0은 마우스 왼쪽 버튼, 1은 마우스 휠, 2는 마우스 오른쪽 버튼입니다. - MouseEvent.type에서 click은 마우스 왼쪽 버튼을 눌렀을 때, contextmenu는 마우스 오른쪽 버튼을 눌렀을 때, dbclick은 동일한 위치에서 빠르게 두번 click할 때이고, mousedown은 마우스 버튼을 누른 순간, mouseup은 마우스 버튼을 눌렀다 뗀 순간입니다. 이때, 주의할 점은 하나의 동작에 여러 이벤트가 발생할 수 있다는 점입니다. - 여러 이벤트의 발생 순서는 운영체제에 따라 다를 수 있으니, 주의해야 합니다. - 마우스 이동과 관련된 이벤트 타입(..
[CodeIt] JavaScript 중급 토픽1(이벤트 살펴보기) - elem.addEventListener(event, handler)를 통해 이벤트 핸들러를 등록하는 것이 가장 권장되는 방식입니다. - elem.removeEventListner(event, handler)를 통해 이벤트 핸들러를 제거할 수 있습니다. handler를 추가할 때 바로 함수를 입력하면 이러한 방식으로 제거가 안되므로, 반드시 이벤트를 변수에 할당하여 handler를 전달해 추가해줘야 합니다. - removeEventListner는 파라미터로 전달하는 타입과 이벤트 핸들러가 addEventListner메소드로 등록할 때와 동일할 때만 이벤트 핸들러를 삭제할 수 있습니다. - click 이벤트뿐만 아니라 다양한 이벤트들이 존재하고, 이벤트에는 마우스 이벤트, 키보드 이벤트, 포커스 이벤트,..
[CodeIt] JavaScript 중급 토픽1(브라우저와 자바스크립트) - JS의 최상단 객체인 window객체는 브라우저의 창을 대변합니다. window에는 document와 console 프로퍼티 객체가 존재합니다. - window는 어디서나 접근가능한 전역객체(Global Object)이고, document와 console앞에 window.은 생략가능합니다. - DOM(Document Object Model, 문서 객체 모델)은 HTML을 객체로 표현한 것입니다. - console.log가 아니라 console.dir을 쓰면, 객체의 다양한 프로퍼티를 출력합니다. 따라서 값 자체를 확인할 때는 log를, 객체의 속성들을 살펴볼 때는 dir을 사용하면 됩니다. - DOM 트리에서 각 객체를 노드(Node)라 합니다. 노드 간의 관계로 부모, 자식, 형제가 있습니다. - ..
[CodeIt] JavaScript 중급 토픽1(인터랙티브 자바스크립트 시작하기) - JS에서 id속성을 통해 태그를 선택하는 법은 document.getElementById('id')입니다. 이때, 선택된 태그는 자식요소들을 모두 같이 가져옵니다. 또한, 존재하지 않는 id에 접근하면 null이 반환됩니다. - JS에서 class속성을 통해 여러 태그를 선택하는 법은 document.getElementsByClassName('class')입니다. 이때, 배열과 유사하지만 배열의 메소드는 사용할 수 없는 유사배열(Array-Like Object)인 HTMLCollection형태로 값이 반환됩니다. 또한, 존재하지 않은 class로 접근하면, 빈 HTMLCollection이 반환됩니다. - HTMLCollection과 같이 배열과 모양은 같지만, 완벽히 배열은 아닌 유사 배열(Array..
[CodeIt] 프로그래밍 시작하기 in JavaScript 토픽3(자료형 심화) - 단위가 큰 정수를 표시할 때 1e9(= 1 X 10^9)와 같이 수를 표기할 수 있습니다.(지수 표기법) - 8진수를 표현할 때는 앞에 0o를, 2진수를 표현할 때는 앞에 0b를 붙입니다. 이를 출력할때는 십진수로 출력됩니다. - JS에서 숫자도 객체입니다. myNumber.toFixed(3)을 하면, 소수점 아래 자릿수를 3으로 고정시켜 줍니다. 만약 자릿수가 숫자를 초과하면 0으로 채워줍니다. toFixed()에 값을 전달 안하면 0이 전달됩니다. 이때, 반환된 값은 string이므로 숫자로 사용하려면 Number( )로 형변환 해줘야 합니다. Number()로 형변환하는 대신 앞에 +를 붙여줄 수도 있습니다. - myNumber.toString(2)을 하면 수를 2진수로 반환시켜줍니다. 그리고 ..
[CodeIt] 프로그래밍 시작하기 in JavaScript 토픽3(배열) - 객체의 Property Name이 중요하지 않을 때, 배열로 선언하는 것이 유리합니다. 배열의 원소는 indexing을 통해 접근합니다. 이때, index는 0부터 시작합니다. ex) course[2] - 배열도 JS에서 이미 존재하는 객체입니다. 따라서 다양한 Property와 메소드를 필요할 때 사용할 수 있어 매우 편리합니다. length 프로퍼티는 배열의 길이를 나타냅니다. - 배열의 존재하지 않은 index에 새로운 값을 할당하려면 members[5]='hi'와 같이 하면 됩니다. 이때, 중간에 건너뛴 index들이 있다면 모두 undefined가 할당됩니다. - 배열의 이미 존재하는 index에 있는 값을 수정하려면 members[5]='hello'와 같이 새로운 값을 할당해주면 됩니다. ..
[CodeIt] 프로그래밍 시작하기 in JavaScript 토픽3(객체) - 객체는 { key1: value1, key2: value2, key3:value3 }와 같이 정의합니다. 이때, key와 value쌍을 묶어서 속성(Property)라고 부르고, key는 Property Name, value는 Property value라고도 부릅니다. - Property Name은 문자열 타입인데, ''를 생략하더라도 JS가 암묵적으로 문자열로 변환해줍니다. 그리고 Property Name은 첫 번째 글자는 반드시 문자, 밑줄(_), 달러 기호($) 중 하나로 시작해야 하며, 띄어쓰기와 하이픈(-)은 사용할 수 없습니다. 이러한 규칙을 벗어난다면 반드시 ' '로 묶어줘야 합니다. ex) { 'brand Name' : '코드잇', 'born-Year' : 2017, isVeryNice..
[CodeIt] 프로그래밍 시작하기 in JavaScript 토픽2(제어문) ※ 아래의 내용들은 모두 변수선언만 let으로 하고, C와 같이 작성합니다. - 조건문은 if(조건) { 동작부분; } else if { 동작부분; } else { 동작부분; }로 만듭니다. - switch문은 switch(비교할 값) { case 조건값_1: 동작부분; break; case 조건값_2: 동작부분; break; default: 동작부분; }로 만들고, 마지막의 default는 생략할 수 있습니다. 또한, break;가 없으면 뒷부분을 모두 실행하기 때문에 반드시 적어줘야 합니다. - switch문은 값들을 비교할 때 자료형을 엄격하게 구분하므로 if문으로 대체할 때는 반드시 등호 3개로 일치비교를 해야합니다. - for문은 for(초기화부분; 조건부분; 추가동작부분) { 동작부분; }로 ..

티스토리툴바