javaScript18 addEventListener() 함수 addEventListener() 함수는 이벤트가 발생한 요소에 이벤트 처리기를 연결해 주는 함수로, 웹문서에서 이미지나 텍스트 등 특정 요소뿐만 아니라 Document 객체나 Window 객체 어디에서든 사용할 수 있습니다. - 이벤트 유형 처리할 이벤트 유형을 지정합니다. 단 이 함수에서 이벤트 유형을 지정할 때는 'on'을 붙이지 않고 'click'이나 'mouseover'처럼 이벤트만 사용합니다. - 함수 이벤트가 발생했을 때 실행할 명령을 나열하거나 따로 함수를 만들었다면 함수 이름을 지정합니다. - 캡처 여부 이벤트를 캡처링하는지 여부를 지정하는데 생략할 수 있습니다. true이면 캡처링, false이면 버블링한다는 의미인데, 기본 값은 false입니다. 이벤트 캡처링 DOM의 부모 노드에서 .. 2020. 1. 28. 태그 속성을 사용하여 상품 이미지 변경하기 -태그 속성을 사용하여 상품 이미지 변경하기 미리 세팅한 소스와 이미지에 getAttribute() 함수와 setAttribute() 함수를 사용해서 원하는 위치에 이미지를 표시하는 방법을 알아보겠습니다. 소스를 보면 큰 이미지에서는 id="cup"을 사용하고, 작은 이미지에서는 모두 class="small"을 사용합니다. 다음은 큰 이미지 하나와 작은 이미지 세 개가 있습니다. 사용자가 누른 작은 이미지를 큰 이미지 위치에 표시하려고 합니다. 이미지를 바꾸기 위해서는 접근한 이미지의 src 속성에 접근해서 그 값을 바꾸는 것인데요. 큰 이미지 요소의 src 속성 값을 작은 이미지의 src 속성 값으로 바꾸면 되죠. 이를 위해 작은 이미지 src 속성 값을 가져와 큰 이미지의 src 속성에 할당하도록 자.. 2020. 1. 18. 문서객체 모델(DOM) 자바스크립트를 사용하여 웹 문서의 텍스트나 이미지 등의 요소를 제어하기 위해서는 문서 객체 모델(Document Object Model) 사용합니다. DOM 요소에 접근하기 CSS에는 선택자(Selector) 개념이 있습니다. HTML 요소의 스타일을 선택하여 수정할 때 CSS 선택자를 사용합니다. 자바스크립트로 DOM 요소에 접근할 때도 주로 선택자를 사용합니다. getElementById() : DOM 요소를 id 선택자로 접근하는 함수 id 속성을 사용하여 예제 소스 에디오피아 게뎁이라는 제목(h1)에 접근 합니다. 크롬 브라우저 화면에서 콘솔창을 열어 콘솔 창에 id 값이 heading인 요소 (id=heading)를 출력 합니다. 이 후 출력된 요소에 마우스를 올려보면 웹 브라우저 화면에 이 요.. 2020. 1. 15. Array 객체의 주요 함수 Array 객체의 주요 함수 함수 설명 concat 기존 배열에 새로운 배열을 추가해 새로운 배열을 만듭니다. every 배열의 모든 요소가 주어진 함수에 대해 true라면 true을 반환하고 그렇지 않으면 false를 반환합니다. filter 배열의 요소 중 주어진 필터링 함수에 대해 true인 요소만 골라 새로운 배열을 만듭니다. forEach 배열의 모든 요소에 대해 주어진 함수를 실행합니다. indexOf 주어진 값과 일치하는 값이 있는 배열 요소의 첫 인덱스를 찾습니다. join 배열 요소를 문자열로 합칩니다. 이때 요소 사이를 구분할 구분자를 지정할 수 있습니다. pop 배열 마지막 요소를 꺼내 그 값을 반환합니다. push 배열의 맨 끝에 새로운 요소를 추가한 후 새로운 length를 반환합.. 2020. 1. 13. 이전 1 2 3 4 5 다음
