컴퓨터 공부하는 블로그 컴퓨터 공부하는 블로그

버블링과 캡쳐링에 대해서 이미 정리한 내용이 있다. 그런데 어째서 이 버블링과 캡쳐링을 써야 하는지 의문이 들때가 있다. 실제 예시가 없으면 왜 필요한지 알 수 없기 때문이다. 우선 가장 간단하게 알 수 있는 이벤트 위임(event delegation)을 통해 알아보자. 1번 버튼 2번 버튼 3번 버튼 4번 버튼 5번 버튼 div 밖의 버튼 위와 같은 코드가 있다고 생각해보자. 만약 5개의 버튼에 기능을 준다고 생각해보자. 기존 방법을 쓰면 다음과 같이 해야한다. 1번 버튼 2번 버튼 3번 버튼 4번 버튼 5번 버튼 div 밖의 버튼 5개의 버튼을 이용하려면 5개의 객체를 만들고 일일이 이벤트 리스너 메서드를 지정해줘야 했다. 하지만 이벤트 캡쳐링을 이용하면 이를 쉽게 극복할 수 있다. 1번 버튼 2번 ..

이벤트 핸들러란? 브라우저 상에서 특정한 동작이 발생했을 때 이벤트가 일어난다. 그리고 이때 실행되는 코드 블럭을 이벤트 핸들러라고 한다. 이벤트 리스너라고 부르기도 하지만 정확히 말하면 조금 차이가 있다. 이벤트 리스너는 이벤트 발생하기를 기다렸다가 이를 수신한다. 이벤트 핸들러는 이벤트 발생 후 준비된 코드를 실행한다. 이벤트 핸들러의 종류 이벤트 핸들러의 종류는 3가지다. - 인라인 이벤트 핸들러 - 이벤트 핸들러 프로퍼티 - addEventListener 메서드 아래서 설명하겠지만 인라인 이벤트 핸들러는 현재는 잘 쓰지 않는다. 'HTML'과 자바스크립트가 분리되지 않는 문제가 생긴다. 그래서 코드가 길어지면 가독성이 떨어지고 문제가 생길 확률이 높아지기 때문이다. 1. 인라인 이벤트 핸들러 버튼..

다른 글에선 HTML에 컨텐츠를 추가하거나 읽어줄 때 다음과 같은 방법을 사용한다고 했다. 선택된 요소 노도의 텍스트 값 확인: 'textContent' 선택된 요소 노도의 텍스트 값 확인: 'innerText' 선택된 요소 노도의 텍스트+태그까지 확인: 'innerHTML' 이 중에서 'innerHTML'은 텍스트 뿐 아니라 태그는 따로 분류하여 처리한다. 만약에 자바스크립트를 통해 HTML 화면상에 무언가 문서를 추가로 넣고 싶다면 'innerHTML'을 쓴다. 다만 'innerHTML'은 보안상의 문제를 일으킬 수 있다. 그렇다면 어떻게 해야 상대적으로 안전하게 HTML 화면에 내용을 추가해줄 수 있을까? 그럴 때는 각종 노드를 만들고 다루는 메서드를 이용하면 된다. 우선 간단하게 보면 다음과 같다..

'DOM'에서 텍스트 노드에 접근하는 방법은 굉장히 다양하다. 예전 올린 글에선 'DOM'의 텍스트 노드에는 'nodevalue'를 이용한다고 했다. 위와 같은 내용의 'HTML' 문서가 있다고 가정해보자. 해당 'HTML'의 코드는 다음과 같다. 테스트입니다. 이때 텍스트 노드에 접근하기 위해선 다음과 같이 하면 된다. 어렵지 않게 텍스트 노드의 값을 구할 수 있지만 이런 경우 문제가 생긴다. 1. nodevalue의 문제점 위와 같은 'HTML' 화면이 있다고 가정해보자. 코드는 아래와 같다. 테스트1 테스트2 이때 위에서 한 것과 같이 태그의 내용을 선택해보자. 코드의 결과는 다음과 같다. 원하는 결과와 다른 결과가 나왔다. 'nodeValue'를 이용할 경우 'nodeValue'는 텍스트 노드만 ..

우리는 다른 게시글을 통해 속성 노드의 생성, 수정, 삭제를 배웠다. 요소 노드에 속성 노드를 추가하기 위해선 다음과 같은 메서드를 사용했다. 속성 노드 확인 : hasAttribute() 메서드, getAttribute() 메서드, 속성 노드 생성 : setAttribute() 메서드 속성 노드 삭제 : removeAttribute() 메서드 예를 들어서 아무 속성도 없는 요소 노드에 글자에 색상도 넣고 싶다면 다음과 같이 코드를 짜면 된다. 테스트 문장입니다. 위 코드를 실행하면 아래와 같이 변한다. 위 코드를 쓰면 한 번에 여러 속성값 전달할 수도 있다. 1. 속성 노드의 간략화 하지만 문제는 이렇다. 저렇게 쓸 경우 한 두개의 요소 노드 컨트롤은 어렵지 않다. 하지만 수백개의 요소 노드의 색상을 ..

HTML 조작시 어트리뷰트(attribute) 즉 속성값을 이용해야하는 경우가 존재한다. 단순히 텍스트만 수정한다면 굳이 속성값을 이용할 필요가 없을지 모른다. 하지만 HTML 컨텐츠에 색상을 입히거나 다양한 효과를 주고 싶다면 속성값을 이용하게 된다. 사실 속성값은 그 종류가 굉장히 다양하지만 몇 가지만 알면 충분히 활용이 가능하다. 1. 어트리뷰트 노드 접근하기 위와 같은 HTML의 태그가 있다고 생각해보자. 이 태그를 선택하기 위해선 아래처럼 'getElementsByTagName' 메서드를 이용하면 된다. 하지만 뭔가 조잡하다. 게다가 'getElementsByTagName'메서드는 태그의 내용이 바뀌면 선택 내용도 바뀐다. 그렇다면 해당 태그가 가진 'id' 속성값 또는 'class' 속성값을 ..

DOM이란? 이미 블로그에서 여러 차례 정리했지만, 'DOM'이란 것이 중요하다보니 다시 다루고자 한다. 'DOM'은 'Document Object Model'의 약자로 풀이하자면 문서 객체 모델이다. 웹페이지를 만들 때 3요소라는 'HTML', 'CSS', '자바스크립트'는 사실 서로 다른 개념이다. 'HTML' 문서 내에서 보통 세 가지를 모두 쓰다보니 햇갈릴 수 있지만 셋은 다른 언어다. 물론 세 언어는 서로 이용적인 측면에선 밀접한 관계를 갖는다. 그러나 셋은 다른 언어고 서로를 컨트롤하기 위해선 필요한 것 중 하나가 'DOM'이다. 'DOM'은 웹페이지에서 문서의 구성과 내용을 맡은 'HTML' 요소들을 다루기 위해 만들어졌다. 자바스크립트는 'HTML' 문서를 다뤄야하는데 이때 'HTML' 문..

배열(Array)이란? 1개의 변수에 여러 개의 값을 순차적으로 저장할 때 사용한다. 자바 스크립트의 배열은 객체이며, 유용한 내장 메소드를 가졌다. 이때 자바 스크립트 배열은 다음과 같은 특징을 갖는다 1. 배열 요소의 타입이 고정되지 않아 한 배열 안에도 배열 요소의 타입이 다를 수 있다. 2. 배열 요소의 인덱스가 연속적이지 않아도 되고, 특정 배열 요소가 비어있을 수 있다. 3. 자바 스크립트에서 배열은 Array 객체로 다뤄진다. 배열의 생성 1. 배열 리터럴 let animal = ["사자", "호랑이", "강아지", "독수리", "너구리"]; 리터럴 방식으로 배열을 만들 땐 대괄호 ( [ ] ) 안에 ( , ) 쉼표 기준으로 요소들을 써넣으면 된다. 2. 생성자를 이용한 배열 let worl..