규호의 공부방: Javascript

레이블이 Javascript인 게시물을 표시합니다. 모든 게시물 표시

2016년 12월 27일 화요일

클로저_Private Variable

See the Pen Private_Variable by Sajuk (@Sajuk) on CodePen.

2016년 10월 21일 금요일

Object Model

*전역객체인 window 객체의 property인 document, navigator, Array 등에 속한 각각의 객체들이 작업들을 담당한다.

console.log(document.body); // window라는 전역객체의 document property에 속한 body라는 객체

DOM(Document Object Model)
- DOM을 통해 페이지 내용을 표현하는 태그 따위를 제어
- 객체의 예 : img, input, 등등
BOM(Browser Object Model)
- BOM을 통해 내용을 제외한 브라우져의 객체를 제어
- 객체의 예 : location, screen, navigator, frame ..
Javascript(Core)
- 객체의 예 : Array, Object, Function...
- Core란 Javascript 언어를 사용하는 각각의 라이브러리에서 공통적으로 쓰이는 것을 말함.

2016년 10월 18일 화요일

Javascript 모듈 & 라이브러리

모듈화 : 코드의 재활용성을 높이고, 유지보수를 쉽게할 수 있게 코드를 분리해서
필요한 곳에 가져다 쓸 수 있도록 하는 것

모듈화의 긍정적인 면

자주 사용되는 코드를 별도의 파일로 만들어서 필요할 때마다 재활용할 수 있다.
코드를 개선하면 이를 사용하고 있는 모든 애플리케이션의 동작이 개선된다.
코드 수정 시에 필요한 로직을 빠르게 찾을 수 있다.
필요한 로직만을 로드해서 메모리의 낭비를 줄일 수 있다.
한번 다운로드된 모듈은 웹브라우저에 의해서 저장되기 때문에 동일한 로직을 로드 할 때 시간과 네트워크 트래픽을 절약 할 수 있다. (브라우저에서만 해당)

모듈이란?

순수한 자바스크립트에서는 모듈(module)이라는 개념이 분명하게 존재하지는 않는다. 하지만 자바스크립트가 구동되는 호스트 환경에 따라서 서로 다른 모듈화 방법이 제공되고 있다. 때문에 환경에 따른 모듈화 방법을 알 필요가 있다.

※ 호스트 환경: Javascript가 구동되는 환경을 뜻 함

라이브러리?

모듈이 프로그램을 구성하는 작은 부품으로서의 로직을 의미한다면 라이브러리는 자주 사용되는 로직을 재사용하기 편리하도록 잘 정리한 일련의 코드들의 집합을 의미한다고 할 수 있다. 어떠한 목적을 위한 코드들의 집합
(ex) jQuery

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<ul id="list">
<li>empty</li>
<li>empty</li>
<li>empty</li>
<li>empty</li>
</ul>
<input id="execute_btn" type="button" value="execute" />
<script type="text/javascript">
$('#execute_btn').click(function(){
$('#list li').text('coding everybody'); // id가 list인 태그의 자식 중 li 태그의 text(innerHTML) 를 click하면
})
</script>
</body>

</html>

Javascript 객체(Object)

배열에서는 자동으로 곂치지 않는 index가 부여된다.
이 인덱스를 숫자 대신 문자로 쓰고 싶다면 객체를 사용하면 된다.

객체의 생성

방법 1
var grades = {'egoing': 10, 'k8805': 6, 'soralgi': 80};

방법 2
var grades = {};
grades['egoing'] = 10;
grades['k8805'] = 6;
grades['soralgi'] = 80;

방법 3
var grades = new Object();
grades['egoing'] = 10;
grades['k8895'] = 6;
grades['sorialgi'] = 80;

※ egoing = key 라 지칭
10 = value 라 지칭

객체의 속성에 접근

alert(grades.egoing);

객체 + 반복문

var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80};

for (key in grades) {
document.write("key : " + key + " value : " + grades[key] + "<br />");

객체 + 반복문2

- grades 라는 객체 안에는 list라는 key가 있고, value는 또 다른 '객체'이다.

- 또 show 라는 key가 있고, value는 '함수' 이다.

- grades['list'] -> 객체 전체를 가리킴

- grades['list']['egoing'] -> 객체의 key중 'egoing'의 value, 10을 나타낸다.

- grades['show'] -> 함수 자체를 나타냄

- grades['show']() -> 함수를 실행함.
- this : this 가 실행되는 함수를 가지고 있는 '객체'를 뜻함
- grades는 list 라는 객체와 show라는 함수를 그룹핑한 그릇이라고 할 수 있다.
이런 스타일을 '객체지향프로그래밍' 이라고 한다.

var grades = {

'list': {'egoing': 10, 'k8805': 6, 'sorialgi': 80},
'show' : function(){
for(var name in this.list){ // grades 객체의 key값을 name에 대입
document.write(name+':'+this.list[name]+"<br />");
}
}
};
grades.show(); // = grades['show']();
}

Javascript 배열

삽입

push - 배열 끝에 추가

(ex) var li = ['a','b','c','d'];
li.push('e');
=> 결과 : ['a','b','c','d','e']

concat - 배열 끝에 복수의 element 추가

(ex) var li = ['a','b','c','d'];
li.concat('e','f');
=> 결과 : ['a','b','c','d','e','f']

unshift - 배열 맨 앞에 추가
나머지 element는 index가 '1'씩 증가

(ex) var li = ['a','b','c','d'];
li.unshift('z');
=> 결과 : ['z','a','b','c','d']

splice - element 바꿔치기
첫 째 인자 : 넣고자 하는 index
둘 째 인자 : 첫 째 인자의 인덱스 위치의 element를 포함해서 몇 개 없앨지
셋 째 인자 : 바꿔치기 할 문자

(ex) var li = ['a', 'b', 'c', 'd', 'e'];
li.splice(2, 2, 'B');
=> 결과 : ['a','b','B','e']

제거

shift - 배열 맨 앞 제거
나머지 element는 index가 '1'씩 감소

(ex) var li = ['a','b','c','d'];
li.shift();
=> 결과 : ['b','c','d']

pop - 배열 맨 뒤 제거

(ex) var li = ['a','b','c','d'];
li.pop();
=> 결과 : ['a','b','c']

정렬

sort- 오름차순으로 정렬

(ex) var li = ['b','a','d','c'];
li.sort();
=> 결과 : ['a','b','c','d']

reverse- 역순으로 정렬

(ex) var li = ['b','a','d','c'];
li.reverse();
=> 결과 : ['c','d','a','b']

Javascript 함수

`Javascript에서 함수의 표현방법이 세 가지가 있다.`

표현1.----------------------------------------------------------

2016년 10월 17일 월요일

Javascript에서 false로 취급되는 것

기타 false로 간주되는 데이터 형

다음은 false와 0 외에 false로 간주되는 데이터형의 리스트다. if문의 조건으로 !(부정) 연산자를 사용했기 때문에 각 조건문의 첫번째 블록이 실행되는 것은 주어진 값이 false이기 때문이다.

if(!''){

    alert('빈 문자열')

}

if(!undefined){

    alert('undefined');

}

var a;

if(!a){

    alert('값이 할당되지 않은 변수'); 

}

if(!null){

    alert('null');

}

if(!NaN){

    alert('NaN');

}

비교연산자

alert(null == undefined);       //true

alert(null === undefined);      //false

alert(true == 1);               //true

alert(true === 1);              //false

alert(true == '1');             //true

alert(true === '1');            //false

alert(0 === -0);                //true

alert(NaN === NaN);             //false

null과 undefined는 값이 없다는 의미의 데이터 형이다. null은 값이 없음을 명시적으로 표시한 것이고, undefined는 그냥 값이 없는 상태라고 생각하자.

NaN은 0/0과 같은 연산의 결과로 만들어지는 특수한 데이터 형인데 숫자가 아니라는 뜻이다.

!==

'!=='는 '!='와 '=='의 관계와 같다. 정확하게 같지 않다는 의미다. 예제는 생략한다.