< 자바스크립트(JavaScript) ; 객체, 모듈, JS의 정규표현식 >
1. 객체
1) 객체 정의 및 사용
- 배열과 유사하지만 배열의 index를 특정 문자로 사용하는 방식, key/value 쌍으로 이루어지며, 다른 프로그래밍 언어의 연관배열(associative array), 맵(map), 딕셔너리(dictionary) 등의 data type이 JS의 객체에 해당됨.
- 배열은 중괄호, 객체는 대괄호와 콜론(:)
- 객체 정의 양식 : var 객체명 = {'aaa' : 10, 'bbb' : 20, 'ccc' :30};
- 빈 객체 정의 : var 객체명 = {};
- 빈 객체 정의 : var 객체명 = new Object();
- 객체의 값사용(key로 값을 불러냄) : 객체명['aaa'] or or 객체명['aa'+'a'] or 객체명.aaa (key의 문자열을 합칠 필요가 있을 때는 대괄호 방식을 사용해야 할 수도 있음.)
- 객체 요소 추가 및 값 변경 : 객체명['aaa'] = 15
2) for 문에서의 객체 사용( for/in) ; for/in 문은 배열에서도 사용 가능
- 배열은 저장된 데이터가 순서를 가지고 있지만, 객체는 저장된 데이터가 순서를 가지고 있지 않음. 배열은 순서(index)를 사용하여 value를 불러오고, 객체는 순서 대신 key 값으로 value 를 불러옴.
var 객체명 = {'aaa': 10, 'bbb': 20, 'ccc': 30};
for(key in 객체명) {
JS명령문;
}
3) 객체 지향 프로그래밍 : 객체의 값으로 객체, 함수 등 다양한 data 가 올 수 있음
- 객체명.sub-객체명[key]
- 객체명.함수의Key()
- 예제
var grades = {
'list': {'aaa': 10, bbb: 20, ccc: 30},
'show' : function(){
for(var name in this.list){
document.write(name+':'+this.list[name]+"<br />");
}
}
};
grades.show();
- this : 가 JS 구문의 function내에서 사용된다면… : this는 자신이 사용되고 있는 함수가 속하는 객체 자신을 가르킴. à 객체에 sub객체와 함수를 정의하고, 함수 내에서 this.sub객체명 을 for 문으로 반복시키면, sub 객체의 key,값을 사용할 수 있음.
2. 모듈과 라이브러리
1) 모듈 개념
- JS에서는 모듈의 개념이 명확히 정의되어 있지는 않지만 JS가 구동되는 host 환경에 따라 다양한 모듈화 방법이 존재함.
- JS가 구동되는 host 환경 : 웹브라우져, 서버(node,js), 구글(Google Apps Script) 등
2) 모듈 사용 : <script src="~~~"></script> 로 모듈을 로드해서 사용
- 복잡한 함수 A,B를 별도 JS 파일로 분리하고, html code에서 head에 JS파일을 src에 경로로 지정해서 body에서 호출해서 사용할 수 있음. 다양한 JS 파일을 다양한 html 파일에서 src 를 사용해서 import 해서 사용 가능함. (imort 해 온 js 파일 목록은 크롬 개발자도구 network 탭에서 확인 가능함.)
- JS파일 : ~~~함수A, 함수B, ~~~
<head>
<script src="JS파일명.js"></script>
</head>
<body>
<script>
함수A()
함수B()
</script>
</body>
3) Node.js에서의 모듈 개념(exports 로 모듈을 내보내고, require로 모듈을 불러옴)
- 모듈파일 :
exports.A = function(){};
exports.B = function(){};
- var 모듈파일을 담을 변수명(ABC) = require('./모듈파일명.js');
ABC.A()
ABC.B()
4) 라이브러리
- 모듈 : 프로그램을 구성하는 부품 로직
- 라이브러리 : 로직을 잘 정리한 코드들의 집합(예 : jQuery)
- 라이브러리(jQuery) 사용 :
$('#버튼ID').click(function(){
$('#....').text('~~~');
)}
5) 자바스크립트 API 문서
- LiveScript à JavaScript = ECMAScript
- ECMAScript(표준문서), 자바스크립트 사전(생활코딩), MDN, MSDN
- JS 호스트 환경 API : 웹브라우져 API, Node.js API, Google Apps API
3. JS의 정규표현식
1) 컴파일 : 패턴 찾기(만들기), 정규표현식을 컴파일해서 객체를 생성함.
2) 실행 : 컴파일된 패턴에 대해서 어떠한 작업을 하는 것
3) JS 정규표현식 패턴 만들기
- 정규표현식 리터럴 ( /~~~/ 사용)
var pattern = /a/
- 정규표현식 객체생성자
var pattern = new RegExp('a');
4) Reg.EXp를 이용한 method 실행 예(exex method 사용)
- target에서 정규표현식 패턴(pattern)을 찾기 : RegExp(pattern).exec('target 정보')
var pattern = /a/;
pattern.exec('abcde'); --> ["a"]
var pattern = /a./; (점 . 은 정규표현식에서 모든 문자를 의미)
pattern.exec('abcde'); --> ["ab"]
- exec()는 추출용, test()는 존재유무 테스트용 ; test() --> true, false 를 return
5) 문자열(string)에서 method 사용
var pattern = /a/;
var str = 'abcdef';
str.match(pattern); --> ["a"]
str.replace(pattern, 'A'); --> "Abcdef"
6) 정규표현식의 옵션 : i (대소문자를 구분하지 않음), g (global, 검색된 모든 결과를 리턴)
var xi = /a/; (i 옵션을 사용하지 않음)
"Abcde".match(xi); --> null
var oi = /a/; (i 옵션을 사용함)
"Abcde".match(oi); --> ["A"]
var xg = /a/;
"abcdea".match(xg); --> ["a"]
var og = /a/;
"abcdea".match(og); --> ["a","a"]
i,g 옵션 동시 사용
var ig = /a/ig;
"AabcdAa",match(ig); --> ["A", "a","A", "a"]
7) 캡쳐 : JS 정규표현식에서 그룹을 지정하고, 그룹을 가져와서 사용하는 작업
- 괄호는 정규 표현식에 group 을 의미 : (\w+)\s(\w+) --> 문자열(단어) 빈칸 문자열(단어)
- $2 (pattern 중 첫번째 괄호 group을 의미)
var pattern = (\w+)\s(\w+)
var str = "aaa bbb"
var result = str.replace(pattern, '$2, $1')
console.log(result); --> everybody, coding
8) 치환 : 본문의 모든 url 주소를 찾아서 html a tag로 지정해서 각각의 url로 링크시키는 작업
var urlPattern = /\b(?:https?):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*/gim;
var content = '~~~ http://opentutorials.org/course/1 ~~~ http://naver.com ~~~ ';
var result = content.replace(urlPattern, function(url){
return '<a href="'+url+'">'+url+'</a>';
});
console.log(result);
'프로그래밍(Programming) > 자바스크립트(JavaScript)' 카테고리의 다른 글
| 자바스크립트(JavaScript) ; 객체지향 (0) | 2018.09.02 |
|---|---|
| 자바스크립트(JavaScript) ; 함수지향 (0) | 2018.09.02 |
| 자바스크립트(JavaScript) 문법 보충 ; 기본문법, 조건문, 반복문, 함수 등 (0) | 2018.09.01 |
| 자바스크립트(JavaScript) - JS 파일(file), library 등 (0) | 2018.08.25 |
| 자바스크립트(JavaScript) 기초 - JS 문법 : 객체 (0) | 2018.08.25 |