본문
160101P(금)
JavaScript
JavaScript
웹페이지를 동적으로, 프로그래밍적으로 제어하기 위해서 고안된 언어
웹브라우저에서 유일하게 사용할 수 있는 프로그래밍 언어
DOM
웹페이지를 프로그래밍적으로 제어
최근에는 DOM을 직접 제어하기보다는 jQuery 라이브러리를 사용하여 제어
팝업창
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<script>
alert('Hello world');
</script>
</body>
</html>
이런식으로 실제 작성하지는 않는다.
markup언어와 script언어는 분리해주는것이 일반적
숫자와 문자
Math.pow(3,2); // 9, 3의 2승
Math.round(10.6); // 11, 10.6을 반올림
Math.ceil(10.2); // 11, 10.2를 올림
Math.floor(10.6); // 10, 10.6을 내림
Math.sqrt(9); // 3, 3의 제곱근
Math.random(); // 0부터 1.0 사이의 랜덤한 숫자
문자는 큰따옴표 or 작은 따옴표로 감싸야 한다.
alert("coding everybody");
alert('coding everybody');
escape
\를 어떠한 문자 앞에 쓰게되면 기능으로써의 문자가 아니라 단순한 문자로 해석
변수
var a = 1;
var를 생략하면 유효범위라는 것에 영향을 미친다.
신기하게도 javascript는 세미콜론(;)을 생략가능하다. 이러한 경우 줄바꿈을 세미콜론으로 간주한다.
비교
주어진 값들이 같은지, 다른지, 큰지, 작은지를 구분
비교연산자의 리턴값 boolean
true
false
===
일치 연산자로 좌항과 우항의 데이터 형까지도 정확하게 같을 때 true, 아니면 false
alert(1=='1'); // true
alert(1==='1'); // false
==보다 강력하게 권장한다.
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 - 값이 정의되지 않음
NaN - 0/0, 계산할 수 없음, 숫자가 아님을 뜻 함
!==
===와 마찬가지로 데이터 타입까지 정확하게 같지 않다는 의미
웹페이지에 텍스트 출력
document.write('coding everybody <br />');
함수 - function
하나의 로직을 재실행 할 수 있도록 하는 것으로 코드의 재사용성을 높여준다.
function 함수명( [인자...[,인자]] ) {
코드
return 반환값
}
타언어와는 다르게 함수명을 선언할 때 return type을 정의하지 않는다.
익명함수
1회성의 함수 호출
(function () {
코드
}) ();
배열
var li = ['a', 'b', 'c', 'd'];
li.push('f');
alrert(li);
push
인자로 전달된 값을 배열에 추가하는 명령
concat
복수의 원소 추가
li = li.concat(['f', 'g']);
unshift
배열의 시작점에 원소 추가
li.unshift('z');
splice
첫번째 인자 원소부터 두번째 인자 원소의 숫자만큼의 값을 배열로부터 제거
세번째 인자부터 전달된 인자들을 첫번째 인자의 원소뒤에 추가
li.splice(2, 0, 'B');
shift
배열의 첫번째 원소 제거
li.shift();
pop
배열의 맨끝에서 원소 제거
li.pop();
sort
정렬
li.sort();
reverse
역순정렬
li.reverse();
객체(dictionary)
흔히들 맵(map)이라고 하며 associative array, Dictionary라고 한다.
key 와 value로 표시
객체는 중괄호로 감싸준다.
1.
var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80};
2.
var grades = new Object();
grades['egoing'] = 10;
grades['k8805'] = 6;
grades['sorialgi'] = 80;
for in 문
객체안의 값을 하나씩 가져와서 key를 변수에 담는다.
for(변수 in 객체) {
}
객체안에 또다른 객체와 함수를 담을 수 있다.
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();
모듈
코드를 여러개의 파일로 분리
1. 자주 사용되는 코드를 파일로 만들어서 필요할 때마다 재활용 가능
2. 코드를 개선하면 하나의 파일만 수정하면 되고, 이를 사용하고 있는 모든 애플리케이션의 동작이 개선된다.
3. 코드 수정시에 빠르게 로직을 찾을 수 있다.
4. 필요한 로직만을 로드해서 메모리의 낭비를 줄일 수 있다.
5. 한 번 다운로드 된 모듈은 웹브라우저에 의해서 저장되기 때문에 동일한 로직을 로드할 때 시간과 네트워크 트래픽을 절약 할 수 있다.
호스트 환경
호스트 환경이란 자바스크립트가 구동되는 환경을 의미한다.
자바스크립트는 브라우저를 위한 언어로 시작했지만, 더 이상 브라우저만을 위한 언어가 아니다. 예를들어 node.js는 서버 측에서 실행되는 자바스크립트다. 이 언어는 자바스크립트의 문법을 따르지만 이 언어가 구동되는 환경은 브라우저가 아니라 서버측 환경이다.
또 구글의 제품 위에서 돌아가는 Google Apps Script 역시 자바스크립트이지만 google apps script가 동작하는 환경은 구글 스프레드쉬트와 같은 구글의 제품 위이다.
호스트 환경(웹 브라우저 등)에 따라서 서로 다른 모듈화 방법이 제공
greeting.js
function welcome() {
return 'Hello world';
}
main.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="greeting.js"></script>
</head>
<body>
<script>
alert(welcome());
</script>
</body>
</html>
브라우저는 src에 있는 파일을 다운로드해서 실행시킨다.
라이브러리
모듈과 비슷하지만 엄연히 다르다.
모듈 - 프로그램을 구성하는 작은 부품으로서의 로직
라이브러리 - 자주 사용되는 로직을 재사용하기 편리하도록 잘 정리한 일련의 코드들의 집합
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');
})
</script>
</body>
</html>
jQuery는 모든 시작에 $
API(Application Programming Interface)
프로그램이 동작하는 환경을 제어하기 위해서 환경에서 제공되는 조작장치
tutorial
언어의 문법 설명
reference
명령어의 사전
자바스크립트 API 문서
호스트 환경의 API 문서
튜토리얼을 기반으로 레퍼런스를 찾게된다.
정규표현식(regular expession)
문자열에서 특정한 문자를 찾아내는 도구
수십줄이 필요한 작업을 한줄로 끝낼 수 있다.
1. complie
검출하고자 하는 패턴을 만드는 일
정규표현식 객체를 만들어야 함
1. 정규표현식 리터럴
var pattern = /a/;
2. 정규표현식 객체 생성자
var pattern = new RegExp('a');
RegExp(Regular Expretion)
2. execution
컴파일로 객체를 만들었다면 문자열에서 원하는 문자를 찾아내야 한다.
RegExp.exec()
인자로 전해진 값에서 원하는 문자를 찾고 배열로 리턴(없으면 null)
console.log(pattern.exec('abcdef')); // ["a"]
RegExp.test()
리턴값이 Boolean(있으면 true, 없으면 false)
console.log(pattern.test('abcdef')); // true
cnosole.log(pattern.test('bcdefg')); // false
문자열 객체로도 정규표현식을 사용 가능
String.match()
RegExp.exec()와 비슷
'abcdef'.match(pattern);
String.replace()
문자를 변경 후에 변경된 값을 리턴
console.log('abcdef'.replace(pattern, 'A')); // Abcdef
옵션
변수뒤에 붙여서 검출되는 데이터가 달라지게 할 수 있다.
i
대소문자 구분안함
var xi = /a/;
console.log("Abcde".match(xi)); // null
var oi = /a/i;
console.log("Abcde".match(oi)); // ["A"];
g
모든결과 리턴
캡쳐
그룹을 지정하고 지정된 그룹을 가져와서 사용하는 방법
괄호안의 패턴은 변수처럼 재사용 할 수 있다.
기호로 $를 사용
var pattern = /(\w+)\s(\w+)/;
var str = "coding everybody";
var result = str.replace(pattern, "$2, $1");
console.log(result); // everybody, coding
괄호
그룹을 의미
\w
A ~ Z, a ~ z, 0 ~ 9 까지의 문자를 의미
+
앞에있는 패턴이 하나 이상일 때 유효해진다.
\s
공백을 의미한다.
$1, $2
첫번째 그룹과 두번째 그룹을 의미
치환
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);
∴정규표현식 강의를 따로 듣자
'낡은 서랍장 > JavaScript' 카테고리의 다른 글
| 160115P(금) (0) | 2016.01.15 |
|---|---|
| 160114P(목) (0) | 2016.01.14 |
| 160113P(수) (0) | 2016.01.13 |
| 160106P(수) (0) | 2016.01.06 |
| 160104P(월) (0) | 2016.01.05 |
댓글