클라이언트/ 서버/ 엔지니어 "게임 개발자"를 향한 매일의 공부일지

단원 마무리를 하며 연습 문제를 풀어보려고 한다.    단원 마무리하기           마무리 연습문제 풀기 문제 1번        문제 풀기  실행 흐름HTML 문서가 로드되면, 모든 class="check" 요소에 클릭 이벤트 리스너가 추가됨사용자가 각 체크박스를 클릭하면클릭된 체크박스와 해당 텍스트가 회색(#ccc)으로 변경됨텍스트에 취소선(line-through)이 표시됨효과적으로 "할 일 완료" 상태를 시각적으로 표시  체크박스를 클릭하면 이처럼 취소선이 그어지고 색깔이 연해진다.    문제 2번     문제 풀기 1. 스타일 요소 추가하기   2. 테이블 만들기  문제에서 여기까지는 주어졌어야 하는데 코드를 작성할 때 이 부분을 빠뜨린 것 같다.   3. 여러 행과 열 추가하기 실행 흐름사용..

텍스트 입력 실습을 하며 마지막 학습을 이어가 볼 것이다.   DO IT 실습 - 텍스트 필드에 입력한 값을 화면에 표시하기텍스트 피드에 입력한 내용을 화면에 표시하려면 단순히 document.write() 문으로 작성할 수 있다. 하지만 이제는 DOM을 공부했으니, 텍스트 필드에 입력한 내용을 새로운 노드로 만들어서 화면에 표시하는 방법을 연습해 보겠다. 1단계 : HTML 파일 확인하기파일을 열면 텍스트 필드와 추가 버튼이 보인다. 테스트 필드에 값을 여러 번 입력하면 화면에 입력값이 여러 개 나타나도록 수정해 보겠다.   id값을 확인해 보면 subject이다. 이제 텍스트 필드에서 입력받은 id값을 itemList에 표시하겠다.   2단계 : 새 로운 요소 만들고 연결하기새로 만들 요소는 태그 ..

웹 문서에서 처음 화면에는 내용이 보비지 않다가 클릭이나 이벤트가 발생하면 내용이 나타나는 경우가 있다. 이러한 동작은 CSS의 sisplay 속성을 사용해서 만들 수도 있지만 DOM 트리에 새로운 노드를 추가하는 방법도 있다. 이때 주의할 점은, 노드를 추가하면 단순히 요소 노드뿐 아니라 텍스트와 속성 노드도 함께 추가해야 한다는 것이다.     노드 리스트란?DOM에서 새로운 노드를 만들어 추가하거나 삭제하려면 노드 리스트를 사용해야 한다. 그렇다면 노드 리스트란 무엇일까? DOM에 접근할 때 querySelectorAll() 메서드를 사용하면 노드를 한꺼번에 여러 개 가져올 수 있다. 이때 노드 정보를 여러 개 저장한 것이 노드 리스트이다. 배열과 비슷하게 동작한다. 노드 리스트 살펴보기   확인해..

이번에는 CSS 속성에 접근하여 이벤트를 처리하는 방법에 대해서 알아보겠다.    CSS 속성에 접근하기자바스크립트를 이용하면 스타일 속성값을 가져와서 그 값을 원하는 대로 수정할 수 있다. 자바스크립트에서는 각 요소의 스타일을 자유롭게 수정할 수 있으므로 웹 문서에서 다양한 효과를 만들 수 있다.CSS 속성에 접근하려면 해당 스타일이 적용된 HTML 요소 다음에 예약어 style을 쓰고 속성을 적는다.document.요소명.style.속성명  예를 들어 id가 desc인 요소의 글자를 빨간색으로 변경하려면 다음과 같이 작성한다.  이렇게 해당 글자가 빨간색으로 바뀌었다. color처럼 한 단어인 속성명은 그대로 사용하면 되지만 background-color, border-radius처럼 중간에 하이픈이..

웹 문서에서 이벤트가 발생하면 이벤트 처리기를 연결해야 한다. HTML 태그에서 이벤트 처리기를 연결할 수도 있지만 태그와 스크립트 소스가 섞여 있어서 복잡한 프로그램에서 적합하지 않다. 이럴 때 DOM에서 이벤트 처리기를 연결하면 HTML 태그와 스크립트 소스를 분리할 수 있다.    DOM 요소에 함수 직접 연결하기이벤트 처리기 함수가 간단하다면 DOM 요소에 직접 연결할 수 있다. 예를 들어 다음 예제는 img 요소를 가져와 변수에 저장한 후 onclick을 사용해 변수에 이벤트 처리기(함수)를 직접 연결한다. 이미지를 클릭하면 알림 창이 나타나지만 이미지 외의 다른 곳을 클릭하면 실행되지 않는다. 이미지를 클릭하면 알림 창 표시하기       함수 이름을 사용해 연결하기이벤트가 발생했을 때 실행할..

웹 문서에서 사용한 여러 이미지 가운데 하나만 골라서 크기를 바꾸려면 콕 집어 지정할 수 있어야 한다. 이렇게 웹 문서에서 원하는 요소를 찾아가는 것을 '접근한다'고 한다. 여기서는 자바스크립트를 사용해 DOM에 접근하는 몇 가지 방법을 알아보겠다.    DOM에 접근하기CSS에서는 class, id, 태그 등의 스타일을 각각 구별해서 정의해야 한다. 이때 class, id, 태그 등을 선택자라고 한다. 이 선택자를 사용해서 DOM에 접근하는 방법을 알아보겠다.  id 선택자로 접근하는 getElementById() 메서드특정한 id가 포함된 DOM 요소에 접근할 수 있다.요소명.getElementById("id명")    class값으로 접근하는 getElementsByClassName() 메서드지정한..

오후에는 집중력이 좀 떨어지고 쉬고 싶은 마음이 든다. 그래도 1시간이라도 공부를 진행해볼 것이다. 자바스크립트에서 웹 문서의 객체를 다루는 시스템을 문서 객체 모델이라고 한다.DOM은 문서 객체 모델의 줄임말이다.    문서 객체 모델이란?웹에서 자바스크립트를 사용하는 이유는 어떤 조건에 맞거나 사용자의 동작이 있을 때 웹 문서 전체 또는 일부분이 동적으로 반응하게 하는 것이다. 이렇게 반응하게 하려면 웹 문서의 모든 요소를 따로 제어할 수 있어야 한다.이때 알어야 할 개념이 있는데 바로 문서 객체 모델이다. 자바스크립트를 이용하여 웹 문서를 체계적으로 정리하는 방법이다.  HTML 언어로 작성한 웹 문서의 DOM을 HTML DOM이라고 하며, XML 문서에서 사용하는 XML DOM도 있다. DOM은 ..

이제 자바스크립트 기초 과정 3주차 수업을 마무리하려고 한다. 마지막 강의만 남아있는 상태다.    이론 4 - 이벤트(Event)      this는 자기 자신인 p를 의미한다.        퀴즈 5 - 이벤트     문제를 틀렸다. 다시 한번 풀어보기로 하자.     “이벤트란 자바스크립트와 같은 프로그래밍 언어가 HTML에 발생시키는 사건을 말합니다.”라고 되어 있는데, 이 설명이 올바르지 않은 이유는 이벤트가 HTML에서 발생하는 것이 아니라, 웹 브라우저가 HTML 요소에 대한 사건을 감지하고 발생시키는 것을 의미한다.즉, 자바스크립트는 HTML 요소에 대한 이벤트를 처리하는 역할을 하지만, 이벤트 자체는 HTML로부터 발생하는 것이 아니고, 브라우저가 이러한 이벤트를 관찰하고 사용자와 웹페이지..

배열과 객체의 기초적인 내용을 학습했다면 이번에는 DOM이라는 요소에 대해서 공부해 보겠다. 엘리스로도 이론 학습을 진행했지만 그 수업은 미리 맛보기 같은 수업이라 개념을 간단하게 설명할 때가 많았다.수업을 들으며 DOM에 대해 자세히 익혀보기로 하자.   DOM에 대한 개념 학습  document는 HTML 파일을 가리치는 말이다.      소스 코드를 살펴보면 문서가 하나로 정리되어 있지만 실제로 확인해보면 태그, 속성별로 같은 것끼리 묶어 있다. 이러한 것들을 쪼개서 관리하는 것이 DOM이다.           우리 눈에는 한 장짜리 문서는 원래 이렇게 각각 나누어져 있다.  이 문서들의 최상위 문서는 document이다.     DOM 실습해보기 1. HTML 문서 생성하고 기본적인 내용 만들기 ..