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

'DOM'은 'HTML' 문서의 요소와 내용들을 객체화시킨 것이다. 그리고 이러한 객체에 접근하여 컨트롤을 해줄 수 있다. 그리고 이때 접근하기 쉽게 메서드와 프로퍼티가 제공된다. 여기서는 문서의 요소(Element) 노드에 어떻게하면 접근할 수 있는지를 알아본다. 단일 요소에 접근하기 1. getElementById() 대략 해석해서 쓰자면 다음과 같다. '파라미터로 주어진 문자열과 동일한 id값를 통해 요소를 얻을 수 있게 한다.' 'getElementById()'에 제공한 문자열과 동일한 'id' 속성을 가진 요소를 HTML 문서에서 찾아준다. 그리고 이 'id' 속성을 가진 'Element' 객체를 반환한다. 즉 해당 요소를 이용할 수 있게 도와준다는 말이다. ID테스트입니다. 코드는 위와 같다...

every와 some 메서드를 사용하면 배열 안에 특정 조건을 만족하는 요소가 있는지 판별할 수 있다. some 메서드 some 메서드는 배열 안의 요소 중 some이 파라미터로 받은 콜백함수의 조건에 맞는 요소가 단 한 개라도 있으면 true를 반환한다. 이때 some 메서드로 호출한 콜백함수는 some 메서드를 호출한 배열 요소, 배열의 인덱스, 배열 그 자체를 파라미터로 받아올 수 있다. every 메서드 every 메서드는 배열 안의 모든 요소가 every가 파라미터로 받은 콜백함수의 조건에 모두 해당되야 true를 반환한다. 이때 every 메서드로 호출한 콜백함수는 some 메서드를 호출한 배열 요소, 배열의 인덱스, 배열 그 자체를 파라미터로 받아올 수 있다.

sort(), reverse()의 문제점 자바스크립트에서는 배열을 정렬하는 Sort()라는 메서드가 있다. 이 메서드를 이용하면 위 코드처럼 유니코드에 의거해서 배열의 요소들을 오름차순에 따라 정렬한다. 내림 차순으로 정렬하고 싶을 땐 reverse() 메서드를 사용하면된다. 그런데 뭔가 좀 이상하다. 숫자 배열의 경우 해당 숫자를 숫자로서 비교하는 것이 아니다. 유니코드로 변환하여 문자열처럼 비교하므로 결과가 이상하게 나온다. 배열이 문자열일때는 괜찮은데, 숫자 배열의 경우 단순 sort(), reverse()로는 정렬에 오류가 난다. 고차함수를 활용한 sort 활용법 이럴 때는 고차함수를 활용하여 sort 메서드의 정렬 기준을 다시 설정해주면 된다. 우선 코드를 보자. 위 코드를 보면 sort() 메..

함수형 프로그래밍(Functional Programming)이란? 함수형 프로그래밍은 자료의 처리를 함수의 계산으로서 취급하는 프로그래밍의 한 형태다. 기존의 프로그래밍이 직접 손으로 짜거나 불완전한 구조였다면 함수 프로그래밍은 함수를 적극 활용하여 외부 입력에 따라 결과가 달라지거나 하는 등을 지양하는 프로그래밍이다. 이때 사용되어야 하는 함수는 함수의 결과가 프로그램의 상태를 바꾸지 않고 함수의 결과값은 오로지 함수에게 주어진 입력된 인수에만 의존해야 한다. 또한 결과값은 항상 일정해야 한다. 고차 함수(Higher-Order Function)란? 함수형 프로그래밍을 하다보면 그 중 하나인 고차 함수를 쓰게 된다. 그리고 이 고차 함수의 조건은 다음과 같다. ● 하나 이상의 함수를 인수로 취할 수 있..

배열(Array)이란? 1개의 변수에 여러 개의 값을 순차적으로 저장할 때 사용한다. 자바 스크립트의 배열은 객체이며, 유용한 내장 메소드를 가졌다. 이때 자바 스크립트 배열은 다음과 같은 특징을 갖는다 1. 배열 요소의 타입이 고정되지 않아 한 배열 안에도 배열 요소의 타입이 다를 수 있다. 2. 배열 요소의 인덱스가 연속적이지 않아도 되고, 특정 배열 요소가 비어있을 수 있다. 3. 자바 스크립트에서 배열은 Array 객체로 다뤄진다. 배열의 생성 1. 배열 리터럴 let animal = ["사자", "호랑이", "강아지", "독수리", "너구리"]; 리터럴 방식으로 배열을 만들 땐 대괄호 ( [ ] ) 안에 ( , ) 쉼표 기준으로 요소들을 써넣으면 된다. 2. 생성자를 이용한 배열 let worl..

Object는 앞서 말했듯 자바스크립트에서 굉장히 중요한 개념이다. 그런데 이 Object의 구조나 분류 등은 자바스크립트 상황에 따라서 달라진다. 다만 대체로 보면 ECMAScript에 따른 분류를 보면 다음과 같다. 네이티브 객체 네이티브 객체(Native Object)는 애플리케이션 전역의 공통 기능을 제공한다. 네이티브 객체는 어느 애플리케이션이든 관계없이 사용이 가능하다. Object, String, Number, Function, Array, RegEXP, Date, Math와 같은 객체 생성에 관계가 있는 함수 객체와 메소드로 구성된다. 네이티브 객체를 'Global Object'라고도 부르는데, 이것은 전역 객체(Global Object)와는 다른 개념이다. 네이티브 객체의 종류는 다음과 ..

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

애니메이션란? HTML에 적용되는 CSS스타일을 다른 CSS스타일로 바꿀 때 부드럽게 변화시킨다. 애니메이션은 애니메이션 대상이 되는 CSS스타일과 애니메이션 시퀀스를 나타내는 복수의 키프레임으로 이뤄진다. 애니메이션과 트랜지션 물론 트랜지션으로도 애니메이션 효과를 나타낼 순 있으나 animation 그 자체보단 제한적이다. 그리고 트랜지션은 꼭 자바스크립트가 있거나 가상 클래스 선택자가 있어야 움직인다. 하지만 애니메이션은 그런것 없이 혼자 가능하다. 애니메이션은 트랜지션보다 더 나아가 그 안에서 세부적인 움직임, 시간 등도 구현이 가능하다. 애니메이션과 자바스크립트 물론 CSS애니메이션은 컴퓨터 리소스면에선 효율적이긴하다. 다만 경우에 따라 자바스크립트를 사용하는 것이 더 편하게 사용할 수 있기도 하..