Code Playground

< h1 > Code Playground </ h1 >

문서 객체 모델은 영어로 "Document Object Model"이라고 하고 줄여서 DOM(돔)이라고 부른다. DOM이란 웹 문서의 모든 요소를 자바스크립트를 이용하여 조작할 수 있도록 객체를 사용하여 문서를 해석하는 방법을 말한다. 이게 무슨 말인가 하면 우리가 텍스트 에디터로 웹 문서를 작성하여 브라우저로 실행시키면 이 웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 적재해야 한다. 즉, 웹 문서의 모든 Element와 Attribute, Text들을 브라우저가 이해할 수 있도록 각각 객체로 만들고 이 객체들의 관계를 트리 구조로 구성한 것이 DOM이다. 웹 문서 자체를 가리키는 DOM 요소 중 하나인 document를 한 번 콘솔 창에 입력해보자. 콘솔에 출력되는 값을 펼쳐보면 웹 문서의 구..

그러니까 내가 바닐라코딩을 알게 된 건 작년 겨울이었다. 그 때가 웹 퍼블리셔로 일한 지 한 8개월 쯤 지났을 때였다. 어떤 프로젝트에 투입되어 다른 회사로 파견 근무를 간 상황이었는데, 다른 회사에서 파견 온 개발자 한 명과 친해지면서 이런 저런 장래 계획에 대해 얘기를 나누게 되었다. 그 때 한창 개발자로 전향을 하느냐 마느냐로 고민을 하고 있었는데 마침 그 개발자가 자기 친구가 다녔다는 바닐라코딩 부트캠프에 대해서 얘기를 해주었다. 바닐라코딩을 수료하고 프론트엔드 개발자로 취업하여 잘 지낸다는 얘기를 듣고 바로 검색을 해보았는데, 그냥 흔하게 생각하던 학원이랑 조금 달랐다. 그 때까지 내 머리 속의 IT 학원이란 그냥 흔한 국비지원 컴퓨터 학원이었다. 국비지원 카드만 있으면 언제든지 공짜로 수강할 ..

오늘은 지난번 수업 시간에 배운 생성자 함수와 프로토타입 체인에 대해서 정리해보려고 한다. 생성자 함수 (The Constructor Function) 생성자 함수란 쉽게 말해서 new 키워드와 함께 쓰이는 함수이다. 우리가 직접 함수를 정의하여 new 키워드로 생성자 함수를 만들어 사용할 수도 있지만, 자바스크립트에 기본적으로 내장된 생성자 함수를 사용할 수도 있다. new Array(); new Object(); new Function(); 바로 이 3가지이다. 생성자 함수는 특이하게 함수의 이름이 모두 대문자로 시작한다. 그래서 우리가 생성자 함수를 직접 정의해서 쓸 때에도 관례적으로 함수 이름의 첫 글자를 대문자로 쓴다. var arr = []; var arr = new Array(); 이 두 코..

무한 루프 슬라이드 오늘은 자바스크립트로 구현해 본 무한루프 슬라이드를 정리해보려고 한다. 예전에 제이쿼리를 사용해서 슬라이드를 구현해본 적은 있지만 마지막 슬라이드에서 첫번째 슬라이드로 자연스럽게 옆으로 넘기는 이벤트는 구현하지 못했었다. 이번엔 제이쿼리 사용없이 순수하게 바닐라 자바스크립트로 무한루프 기능과 페이지네이션 기능까지 만들어보려고 한다. 1 2 3 4 5 Prev Next 먼저 HTML코드는 이렇다. div.slide_content 안에는 원하는 img태그를 추가하면 되는데, 이미지 추가하기가 귀찮아서 슬라이드 각각의 배경색만 다르게 하여 만들 생각이다. 페이지네이션은 일단 동적으로 추가할 예정이라서 ul 태그만 만들어두었다. 이제 css를 작성해야 하는 데, 일단 슬라이드가 움직이는 원리..

Javascript, This. 자바스크립트에는 this라는 키워드가 있다. this는 문맥에 따라서 다양한 값을 가지는 데, this가 쓰이는 함수를 어떤 방식으로 실행하느냐에 따라서 그 역할이 구별된다. this의 값들은 크게 4가지 정도로 나눌 수 있다. 즉, this를 이용하는 함수를 4가지 방식 중에서 어떤 방식으로 실행하느냐에 따라 this의 값이 결정된다는 뜻이다. 이러한 특성 때문에 this가 무엇을 지칭하는지 알기 위해서 우리는 this가 사용된 함수가 어디서 어떻게 실행되었는지를 찾아야만 한다. 1. 일반 함수 실행 방식 (Regular Function Call) 첫 번째로, 일반 함수 실행 방식으로 함수를 실행했을 때 this의 값은 Global Object를 가리킨다. 즉, 브라우저..

직각삼각형 숫자 채우기 (1) 1 0 0 0 0 2 3 0 0 0 4 5 6 0 0 7 8 9 10 0 11 12 13 14 15 직각삼각형 모양으로 숫자 채워넣는 문제는 먼저 표로 행과 열의 인덱스 번호를 써보면 쉽게 만들 수 있다. i (row) j (column start) j (column end) 1 0 0 0 0 0 0 0 2 3 0 0 0 1 0 1 4 5 6 0 0 2 0 2 7 8 9 10 0 3 0 3 11 12 13 14 15 4 0 4 일단 위 표와 같이 행의 인덱스 번호는 0 1 2 3 4 이다. 숫자가 써지는 영역의 시작 인덱스는 0으로 고정이고 끝 인덱스는 행의 인덱스 번호와 동일하게 0 1 2 3 4 로 1씩 증가한다. 0행일 때, 열 번호가 0번부터 0번일 때까지 숫자가 써..

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 지난번에 배열을 정리하면서 사각형 모양으로 숫자를 출력하는 코드를 정리했었다. (단 주의해야할 것은 아래 코드는 0행 0열이 아닌 1행 1열부터 숫자를 채운 코드이다.) #include #define NUM 5 int main() { int row, col, i, j, k = 0; int arr1[NUM + 1][NUM + 1] = { 0 }; //사각형 도형 채우기 printf("-----------------------\n"); for (row = 1; row

1. Sum = (1 * 10) + (2 * 9) + (3 * 8) + ... + (10 * 1) #include #define NUM 10 int main() { int sum = 0, cnt, m, i = 0, j = NUM + 1; for (cnt = 1; cnt

1. 1부터 100까지 합과 차 반복 (Sum = 1 - 2 + 3 - 4 + ... + NUM(10) 항까지의 합) #include #define NUM 10 int main() { int i = 0, cnt, sw = 1, m, sum = 0; for (cnt = 1; cnt

#include int main() { int i, j, k; for (i = 2; i