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

텍스트 입력 실습을 하며 마지막 학습을 이어가 볼 것이다.   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은 ..

이벤트 실습을 하나 진행하고 아침에 하지 못한 수학 문제도 풀며 아침 공부를 마무리할 생각이다. 하지만 영어공부는 여전히 흥미가 생기지 않아 12월까지 공부를 쉬다가 내년에 한번 다른 방식의 공부법을 찾아볼 생각이다. 여러 번 도전했으나 그래도 관심 없는 것들은 아직 때가 아니거나 다른 방식으로 접근해야 할 필요가 있다.내가 한번 결심한 것을 포기한 적은 없으니 언젠가는 코딩처럼 영어 공부도 열심히 하게 될 날이 있으리라 본다. 지금은 다른 공부하기에 바빠 시간적인 여유가 사실 없다.   이벤트 실습해보기 1. 새 파일 만들고 기본적인 내용 작성하기 버튼을 3개 만든 후, 스크립트 태그에 다음과 같은 코드를 작성한다.   2. 이벤트를 부여하는 3가지 방식 1 - 인라인 방식 앞서 진행했던 것처럼 버튼 ..

지금까지 배운 내용을 한번 점검해 보는 미션 문제를 하나 풀고 다음 과정의 실습을 진행해 보겠다.     인풋 태그 미션 문제 풀기 버튼을 클릭했을 때 해당 글자와 이미지가 출력되는 프로그램을 만들어볼 것이다.    1. html 파일 생성하고 기본 내용 작성하기    2. 나머지 코드 작성해 보기   이렇게 이미지까지 모두 출력이 잘 되었다.      스타일 실습해 보기 1. html 파일 만들고 기본적인 내용 작성하기 style 태그로 변경했던 내용을 이번에는 버튼을 눌렸을 때 색이 변경되도록 만들어볼 것이다.    2. 스타일에 접근하여 색깔 변경하는 코드 작성하기 이렇게 작성하고 실행해 보자.     하지만 버튼을 아무리 눌러도 색깔이 변경되지 않았다 그 이유가 무엇일까? Text라고 작성한 것을..

이전 실습과 비슷하지만 이번에는 사용자가 임의로 입력한 input 태그의 입력값을 가져오는 실습을 진행해볼 것이다.   인풋 실습해보기  사용자가 어떤 내용을 입력하고 클릭 버튼을 누르면 해당 내용이 알림창을 통해 나타나는 실습이다. 이전까지는 h1, p 태그 등 개발자가 미리 만들어놓은 텍스트로 추출했다면 이번에는 사용자가 입력한 데이터를 추출한다.   1. HTML 파일 만들고 기본적인 내용 입력하기 기본적인 내용을 작성했으니 이제 script에 코드를 작성해보겠다.    2. input 태그 안의 내용을 alert 창으로 출력하기   하지만 입력된 값이 결과로 나오지 않았다. innerText와 innerHTML은 안에 있는 글자를 가져오는 것이다. input 태그와 p 태그의 차이는 닫는 태그의 ..

어제에 이어 오늘도 자바스크립트 수업을 듣고 학습일지를 정리해 보겠다. 이번에는 업다운 실습을 진행해 본다.   업다운 버튼 실습해 보기    1. html 파일 만들고 기본 메뉴 작성하기    2. 버튼에 클릭 버튼 추가하고 증가 감소를 실행할 함수 제작하기  0이라는 데이터에 숫자 1을 더하는 코드를 작성하되 이 값을 다시 담아주어야 한다. 하지만 이 데이터는 문자열이므로 숫자 형태로 변환해야 한다.  이제 클릭을 할 때마다 증가하고 감소한다. 하지만 감소 버튼을 클릭하면 감소하지 않는데 아직 코드를 작성하지 않았기 때문이다.   3. 감소 버튼을 눌렀을 때 실행하는 코드 작성하기  이제 감소도 잘 된다. 작동은 잘 되지만 이런 식으로 코드를 짜면 매우 길어진다. 코드를 짤 때 가장 신경 써야 하는 ..