TIL no.16

손병진·2020년 8월 12일

JavaScript TIL

TIL

목록 보기

16/22

객체

생성

python dictionary type(유사)
index 직접 부여

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

var grades = {};
grades['egoing'] = 10;
grades['k8805'] = 6;
grades['sorialgi'] = 80;

grades['k8805']
= grades.k8805
= grades['k88'+'05']
!= grades.'k88'+'05'// syntaxerror

반복문

배열 자료는 순서가 있지만, 객체 자료는 순서가 없다.

var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80};
for(key in grades) {// key 가져온다
    document.write("key : "+key+", value : "+grades[key]+"<br />");
}/*
key : 'egoing', value : 10
key : 'k8805', value : 6
key : 'sorialgi', value : 80
*/

객체지향 프로그래밍

서로 연관되어 있는 자료와 함수를 하나의 변수에 묶어놓는 스타일

// 객체 in 객체
var grades = {
    'list': {'egoing': 10, 'k8805': 6, 'sorialgi': 80}};
alter(grades['list']);// {'egoing': 10, 'k8805': 6, 'sorialgi': 80}
alter(grades['list']['egoing']);// 10

//함수 in 객체
var grades = {
    'list': {'egoing': 10, 'k8805': 6, 'sorialgi': 80},
  	'show': function(){
      alert('Hello world');
    }
};
grades['show']();// Hello world 함수 호출

//this
var grades = {
    'list': {'egoing': 10, 'k8805': 6, 'sorialgi': 80},
  	'show': function(){
      console.log(this.list);// this: 해당 함수가 속해있는 변수를 지칭
    }
};
grades['show']();// {'egoing': 10, 'k8805': 6, 'sorialgi': 80}

// 반복문 적용
var grades = {
    'list': {'egoing': 10, 'k8805': 6, 'sorialgi': 80},
    'show' : function(){
        for(var name in this.list){
            document.write(name+':'+this.list[name]+"<br />");
        }
    }
};
grades.show();/*
egoing : 10
k8805 : 6
sorial : 80
*/

모듈

모듈화

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
    <script>
        function welcome(){
            return 'Hello world'
        }// 만약 welcome 함수가 굉장히 길고 복잡하다면??
        alert(welcome());
    </script>
</body>
</html>

// 2개의 파일로 나눈다
function welcome(){
    return 'Hello world';
}// greeting.js 라고 한다면

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <script src="greeting.js"></script>
	// src 속성을 활용
</head>
<body>
    <script>
        alert(welcome());
    </script>
</body>
</html>

라이브러리

특정 목적을 위해 정리된 코드들의 집합(ex. jQuery)

UI & API

User Interface
- 일반 사용자가 접하는 지점
Application Programming Interface
- 개발자가 접하는 지점(코드)
Interface(접점)
- 일반 사용자(UI) > 개발자(API) > 브라우저 > 운영체제(windows, Mac, ..) > C, C++ > ..