📁Web Developing/JavaScript 기초11 DOM에서 노드 추가-삭제하기 노드 리스트란 DOM에서 새로운 노드를 만들어 추가하거나 삭제하려면 노드 리스트를 사용해야 한다. 노드 리스트란 무엇일까? DOM에 접근할 때 querySelectorAll() 메서드를 사용하면 노드를 한꺼번에 여러 개 가져올 수 있다. 이때 노드 정보를 여러 개 저장한 것이 노드 리스트이다. 배열과 비슷하게 동작한다. 텍스트 노드를 사용하는 새로운 요소 추가하기 여기에서는 [더 보기] 링킁를 클릭하면 그 아래에 간단한 텍스트가 표시되는 스크립트 소스를 작성해 보겠다. 문서에는 단순히 태그 하나가 추가되어 보이지만 DOM에서는 여러 단계가 필요하다는 것을 알 수 있다. 1. 요소 만들기 - createElement() 메서드 DOM에 새로운 요소를 추가할 때 가장 먼저 할 일은 요소 노드를 만드는 것이다.. 2022. 6. 25. DOM에서 이벤트 처리하기 HTML 태그에서 이벤트 처리기를 연결핼 수도 있지만 태그와 스크립트 소스가 섞여 있어서 복잡한 프로그램에는 적합하지 않다. 이럴 때 DOM 에서 이벤트 처리기를 연결하면 HTML 태그와 스크립트 소스를 분리할 수 있다. 여기에서는 DOM의 이벤트 처리 방법을 알아보겠다. DOM 요소에 함수 직접 연결하기 이벤트 처리기 함수가 간단하다면 DOM 요소에 직접 연결할 수 있다. 예를 들어 다음 예제는 img 요소를 가져와 변수에 저장한 후 onclick을 사용해 변수에 이벤트 처리기(함수)를 직접 연결한다. 이미지를 클릭하면 알림 창이 나타나지만 이미지 외의 다른 곳을 클릭하면 실행되지 않는다. 함수 이름을 사용해 연결하기 이벤트가 발생했을 때 실행할 함수를 따로 정의해 놓았다면 함수 이름을 사용해 연결할 .. 2022. 6. 25. DOM 요소에 접근하고 속성 가져오기 DOM에 접근하기 CSS에서는 class, id, 태그 등의 스타일을 각각 구별해서 정의해야 한다. 이때 class, id, 태그 등을 선택자(selector)라고 한다. 이 선택자를 사용해서 DOM에 접근하는 방법을 알아보자. id 선택자로 접근하는 getElementByld() 메서드 HTML 태그의 id 속성은 HTML 요소가 문서 안에서 중복되지 않도록 사용하는 CSS 선택자이다. 다음과 같이 getElementById() 메서드를 이용하면 특정한 id가 포함된 DOM 요소에 접근할 수 있다. 요소명.getElementById("id명") 예를 들어 id값이 heading인 요소에 접근하려면 다음과 같이 사용한다. document.getElementById("heading") class값으로 접근.. 2022. 6. 23. 문서 객체 모델(DOM) 자바스크립트를 공부하다 보면 DOM이란 말을 자주 만날 것이다. DOM은 문서 객체 모델(document object model)의 줄임말이다. 문서 객체 모델은 자바스크립트 프로그래밍에서 매우 중요한 개념이니 잘 이해하고 넘어가야 한다. 문서 객체 모델이란 우리는 웹 문서의 모든 요소를 따로 제어할 수 있어야 한다. 예를 들어 웹 문서에 텍스트와 이미지가 들어 있다면 웹 브라우저는 마크업 정보를 보면서 텍스트 단락이 몇 개이고 그 내용이 뭉서인지 살펴본다. 또한 이미지가 몇 개이고 이미지 파일 경로는 어떠한지 대체 텍스트는 무엇인지도 파악해서 이미지별로 정리해서 인식한다. 그리고 이러한 텍스트와 이미지 요소를 브라우저가 제어하려면 두 요소를 따로 구별하여 인식해야 한다. 이보다 더 많은 요소를 사용한 .. 2022. 6. 23. 브라우저와 관련된 객체 자바스크립트를 사용하면 특정한 사이트로 이동하거나 새 탭을 여는 등 웹 브라우저와 관련된 여러 가지 효과를 만들 수 있다. 이런 작업이 가능한 이유는 자바스크립트 내에 웹 브라우저와 관련된 여러 객체가 미리 정의되어 있기 때문이다. 지금부터 웹 브라우저와 관련된 객체를 하나씩 살펴보겠다. 브라우저와 관련된 객체 알아보기 웹 브라우저 창에 문서가 표시되는 순간 사용자는 눈치 채지 못하지만, 브라우저는 HTML 소스를 한 줄씩 읽으면서 화면에 내용을 표시하고 관련된 객체를 만들어 낸다. 웹 브라우저가 열리면 가장 먼저 window라는 객체가 만들어지고 밑으로 하위 요소에 해당하는 객체들이 나타난다. 이 하위 객체는 웹 문서와 주소 표시줄처럼 브라우저 요소에 해당하며 각각 다른 하위 객체를 가진다. 이렇게 만.. 2022. 6. 20. 객체 객체란? 객체는 Key와 Value로 구성된 property와 method를 가질 수 있다. 사실 자바스크립트에서는 모든 것이 객체라고 할 정도로 중요한 개념이다. 각 property는 쉼표로 구분되며, 마지막 property의 쉼표는 없어도 되지만 있는게 코드관리에 용이하다. 객체의 접근, 추가, 삭제 문법은 다음과 같다. HTML 삽입 미리보기할 수 없는 소스 단축 property라는것을 사용하면 이미 선언된 변수를 바탕으로 객체를 생성하는데 용이하다. HTML 삽입 미리보기할 수 없는 소스 만약 존재하지 않는 property에 접근하려고 하면 에러를 발생시키는게 아니라 undefined를 돌려준다. 만약 객체가 어떤 property를 가지는지 확인하려면 in을 통해 확인할 수 있다. 'name' i.. 2022. 6. 19. DOM을 이용한 이벤트 처리기 HTML 요소에 이벤트 처리기를 지정하면 태그 속성과 자바스크립트 소스가 섞인다. 그래서 자바스크립트를 수정하려면 HTML의 태그와 속성을 하나씩 찾아봐야한다. 하지만 DOM을 이용하여 이벤트 처리기를 지정하면 태그와 자바스크립트 소스를 분리해서 보기 좋게 사용할 수 있다. 지금까지 이벤트 처리기를 지정하는 방법은 HTML이 주인이 되어 자바스크립트의 함수를 불러와서 사용했다. 하지만 DOM을 사용하면 자바스크립트가 주인이 되어 HTML의 요소를 가져와서 이벤트 처리기를 연결한다. HTML과 자바스크립트 중에서 어느 쪽을 중심으로 잡는가에 따라 지정하는 방법이 다른다는 것을 알면 된다. 예를 들어 웹 요소를 클릭했을 때 실행할 함수를 연결하려면 다음과 같은 기본 형식으로 사용한다. 웹 요소.onclick.. 2022. 6. 19. 이벤트와 이벤처리기 이벤트 알아보기 웹 문서 영역 안에서 이루어지는 동작을 이벤트라고 한다. 마우스 이벤트 마우스 이벤트는 마우스를 이용해서 버튼이나 휠 버튼을 조작할 때 발생한다. 종류 설명 click 사용자가 HTML 요소를 클릭할 때 이벤트가 발생한다. dblclick 사용자가 HTML 요소를 더블클릭할 때 이벤트가 발생한다. mousedown 사용자가 요소 위에서 마우스 버튼을 눌렀을 때 이벤트가 발생한다. mouseover 마우스 포인터가 요소 위로 옮겨질 때 이벤트가 발생한다. mouseout 마우스 포인터가 요소를 벗어날 때 이벤트가 발생한다. mouseup 사용자가 요소 위에 놓인 마우스 버튼에서 손을 뗄 때 이벤트가 발생한다. 키보드 이벤트 키보드에서 특정 키를 조작할 때 발생한다. 종류 설명 keydown.. 2022. 6. 19. 웹브라우저에서의 자바스크립트 웹 브라우저와 자바스크립트 웹 브라우저에서 자바스크립트를 사용하려면 어떻게 해야할까? 웹 문서 안에 사이에 실행할 자바스크립트 소스를 작섷아면 된다. script 태그는 웹 문서의 어디든 위치할 수 있고, 삽입된 위치 그 자리에서 바로 스크립트가 실행된다. 또한 script 태그는 한 문서에서 여러개 사용할 수도 있다. 되도록이면 이미지나 텍스트 등을 다 표시한 후에 실행하는 것이 좋다. 그래서 태그 직전에 자바스크립트 소스를 삽입한다. HTML, CSS와 달리 자바스크립트는 대소문자를 구분하므로 주의하자. 다음은 텍스트를 클릭했을 때 글자섹을 바꾸는 예제이다. 자바스크립트 위 텍스트를 클릭해 보세요 사실 이런 방법은 단점이 더 많다. 웹 문서가 복잡해보이고 유지, 보수가 힘들다. 그리고 여러 웹 문서에.. 2022. 6. 17. JavaScript 기초 이미 C, C++, Python 등을 학습해본적 있는 내가 나 공부하려고 정리한 내용이니, 코딩 자체를 처음 접하는 사람이 학습하기엔 부적절한 콘텐츠임. 변수 세미콜론은 꼭 적어야하는 건 아니지만 적어주는게 좋다. 문자열은 따옴표로(큰따옴표 작은따옴표 상관없음) 감싸준다. HTML 삽입 미리보기할 수 없는 소스 이런식의 변수 선언도 가능하지만, 이것이 선언인지 대입인지 구분할 수 없기에 만약 협업을 하거나 코드가 길어지면 문제가 생길수도 있다. let 또는 const를 활용하여 이를 해결할 수 있다. HTML 삽입 미리보기할 수 없는 소스 이렇게 let으로 선언하면 재차 선언이 불가능하다. const로 변수를 선언하면 재차 선언은 물론이고 변수값 수정도 불가능하다. const 변수명은 대문자로 적어주는게.. 2022. 4. 3. JavaScript 강좌 https://www.youtube.com/watch?v=KF6t61yuPCY https://www.youtube.com/watch?v=4_WLS9Lj6n4 2022. 4. 3. 이전 1 다음
