Code Playground

< h1 > Code Playground </ h1 >

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

오늘은 지난번 수업 시간에 배운 생성자 함수와 프로토타입 체인에 대해서 정리해보려고 한다. 생성자 함수 (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를 가리킨다. 즉, 브라우저..

자바스크립트는 또 다른 말로 ECMA스크립트(ECMAScript, ES)라고도 불린다. ECMA스크립트는 Ecma 인터내셔널의 ECMA-262 기술 규격에 정의된 표준화된 스크립트 프로그래밍 언어이다. (라고 위키피디아에서 알려줬다.) Ecma 인터내셔널이란 곳에서 자바스크립트 공식문서를 만들고 표준화하는 작업을 하는 데, 이 과정은 모두 http://ecma-international.org/ 사이트에 공개되어 있다. 하여튼 이 자바스크립트 언어도 연도별로 버전이 나눠져있는데, 우리가 지금 주로 사용하는 문법은 2015년 이전에 개발된 ES5 버전이다. 그리고 2015년에 ES6 버전이 나왔는데, 기존에 사용하던 문법과 많이 다른 새로운 형태의 문법들이 추가되었다. 예를 들면 화살표 함수라던가 let이나..

디버깅(Debugging) 이란? 우리가 어떤 소스 코드를 작성하여 실행시켰을 때, 내가 원하는 결과가 나오지 않는다면 어떻게 해야할까? 가장 일반적으로 할 수 있는 방법은 내가 작성한 소스 코드를 위에서부터 한 줄씩 읽으면서 어느 부분에서 에러가 발생하였는지 차근 차근 짚고 넘어가는 방법이다. 바로 이러한 과정을 디버깅이라고 한다. 디버깅(Debugging)은 컴퓨터에서 발생한 오류를 찾기 위해 소스 코드를 한 줄씩 따라가면서 변수값의 변화를 검사하는 과정을 말한다. 이제 debugger라는 구문을 사용하여 개발자 도구로 자바스크립트 소스 코드를 디버깅하는 방법을 정리해보려고 한다. 코드를 짜면서 개발자 도구는 항상 사용하지만 console.log()나 console.dir()외에는 별로 사용할 줄 몰..

자바스크립트, 인터프리터 언어(Interpreted Language) 보통 우리가 사용하는 프로그래밍 언어는 고급 언어(High Level Language), 컴파일러 언어라고도 한다. 즉, 기계가 이해할 수 있는 0과 1로 표현된 2진수 언어가 아니라 인간이 이해하기 쉬운 자연어와 비슷한 구조를 갖는 언어를 말한다. 이러한 고급 언어를 사용하여 프로그래밍을 하면 반드시 기계어로 번역하는 과정을 필수적으로 거쳐야 하는데, 그 과정에서 사용되는 번역기에는 두 종류가 있다. 바로 컴파일러와 인터프리터이다. 컴파일러를 사용하는 고급 언어를 우리는 Compiled Language라고 한다. 대표적인 Compiled Language에는 C언어가 있다. 컴파일러를 사용하면 프로그램 전체를 목적 프로그램으로 번역한 ..

스코프(scope) 스코프란 일종의 "범위"와 같은 것이다. 어떤 변수를 선언하였을 때, 그 변수에 접근할 수 있는 범위라고 생각하면 쉽니다. 스코프에는 Global(전역)과 Local(지역)이 있는데, Global scope는 말 그대로 어떤 함수에 종속되어있지 않고 어디서나 접근할 수 있는 전역 범위를 말한다. 반면, Local scope는 어떤 함수나 블록 단위로 국한되는 범위를 말한다. 만약에 Global scope에 어떤 변수가 선언되었다면, 그 변수는 Global Variable(전역 변수)가 된다. 반면, 어떤 변수가 Local scope에 선언되었다면, Local Variable(지역 변수)가 된다. 위 그림에서 파란색 영역이 Global scope, 보라색 영역이 Local scope이다..

어떤 언어에서든지 매우 중요하게 다뤄지는 반복문에 대해서 정리해보려고 한다. 1. for문 반복문은 어떤 동작을 여러 번 실행할 때 사용한다. 만약에 어떤 변수에 1부터 10까지 더한다고 생각해보자. 반복문이 없다면 우리는 변수에 계속해서 숫자를 더하는 코드를 10줄 써야할 것이다. var sum = 0; sum += 1; sum += 2; sum += 3; sum += 4; sum += 5; sum += 6; sum += 7; sum += 8; sum += 9; sum += 10; 이 얼마나 귀찮은(!) 100까지 더하면 100줄, 1000까지 더하면 1000줄로 늘어난다(!) 물론 컴퓨터는 매우 똑똑해서 귀찮은 반복작업을 대신 해준다. 그 때 사용하는 것이 반복문인데 가장 많이 사용되는 for문으로 ..

Javascript, The Arguments Object function makeSum (num1, num2) { return num1 + num2; } makeSum(4, 7); 만약에 위와 같이 어떤 숫자의 합을 구하는 간단한 function을 만들었다고 해보자. 함수 파라미터로 num1, num2에 각각 숫자를 넣으면 그 숫자의 합을 구해서 return하는 함수이다. 그런데 위와 같이 함수를 만들면 우리는 딱 2개의 숫자만 더할 수 있다. 그러니까 즉, 함수를 처음 만들 때 지정한 parameter의 개수만큼만 가져와서 연산할 수 있다는 말이다. 그렇다면 만약에 어떤 경우에는 파라미터로 3, 5, 6, 8을 넘겨주고 이 숫자들의 합을 구하고 어떤 경우에는 7, 34, 2, 7, 8, 23, 4 이..