HwiDoorumi

전달인자의 개수에 따라 서로 다른 처리를 해줘야하는 함수

호출된 인자 개수에 상관없이 이들 각각의 값을 모두 더해 리턴하는 함수의 예제이다.

이전 포스팅에서 확인 해보았듯이, 전달인자의 수와 호출함수의 매개변수의 수가 달라도 호출이 가능한 것을 이용한 예제이다.

function sum(){
  var result = 0;
  for(var i=0; i<arguments.length; i++){
    result = result+arguments[i];
    // result(0) = 0 + 1
    // result(1) = 1 + 2
    console.log(result);
  }
  return result;
}
console.log(sum(1,2)); // 출력값 3
console.log(sum(1,2,3)) // 출력값 6

위의 예시에 대한 해설은 다음과 같다.

1. arguments(전달인자)의 length는 2이다.

2. for문을 통해 0번인덱스, 1번인덱스 총 두번의 루프가 돈다.

3. for문이 끝나면 result를 반환한다.

예시를 보면 함수의 개수를 arguments 객체로 받아서 for문으로 값이 끝날때까지 더한 후 result를 반환한다.

arguments객체는 유사배열 객체 로써, 전달받은 인자로 배열과 비슷한 형태를 가진다.

1. 함수로 호출할 때 넘겨진 인자(배열형태) : 함수를 호출할 때 첫번째 인자는 0번 인덱스, 두번째 인자는 1번 인덱스 등등

2. length 프로퍼티 : 실제 배열의 length가 아닌 유사배열 객체로서의 length. 함수를 호출할때 넘겨지는 인자의 개수를 의미

3. callee 프로퍼티 : 현재 실행 중인 함수의 참조값 (위의 객체에서는 sum() 함수가 callee 프로퍼티가 된다.)

* 전달인자의 개수에 상관없이 유사배열객체의 length 프로퍼티로 바인딩을 할 수 있다.

arguments 객체의 사용법

arguments란 전달인자로 통해 할당되는 일회성 매개변수 이다.

실제로 값이 존재하는것이 아닌, 전달인자에서 전달해주는 값에 의해 일회성으로 사용 되는 변수다.

이전 포스팅에서 자바스크립트는 느슨한 타입체크 라고 하였는데, 매개변수 에서도 상당히 유연하게? 전달인자를 받는다.

이 말은 함수를 호출할때 필요로 하는 매개변수의 수에 맞추지 않아도, 해당 함수를 호출할 수 있다는 것이다.

function argVar(arg1, arg2){
console.log(arg1, arg2)
}

argVar();           // undefined, undefined
argVar(1);          // 1 undefined
argVar(1, 2);       // 1 2
argVar(1, 2, 3);    // 1 2

위의 코드를 보면 argVar() 의 형식으로 argVar 함수를 호출하였다.

함수를 보면, 매개변수로 arg1과 arg2의 매개변수를 필요로 하지만,

아래 호출방식을 보면 전달인자의 수가 달라도 에러를 발생하지 않고 함수를 정상적으로 호출한다.

정리를 하면 다음과 같다.

1. 정의된 함수의 인자보다 적게 함수를 호출할 경우, 넘겨지지 않은 인자에는 undefined 값이 할당된다.

2. 정의된 함수의 인자가 함수의 매개변수보다 많을 경우, 초과된 전달인자는 무시된다.

3. 호출 함수명이 같다면, 매개변수의 수에 상관없이 에러를 발생시키지 않고 호출한다.

CSS란 무엇인가?

css는 documents가 사용자에게 화면을 어떻게 보여질까를 기술하는 언어이다.

오늘날 웹표준 에서는 구조와 표현, 행위를 각각 분리해서 개발 하기를 권유한다.

구조 : 웹 컨텐츠에 의미를 부여한  마크업 소스 (HTML)

표현 : 마크업에 대한 시각적인 디자인을 표현 (CSS)

행위 : 브라우저의 상호작용과 동적인 표현을 담당 (JavaScript)

이전 포스팅 [CSS] CSS란 무엇인가? 를 참고하면, 내부 스타일 시트에서

style 태그로 기술하기 보다는, 외부 스타일 시트로 분리해서 사용하는 것이 각 구조화된 마크업에 따라

다양한 디자인을 할 수 있고, 가독성과 유지보수 측면에서 더 효율적이다.

CSS 선택자(Selector)?

선택자(Selector)란 말 그대로 원하는 element(태그)를 선택해주는 요소이다.

기본적인 css의 구성인 Rule Set은 다음과 같다.

selector{property:value}

selector - 선택자. {} 선언블록 이전의 element를 선택, 선언블록 안에 있는 내용을 선택자로 설정한 element에 적용.

{} - 선언블록. property(속성)와 value(값) 으로 이루어진 스타일 정의를 묶어놓음.

property - 해당 element에서 줄 속성을 지정. 공통속성과 element에서 지원하는 속성을 사용할 수 있다.

value - 해당 property에서 사용할 수 있는 값들을 지정함.

CSS 선택자의 종류

전체선택자

*{margin:0; padding:0}

전체 선택자는 html에서 모든 element(태그)에 같은 css 속성을 적용한다.

보통 어떠한 값을 초기화 할 때 사용하는데, 쓰기에는 간편하지만 모든 요소를 읽어내야 하기 때문에

로딩속도가 느려질 수 있다. 이를 방지하기 위해 초기화 css가 존재한다.

일반적으로 reset.css 혹인 Nomalize.css 등을 사용한다.

reset.css 참고 (http://heeya7.tistory.com/6)

Nomalize.css 참고 (http://heeya7.tistory.com/5)

태그선택자

div{margin:0; padding:0}

태그 선택자는 html 요소를 직접적으로 기술하는 선택자다.

element의 tab name을 직접 쓰는 방식으로, 문서 내의 모든 div가 적용되는 위험성이 있으므로

복합선택자 등을 활용하여 써야 한다.

클래스 선택자

/* css */
.className{margin:0; padding:0}
div.className2{color:red}

<!-- html -->
<div class="className className2">클래스 선택자 사용법</div>

클래스 선택자는 위와같이 element에서 class="propertyName" 형식으로 기술된 element를 찾아 스타일을 지정한다.

위의 예시를 보면 .className으로 className이라는 클래스명을 가진 div를 찾아, 스타일을 지정하였다.

그 아래 div.className2 라고 기술된 것은 'div태그중' className2라는 클래스명을 찾아 스타일을 지정한다.

이는 <p class="className2">스타일</p> 와 같은 코드에는 div가 아니기 때문에 적용되지 않는다.

아이디 선택자

/* css */
#idName{margin:0; padding:0}
div#idName{margin:0; padding:0}

<!-- html -->
<div id="idName">아이디 선택자 사용법</div>

아이디 선택자는 .className이 아닌 #을 붙인 #idName 으로 사용된다.

아이디 선택자를 사용할 때 주의할 점은, '단 한번만 유일하게 적용되는 value' 라는 것이다.

이는 html 문서에서 특정 id속성값은 오직 하나만 있어야 한다는 뜻이다.

id선택자는 웹 문서 내에서 요소의 배치 방법을 지정할 때 자주 사용된다.

복합 선택자

/* css */

.grand .parent{color:red}    //적용 가능
.grand .child{color:blue}    //적용 가능

.grand>.parant{font-weight:bold} //적용 가능
.grand>.child{font-weight:bold} //적용 불가능(child는 grand의 직계자식이 아님)

div+p{background:#c8c8c8;} //div태그의 직계자식중 p태그만 스타일 지정
div~p{color:green} //div와 형제관계(같은레벨)의 모든 p태그에 스타일 지정

/* html */

<div class="grand">
<p class="parant">부모태그</p>
<span class="child">자식태그</span>
</div>

<p>div.grand와 형제노드</p> // grand div와 형제레벨의 노드

<p>단락</p>

<span>텍스트</span>

<p>단락2</p>

E F{property:value} // E의 하위요소 F선택

E의 하위요소(자식, 자손 모두 포함) 중에서 F의 명칭을 가진 element를 선택한다.

E>F{property:value} // E의 직계자식 F선택

E의 바로아래요소(직계자식)인 element를 선택한다.

E+F{property:value} // E요소의 바로뒤 오는 직계자식 F선택

E요소의 바로 뒤에있는 직계자식 F만 선택한다. 두번째 F는 선택되지 않는다.

E~F{property:value} // E요소의 형제레벨의 모든 F선택

E요소와 같은 레벨의 모든 F태그를 선택한다.

속성선택자

속성선택자는 태그 안의 속성에 따라 스타일을 지정하는 선택자 방식이다.

값의 조건에 따라 다양한 스타일을 지정할 수 있기 때문에 활용도가 높다.

<input type="text" value="check01" class="default red">
<input type="text" value="check02" class="default blue">
<input type="text" value="check03" class="default red">
<input type="text" value="check04" class="check red">
<input type="text" value="check05" class="check-test">


/* text 형식의 input태그 선택 */
input[type="text"]{width:200px; padding:5px}

/* red 클래스를 포함한 input태그 선택 */
input[class~="red"]{border:1px solid red}

/* check로 시작하는 class명을 가진 input 선택 */
input[class^="check"]{color:green}

/* blue로 끝나는 class명을 가진 input 선택 */
input[class$="blue"]{border:1px solid blue}

/* check라는 값이 포함된 value를 가진 input 선택 */
input[value*="check"]{text-align:right}

/* check로 시작하거나, check를 class명으로 포함하는 input 선택 */
input[class|="check"]{color:red}

E[attr] - 'attr' 속성이 포함된 E태그 선택

E[attr="val"] - 'attr' 속성의 값이 "val"과 일치하는 E태그 선택

E[attr~=“val”] - ‘attr’ 속성의 값에 “val”이 포함되는 E태그 선택

E[attr^=“val”] - ‘attr’ 속성의 값이 “val”로 시작하는 E태그 선택

E[attr$=“val”] - ‘attr’ 속성의 값이 “val”로 끝나는 E태그 선택

E[attr*=“val”] - ‘attr’ 속성의 값에 “val”’이 포함되는  E태그 선택

E[attr|=“val”] - ‘attr’ 속성의 값이 정확하게 “val” 이거나 “val~”로 시작되는 E태그 선택

자바스크립트의 객체(=참조) 타입

이전 포스팅에서 말했듯이 자바 기본타입에는 number, string, boolean, null, undefined 가 있었다.

이 5가지 형태의 기본타입을 제외한 모든것은 '객체' 이며, 참조타입의 변수이다.

자바스크립트에서 변수란 이름(key) : 값(value) 형태의 프로퍼티들을 저장하는 컨테이너다.

Object() 생성자 함수

var objVar = new Object(); // Object()생성자로 objVar 라는 빈 객체 생성

objVar.name = 'Hwi';
objVar.gender = 'male';
// objVar에 name, gender 프로퍼티 생성

console.log(typeof objVar); // objVar의 타입출력, 출력값 object
console.log(objVar) // '이름(key) : 값(value)' 형태로 객체 출력
// 출력값 {name:'Hwi', gemder:'male'}

객체 리터럴 방식 이용

리터럴 방식이란 객체를 생성하는 표기법으로, 중괄호{} 를 이용해서 객체를 생성한다. 프로퍼티 값으로는 어떠한 표현식도 올 수 있으며,

프로퍼티 값으로 함수가 있을 경우, 이를 자바스크립트에서 '메서드' 라고 호칭한다.

var objVar = {
name : 'Hwi',
gender : 'male'
};

console.log(typeof objVar); // Object() 생성자 함수 방식과 동일출력

생성자 함수 생성 방식

자바스크립트에서 함수를 생성하는 방법은 3가지가 있다.

함수 선언문 방식, 함수 표현식 방식, Function() 생성자 함수 방식이 있다.

- 함수 선언문 방식

함수 선언문 방식은 반드시 함수명이 정의되어 있어야 한다. C프로그래밍에서의 함수 정의 방식과 유사하지만,
function 키워드를 명시적으로 사용하고, 매개변수로 타입을 기술하지 않는다.

function addVar(x, y){ // 매개변수 x, y를 받는 함수 선언
return x + y; // x + y 의 값을 반환
}

console.log(addVar(3, 4)) // 출력값 7

- 함수 표현식 방식

자바스크립트 에서는 함수도 하나의 값처럼 취급된다. 따라서 함수도 숫자나 문자열 처럼 변수에 할당하는 것이 가능하다.

함수 리터럴로 하나의 함수를 만들고, 생성된 함수를 변수에 할당하여 생성하는 것을 함수 표현식 이라고 한다.

var addVar = function(x, y){ // 매개변수 x, y를 받는 함수를 addVar에 할당
return x + y; // x + y 의 값을 반환
}

console.log(addVar(3, 4)); // 출력값 7

- Function() 생성자 함수 방식

자바스크립트의 함수도 Function() 이라는 기본 내장 생성자 함수로부터 생성된 객체라고 볼 수 있다.

var addVar = new Function('x', 'y', 'return x + y');
console.log(add(3, 4));

생성자 함수 방식에서는 함수선언문, 함수표현식 방식이 자주 사용된다.

Function() 생성자 함수 방식은 실무에서 사용되는건 거의 보지 못하였고, 소스분석할 때 나오는 경우가 있다고 한다.

기본 데이터 타입

- 자바스크립트에서 기본타입은 숫자(number), 문자열(String), 불린값(boolean) 그리고 null과 undefined가 있다.
기본데이터타입의 특징은 그 자체가 하나의 값을 나타낸다.
때문에 이름과 값을 프로퍼티로 가지는 객체의 개념과는 다르기 때문에, 객체가 아닌 하나의 변수이다.

숫자(number)

- 자바스크립트의 타입체크는 굉장히 너그롭다(?)
숫자형의 경우 C언어, 혹은 Java에서 int, float, double 등 다양하지만, 자바스크립트에서는 오로지 number 타입으로 존재한다.

※ 또한 자바스크립트 에서는 정수형이 따로 없고, 모든 숫자를 실수로 처리 하므로 

var num = 5 / 2; 를 출력하면 2.5 가 나오게 된다.

정수형만 추출하고 싶을땐, Math.floor(num); 이런식으로 자바스크립트 메서드를 사용해야 한다.

var intNum = 100;
console.log("intNum의 타입 == ", typeof intNum);

var floatNum = 8.5;
console.log("floatNum의 타입 == ", typeof floatNum);

위와같이 콘솔을 찍어보았을때 결과는 어떻게 나오는지 보면 알 수 있다.

C언어와는 다르게, 둘다 number 가 나오는 것을 알 수 있다.

※ typeof 연산자는 해당 변수나 객체가 어떤 타입인지를 체크하는 연산자 이다. 피연산자의 타입을 리턴해준다.

문자열(String)

- 문자열은 ''(작은따옴표) 나 ""(큰따옴표)로 표기한다. 기본데이터타입의 문자열의 경우 한번 정의된 문자열은 변하지 않는다.

var str = 'test';
console.log(str[0]); // 출력값 = t

str[0] = 'T'
console.log(str[0]); // 출력값 = t (변하지 않음)

여기서 오해의 소지가 있을 수 있는게, 문자열의 변환이 안된다는 뜻이 str은 평생 'test' 라는 문자열을 가지고 간다는 것이 아니다.

str의 값을 바꾸기 위해서는, str객체를 '재정의' 해야 한다는 뜻이다.

var str = 'test';
console.log(str[0]); // 출력값 = t

this.str = 'TEST';
console.log(str[0]); // 출력값 = T (str 변수가 'TEST'로 바뀜)

불린값(boolean)

- 불린값은 옳고 그름을 나타내는 변수다. true(참) / false(거짓) 의 두가지만을 값으로 가진다.

var blnVar = true;
console.log(typeof blnVar); // 출력값 boolean

if(blnVar){
 console.log("조건식에 합당"); 
}else{
 console.log("조건식에 부당");
}

※ 위 예시코드는 간단하게 if문으로 blnVar가 true를 가지고 있는지, false를 가지고 있는지 확인하였다.

boolean값을 활용하는 예시코드는 무궁무진하지만, 기본 사용법만 알아보았다.

null, undefined

- 자바스크립트에서 null과 undefined의 는 둘다 '값이 비어있음' 을 나타낸다. 차이가 있다면 null의 경우 값이 '비어있다'의 의미이고,

undefined의 경우는 '값이 할당되지 않음' 의 차이를 가지고 있다.

주의할 점은, null타입 변수의 경우는 타입체크를 할 때에, typeof 연산자의 결과값이 null이 아닌 object로 나오게 된다.

null타입 변수인지를 확인할때에는 일치연산자(===) 를 사용해서 변수의 값을 직접 확인해야 한다.

var nullVar = null;
console.log(typeof nullVar) // 출력값 object
console.log(nullVar === null) // 출력값 true

var emptyVar;
console.log(typeof emptyVar) // 출력값 undefined

자바스크립트 데이터 타입

- 자바스크립트의 데이터 타입은 기본타입과 참조타입으로 나뉜다.

객체

- 자바스크립트의 모든것은 '거의' 객체이다. 필자도 공부 하면서 알게된 거지만, 모든 데이터타입이 '객체' 인것은 아니다.

var intNum = 10;

예를들어 위와같은 소스코드에서 필자는 intNum 이라는 변수를 '객체' 라고 정의하고, 사용하고 있었다.

하지만 자바스크립트에서 이를 '객체' 라고 표현하지 않고, 기본 데이터 타입(기본타입) 으로 지정이 된다.

자바스크립트에서 '객체'라 함은 단순히 '이름(key):값(value)' 형태의 프로퍼티들을 저장하는 컨테이너다.

따라서 기본 데이터 타입인 boolean, number, string 그리고 특별한 값인 null과 undefined 는 '객체'가 아니다.

하지만 자바스크립트에서 세 가지 기본 타입도 모두 객체처럼 다룰 수 있기 때문에, 자바스크립트는

null과 undefined를 제외한 모든 것을 객체로 다룰 수 있다.

함수

- 함수 또한 자바스크립트 에서는 '객체' 로 구분된다. 일반적인 객체보다 조금 더 많은 기능이 있는 객체 라고 할수 있다.

함수 선언문, 함수 표현식, function()생성자 함수 등으로 나뉘며, 따로 정리해서 포스팅하겠다.

프로토타입

- 모든 객체는 숨겨진 링크인 프로토타입 을 가진다. 프로토타입이란, ECMAScript에서 정의한 표현으로,
해당 객체를 생성한 생성자의 프로토타입 객체를 가르킨다.

선행지식

- HTML

> 자바스크립트의 제어 대상이 html 문서이기 때문에, 자바스크립트를 공부함에 있어 선행학습이 필수로 필요하다.

- CSS

> 옵션, 개념만 이해해도 되지만, JS에서 클래스또한 제어 가능하다.

JavaScript란?

- 웹브라우저에서 동작하는 스크립트 언어

- HTML과 CSS로 이루어진 웹페이지를 동적으로 변경해준다.

웹 개발

- 크롬, 파이어폭스 등 웹 브라우저의 버전에 계속되서 업데이트 되고 있다. 새 버전이 나올때마다, 각 브라우저는

자바스크립트 엔진의 성능향상에 대한 내용이 들어가 있다.

서버 개발

- Node.js를 대표로 자바스크립트를 활용한 서버 개발 또한 많이 이루어지고 있다. 보다 쉽게 서버개발이 가능한 자바스크립트가 나오고 있다.

애플리케이션 개발

- 웹이 하나의 플랫폼으로 진화하면서, 웹OS와 비슷한 크롬OS 등이 나오면서 휴대폰과 같은 모바일 기기에서도 웹 기반의 각종 기술이 활용되고 있다.