컴퓨터 공부하는 블로그 컴퓨터 공부하는 블로그

DOM이란? 이미 블로그에서 여러 차례 정리했지만, 'DOM'이란 것이 중요하다보니 다시 다루고자 한다. 'DOM'은 'Document Object Model'의 약자로 풀이하자면 문서 객체 모델이다. 웹페이지를 만들 때 3요소라는 'HTML', 'CSS', '자바스크립트'는 사실 서로 다른 개념이다. 'HTML' 문서 내에서 보통 세 가지를 모두 쓰다보니 햇갈릴 수 있지만 셋은 다른 언어다. 물론 세 언어는 서로 이용적인 측면에선 밀접한 관계를 갖는다. 그러나 셋은 다른 언어고 서로를 컨트롤하기 위해선 필요한 것 중 하나가 'DOM'이다. 'DOM'은 웹페이지에서 문서의 구성과 내용을 맡은 'HTML' 요소들을 다루기 위해 만들어졌다. 자바스크립트는 'HTML' 문서를 다뤄야하는데 이때 'HTML' 문..

정리하게 된 이유 자바 스크립트를 공부하다보면 생각나는게 있다. "자바스크립트는 객체에서 시작해서 객체로 끝난다." 객체를 상속하고 객체를 만들고 객체를 복사하고 객체를 구조화한다. 객체를 모르고선 자바 스크립트는 알 수가 없다. 하지만 자바스크립트에서 객체는 햇갈린다. 이미 블로그에서 객체를 여러번 정리했지만 정리할 때마다 객체가 조금씩 달라진다는 것을 느꼈다. 자료의 형태로서 객체, 구조적인 상황에서의 객체 모든 것이 미세하게 차이가 있었다. 그래서 물론 100% 맞지 않을지 모르지만 여기선 가급적 한 페이지 내에서 객체에 대해 정리하려고 한다. 객체(Object)란? 객체가 뭐냐하면 한마디로 정의할 수 없다. 왜냐면 상황에 따라 달라지기 때문이다. 1. Data Type으로서 객체 자바 스크립트에서..

타입 확인하기와 자료 비교하기 C언어,자바는 코드 작성 중 변수에 데이터를 할당할 때 사용자가 직접 자료형을 지정해야 한다. 반면 자바스크립트의 경우 사용자가 변수에 데이터를 할당할 때 자료형을 따로 지정하지 않는다. 컴파일 과정에서 알아서 코드의 내용에 따라 데이터타입이 지정되는 동적 타이핑에 따른 결과다. 하지만 실제로 코드를 작성하다보면 자료형을 비교하거나 타입을 확인해야할 때가 있다. 그럴 때는 어떻게 해야할까? 타입 확인하기( typeof ) 타입을 확인할 때는 'typeof' 명령어를 써주면 된다. typeof + 변수명 위와 같이 명령어를 써주면 해당 변수가 가진 데이터의 데이터형을 확인할 수 있다. 객체 확인하기 ( instanceof ) 'typeof' 를 사용하면 변수가 가진 데이터의 ..

자바스크립트의 복사 자바 스크립트를 이용하다보면 복사를 할 일이 많다. 이때 주의할 것이 자료형에 따라 복사의 형태가 달라진다는 것이다. 우선 기본 자료형인 Number의 복사를 보면 다음과 같다. 그 다음은 String의 복사를 보자. Number, String의 경우 자료를 복사하고 자료가 본사된 변수를 수정해도 원본에 문제가 없다. 어떻게 보면 당연한 것 처럼 보이기도 하다. 하지만 기본 자료형을 제외한 객체는 다르다. 배열 객체의 경우 복사를 시행하고 복사된 배열 객체를 수정했더니 원본이 변했다. 왜 그런것일까? 기본 자료형과 객체의 차이 자바스크립트에선 기본 자료형(primitive)과 객체(object)로 나눠진다. 그럼 이건 무슨 기준으로 나눠진걸까? 간단히 말하면 변수가 저장하고 있는 값의..

Object 객체의 정체 자바 스크립트에는 'Object'라는 'Object'가 있다. 즉 객체라는 이름의 객체가 있다. 자바 스크립트는 자바가 클래스를 상속받으며 프로그램을 구성하듯 객체를 상속받으며 구성된다. 그리고 자바스크립트 객체의 가장 맨 위에 'Object'라는 이름을 가진 객체가 있다. Object의 상속 자바 스크립트 객체의 가장 맨 위에는 'Object' 객체가 존재한다. 그래서 자바 스크립트 내에서 생성되는 모든 객체는 별도의 표시가 없어도 'Object'의 프로퍼티와 메소드를 사용할 수 있게 된다.

상속이란? 자바에서 상속은 클래스 단위로 이루어졌다. 자손 클래스는 'extend'를 통해 부모 클래스의 속성값을 물려 받았다. 자바 스크립트에서도 상속은 비슷한 의미로 쓰인다. 하지만 그 대상이 다르다. 자바 스크립트에서 상속은 클래스가 아닌 객체를 기준으로 이뤄진다. 왜 객체? 자바 스크립트는 과거 클래스가 없을 때부터 객체를 중심으로 프로그램을 짰다. 그래서 클래스 대신 객체를 상속하는 것으로 클래스를 대신했다. 그리고 이 중심에는 'prototype'이라는 속성이 있다. 프로토타입(proto type) 프로토타입(proto type)이란 자바 스크립트에 존재하는 모든 객체가 가지는 속성값을 말한다. 이 속성은 객체로서 상속 과정에 필요한 다양한 정보를 담고 있고 사용자가 추가, 수정할 수 있다. ..

위와 같은 예시를 보면 전역 변수, 전역 함수를 선언하고 실행까지 하는 것을 볼 수 있다. 일반적으로 함수명, 변수명을 이용하면 해당 함수와 변수에 설정된 데이터를 이용할 수 있다. 그렇다면 다음은 어떨까? 변수와 함수를 호출할 때 앞에 window라는 단어가 붙었다. 그러나 실행은 똑같이 된다. 이게 무슨 뜻일까? 자세히 보면 그것을 알 수 있다. 우리는 지금까지 객체를 만들고 그 안에 프로퍼티를 불러올 때 점 ( . )을 찍었던 것을 기억할 것이다. 위의 예시를 봐도 그렇다. 즉 함수나 변수를 점을 찍어서 불러올 수 있다는 것은 window의 정체는 객체란 것을 알 수 있다. window란 자바스크립트가 브라우저에서 돌아갈 때 모든 객체들의 최상위 객체로서 전역객체라(Global Object)라고도 ..

자바 스크립트의 객체(Object)란? 보통 자바(java)를 생각하면 객체는 클래스와 함께 짝지어 다닌다고 생각할 수 있다. 하지만 자바스크립트의 클래스는 최근 도입된 개념이다. 그래서 그 전에는 클래스 없이 객체를 클래스처럼 이용했다. 자바 스크립트 객체는 'key'와 'value'로 이뤄진 프로퍼티(property) 그리고 메서드의 집합이다. 일반적으로 한 개의 변수는 한 개의 값만 저장이 가능하다. 이럴 경우 변수가 가진 데이터를 명확히 알 수 있으나 여러 면에서 불편함이 생긴다. 또한 필요에 따라 변수 한개에도 여러 자료를 담아야할 경우가 생긴다. 그래서 생겨난 것이 객체(Object)다. 아래 예시를 보면 더 쉽게 이해할 수 있다. 객체(Object)의 구성 자바 스크립트 객체는 크게 둘로 나..