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

미션 문제 두 문제를 풀며 이 단원을 마무리해 볼 것이다. 미션 1 - 상자의 크기와 위치를 변경하기 이렇게 상자가 있는데 코드를 추가해서 상자의 크기를 변경하고 위치를 이동하는 문제이다. 문제 풀기 1. 풀이 참고하며 문제 풀기이 문제는 어떻게 풀어야 할지 감이 전혀 오지 않아서 헬퍼에게 물어보았다. 그래도 모르겠고, 이전에 공부했던 실습 파일을 찾아봐도 하나도 모르겠기에 한번 더 물어보면서 풀었다. 결국 내가 혼자서 작성한 코드는 하나도 없었다. 아직 이 부분은 공부가 많이 부족함을 느꼈다. 이 코드는 box라는 ID를 가진 요소와 btn이라는 ID를 가진 버튼을 각각 선택하고, 버튼 클릭 시 move 함수를 호출하여 상자의 크기와 위치를 변경합니다.하지만 상자의 크기가 ..

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

16장 단원을 마무리하며 연습문제를 풀어보려고 한다. 벌써 오늘 새벽 공부를 시작한지 2시간 반이나 지났다. 남은 2시간 반도 열심히 열정을 불태울 것이다. 단원 한눈에 정리하기 단원 마무리 문제 문제 1번 아직은 시간이 나타나지 않는다. 이것을 시간이 나타날 수 있도록 코드를 수정해볼 것이다. 문제 풀기 이 문제는 잘 몰라서 정답을 참고하면서 풀었다. 현재 시각이 잘 나오고 있다. 문제 2번 여기에 현재 시간이 팝업 창으로 나타나게 해야 한다. 문제 풀기 코드를 이렇게 작성했는데 틀린 것 같다. 현재 시간도 표시되지 않고 팝업 창에 뭔가 나오긴 했으나 이상한 내용만 떴다. 이번에는 정답을 참고하며 풀어보기로 하자. 코드 수정하기 시간 함수를 붙일 필요가 없었..

브라우저와 관련된 객체 중 navigator 객체부터 학습을 진행해 보겠다. navigator 객체 중에서 건너뛰고 넘어가고 싶은 부분이 있었지만 그냥 모두 학습해 보기로 했다.    navigator 객체navigator 객체에는 웹 브라우저의 버전을 비롯해 플러그인 설치 정보나 온오프라인 등의 여러 정보가 담겨 있다. 이 정보는 사용자가 수정할 수 없으며 가져와서 보여 줄 수만 있다. 웹 브라우저와 렌더링 엔진웹 브라우저가 점점 다양해짐에 따라 모든 사용자의 웹 브라우저에서 똑같이 동작하는 웹 문서를 개발할 필요성이 생겼다. 여러 웹 브라우저를 고려하여 개발하는 것은 웹 개발자에게 가장 어려운 부분이기도 하다.여러 웹 브라우저를 고려할 때 가장 먼저 생각해야 할 분야는 랜더링 엔진이다. 아직 표준화되..

자바스크립트를 사용하면 특정한 사이트로 이동하거나 새 탭을 여는 등 웹 브라우저와 관련된 여러 가지 효과를 만들 수 있다. 이런 작업이 가능한 이유는 자바스크립트 내에 웹 브라우저와 관련된 여러 객체가 미리 정의되어 있기 때문이다.     브라우저와 관련된 객체 알아보기브라우저는 HTML 소스를 한 줄씩 읽으면서 화면에 내용을 표시하고 관련된 객체를 만들어 낸다. 웹 브라우저가 열리면 가장 먼저 window라는 객체가 만들어지고 밑으로 하위 요소에 해당하는 객체들이 나타난다. 이 하위 객체는 웹 문서와 주소 표시줄처럼 브라우저 요소에 해당하며 각각 다른 하위 객체를 가진다.이렇게 만들어진 자바스크립트의 객체는 다음과 같은 계층 구조를 보인다.   주로 사용하는 내장 객체는 다음 표로 정리할 수 있다.  ..

이제 Date 객체와 Math 객체에 대해서 공부해보겠다.    Date 객체Date 객체는 날짜와 시간 정보를 나타낼 수 있다. Date 객체는 현재 날짜와 시간을 출력하거나 달력을 표ㅅ할 수도 있고, 특정일까지 얼마나 남았는지 알려 주는 등 사이트에서 여러 가지로 응용할 수 있다.  1. Date 객체 인스턴스 만들기자바스크립트에서 Date 객체를 사용하려면 우선 Date 객체의 인스턴스를 만들어야 한다. 현재 날짜로 설정할 경우에는 다음과 같이 간단히 예약어 new를 붙여 주면 된다.Date 객체로 현재 날짜 나타내기new Date();  특정한 날짜를 저장한 Date 객체를 만들고 시 ㅍ다면 Date 다음에 붙이는 괄호 안에 날짜 정보를 입력해야 한다. Date 객체로 특정 날짜 나타내기new D..

자바스크립트 내장 객체에는 웹 문서의 계층 구조와 상관없이 나타낼 수 있는 객체가 있다. Array 객체와 Date 객체가 대표적이다. 여기에서는 내장 객체의 주요 프로퍼티와 메서드를 살펴보겠다.    1. Array 객체Array 객체는 자바스크립트의 여러 가지 내장 객체 중에서 배열을 다룬다. 배열은 자바스크립트에서 자주 사용하는 자료형이므로 Array 객체의 주요 프로퍼티와 메서드를 잘 알고 사용하는 것이 중요하다.  1) Array 객체로 배열 만들기자바스크립트에서는 배열을 쉽게 만들고 다룰 수 있는 Array 객체가 내장되어 있다. Array ㅐㄱㄱ체를 사용하려면 먼저 인스턴스를 만들어야 한다. 초기값이 없는 상태에서 단순히 객체의 인스턴스만 만든다면 new 예약어를 사용해 변수에 할당하면 된다..

DOM으로 버튼을 만드는 실습을 진행해볼 것이다. 실습이 조금 길어서 다음날까지 수업이 이어졌다.    DOM 버튼 생성 실습해보기    문제 풀기 1. 버튼을 클릭하면 태그가 생성되도록 하기메뉴 구성을 만들어보겠다. 버튼을 클릭하면 태그가 생성되도록 만든다. 이제 버튼을 누를 때마다 동적으로 만들어지도록 코드를 추가한다.   2. 태그를 클릭하면 alert창이 실행되도록 하기  하지만 지금은 클릭을 해도 태그가 나오지 않는다.   3. 버튼에 스타일 적용하기  html과 자바스크립트가 분리가 되지 않고 좋은 방식은 아니다. 태그를 확인하면 모두 다 볼 수 있는 보완에 취약하다는 문제점이 있다.  앞으로 할 실습 프로세스를 정리해보았다.   4. 실습 프로세스 구조 작성하고 텍스트 추가 태그 생성하기  ..

이어서 셋째날 수업의 마지막 교시를 들어보며 DOM 실습을 진행해보겠다. 오늘 넷째날 수업까지 들으려고 하는데 과연 할 수 있을지 모르겠다.   DOM 실습 해보기 1. id가 텍스트인 요소 가져와서 출력하기    2. innerText와 innerHTML의 차이점 둘은 서로 같지만 약간의 차이점이 있다. HTML은 태그를 인식하지만 텍스트는 태그를 인식하지 못한다. h1 태그를 span 태그로 감싸보자.    3. 텍스트 변경하기  HTML은 변경할 수 없지만 자바스크립트에서는 이 내용을 변경할 수도 있다. 이 텍스트를 p 태그로 감싸면 다음과 같다.    html의 차이점은 태그라는 것을 알고 있기에 개발자 도구에 들어가면 p 태그임을 확인 수 있다.   4. innerHTML로 변경했을 때    D..

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