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

자바스크립트를 사용하면 특정한 사이트로 이동하거나 새 탭을 여는 등 웹 브라우저와 관련된 여러 가지 효과를 만들 수 있다. 이런 작업이 가능한 이유는 자바스크립트 내에 웹 브라우저와 관련된 여러 객체가 미리 정의되어 있기 때문이다.     브라우저와 관련된 객체 알아보기브라우저는 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 문서 생성하고 기본적인 내용 만들기 ..

자바스크립트 수업 3일 치가 남아있지만 수업을 듣기 귀찮아서 그냥 넘어가려고 했었다. 하지만 올해가 지나면 이 수업도 들을 수 없는데 아쉬운 마음이 들어 시청하고 공부해 보기로 했다.수업과 함께 앞부분에 객체에 대한 책 내용도 함께 정리해본다.    객체 알아보기객체는 프로그램에서 인식할 수 있는 모든 대상을 가리킨다. 따라서 현실에 존재하는 대상이라면 어떠한 것도 컴퓨터에 인식할 수 있는 객체로 바꿔서 표현할 수 있다. 또한 자바스크립트에서 객체는 데이터를 저장하고 처리하는 기본 단위기도 하다.   객체란?프로그래밍 언어에서 객체는 여러 가지 의미로 해석할 수 있지만, 자바스크립트에서 객체는 프로그램에서 인식할 수 있는 모든 대상을 가리킨다는 정도로 이해하면 된다. 자바스크립트는 웹 사이트나 웹 애플리..

지난 이틀 동안 풀었던 문제들 중 틀린 문제를 풀어보았다. 단 두 문제지만 무척 어려운 문제라서 꼭 알고 넘어가야 하는 문제였다.    최상위 수학 STEP 3 문제집            최상위 수학 STEP 3 틀린 문제          학습을 마치고틀린 문제 두 문제도 모두 풀어보니 정말 뿌듯하고 기뻤다. 오늘은 수학 공부에 2시간 정도 보낸 것 같다. 그 중에 45분 정도는 학습일지를 쓰는데 걸렸다. 한꺼번에 이틀치를 하려니 무척 힘들었다.다음에는 미루지 말고 매일 공부한 일지를 올려야겠다고 생각했다. 마지막 문제는 정말 어려웠다. 풀이를 봐도 처음에는 잘 이해가 되지 않았는데 이제는 알게 되었다. 공부를 하며 생각하는 힘이 길러지는 것이 참 기뻤다. 무척 어려운 문제가 많았으나 모두 잘 풀었다.

오늘 나머지 문제를 푼 것을 학습일지로 기록해본다.    최상위 수학 STEP 3 문제 풀이 노트                       학습을 마치고엊그제 이 문제들을 다 풀고 싶었으나 1시간이 넘어가기 집중력이 흐려지기도 하고 활용 문제는 내게 많이 어려웠다. 오늘도 사실 문제가 너무 어려워서 포기하고 싶은 마음이 들며 이래서 과연 내가 수학을 계속 공부할 수 있을지 의문이 들기도 했다.상심의 시간을 잠시 보내고 나서 다시 문제 앞에 앉아서 풀어보니 충분히 풀 수 있는 문제들이 많았다. 다 틀린줄 알았던 문제를 채점해보니 놀라고 말았다. 단 두 문제만 빼고 이 STEP 3 과정의 문제를 거의 다 맞혔다. 이 문제들은 모두 어려운 문제였고 계산 실수는 하나도 없었다. 역시 공부를 하면 실력이 나도 모르..

에이급 수학 STEP A 문제를 풀다가 너무 어려워서 중단하고 우선 최상위 수학 STEP 3 과정부터 풀게 되었다. 이틀에 걸쳐서 풀었지만 전날은 학습일지를 올리지 않아서 오늘 한꺼번에 올려본다.    최상위 수학 STEP 3 문제 풀이 노트                 학습을 마치고엊그제 이 과정의 9번 문제를 풀기도 했는데 8번 문제를 푸는 것을 깜박 잊어서 그냥 8번부터 오늘 푼 것으로 치기로 했다. 에이급 수학보다 최상위 수학의 난이도가 더 낮은 것 같다. 최상위 수학으로 푸니 풀 수 있는 문제들이 그래도 꽤 되었다.기본을 다지고 내일 다시 에이급 수학 문제집을 펼쳐서 잘 안 풀렸던 문제부터 다시 풀어볼 생각이다.