자바스크립트의 기본

모든 저작권은 <생활코딩>의 생산자인 <egoing>님에게 있습니다.

문제시, 비공개로 전환하겠습니다.

<실행방법과 실습환 경>

실행환경
1. Text Editor
2. 크롬 개발자 도구 (자바스크립트 콘솔) - 작성한 코드안에 console.log('Hello World');를 넣으면 콘솔창에 Hello World가 뜨게된다.
3. Sublime Text

*IDE - 통합개발토구, 개발에 필요한 모든 도구 및 기능이 총집합된 것

JavaScript는 HTML 위에서 동작한다.
<script>...</script> 부분

<숫자와 문자>

프로그래밍 입문자에게 가장 익숙한 데이터 형(data type)은 숫자와 문자일 것이다.
이번 시간에는 실제로 가장 많이 사용되는 데이터 형인 문자와 숫자를 프로그래밍에서는 어떻게 표현하고 연산하는지 알아보자.

숫자

자바스크립트에서는 큰따옴표나 작은따옴표가 붙지 않은 숫자는 숫자로 인식한다.

alert(1+1); --> 2
alert(1.2+1.3); --> 2.5

곱하기를 할 때는 *(Asterisk)를 사용한다. alert(2*5);

나누기를 할 때는 /를 사용한다. alert(6/2);

승을 구할 때에는 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의 제곱근

0부터 1.0사이의 난수 Math.random();

문자

문자는 "(큰 따옴표) 혹은 '(작은 따옴표) 중의 하나로 감싸야 한다.
큰 따옴표로 시작하면 큰 따옴표로 끝나야하고, 작은 따옴표로 시작하면 작은 따옴표로 끝나야 한다. String이라고 한다.

alert("coding everybody");

alert('coding everybody');

숫자를 따옴표로 감싸면 문자가 된다. 아래는 문자다. typeof는 값의 데이터 형을 알려주는 기능이다.
alert(typeof("1"); --> 결과: string

아래와 같이 따옴표 없는 숫자는 number가 출력된다.
alert(typeof 1); ---> 결과: number

아래와 같이 코드를 변경하면 작은따옴표를 문자열 안에 포함시킬 수 있다.
alert('egoing\'s javascript') \' => escape라고 한다.
\를 ' 앞에 위치시키면 ' 를 문자열의 시작과 끝을 구분하는 구분자가 아니라 단순히 문자로 해석하도록 강제 할 수 있다.

줄바꿈 \n
alert("안녕하세요.\n생활코딩의 세계에 오신 것을 환영합니다.");

*문자연산
문자와 문자를 더할 때는 아래와 같이 한다.
alert("coding"+"everybody");

문자의 길이를 구할 때에는 .length를 붙인다.
alert("coding everybody".length)

생활코딩 자바스크립트 사전 - https://opentutorials.org/course/50/37

<변수>
변수(Variable)는 (문자나 숫자 같은) 값을 담는 컨테이너로 값을 유지할 필요가 있을 때 사용한다.
여기에 담겨진 값은 다른 값으로 바꿀 수 있다. 변수는 마치 (사람이 쓰는 언어인) 자연어에서 대명사와 비슷한 역할을 한다.

변수

JavaScript에서 변수는 var로 시작한다. var은 변수를 선언하겠다는 것을 의미한다.
var을 생략 할수도 있지만 이것은 유효범위라는 것에 영향을 미친다.
그렇기 때문에 var의 의미를 명확하게 이해하기 전까지는 var를 사용하는 것이 권장된다.
유효범위에 대해서는 뒤에서 살펴볼 것이다. 변수의 이름은 $, _, 혹은 특수 문자를 제외한 모든 문자로 시작할 수 있다.
다음 예제는 변수에 값을 대입한 예제다.

var a =1;

alert (a+1); //2

var a=2;

alert(a+1); //3

JavaScript에서는 세미콜론을 생략할 수 있는데, 이 경우 줄바꿈을 명령의 끝으로 간주하게 된다.

다음 예제는 변수의 값이 꼭 숫자만 올 수 있는 것은 아니라는 것을 보여주기 위해서 만든 예제다.
var first = "coding";
alert(first+"everybody");

var a = 'coding', b = 'everybody';
alert(a);
alert(b);

<주석>
// 뒤에 나오는 내용은 주석으로 처리됨

<줄바꿈과 여백>
; --> 명령이 삭제되었다는 명시적 표기
JavaScript는 줄이바뀌면 명령이 끝난것으로 인식한다. 때문에 ; 를 생략할수도 있다. 하지만 왠만하면 쓰자.

<비교>

연산자

연산자란 값에 대해서 어떤 작업을 컴퓨터에게 지시하기 위한 기호인데 우리는 이미 연산자를 사용했다.
아래 예제 중에서 '='는 우항의 값인 1을 좌항의 변수 a에 대입하는 '대입 연산자'다.
본 수업은 연산자가 무엇인가에 대한 이해를 돕기 위한 것일 뿐 외울 필요는 없다. 차차로 알게 된다.

a =1

비교 연산자

프로그래밍에서 비교란 주어진 값들이 같은지, 다른지, 큰지, 작은지를 구분하는 것을 의미한다.
이 때 비교 연산자를 사용하는데 비교 연산자의 결과는 true나 false 중의 하나다.
true는 비교 결과가 참이라는 의미이고, false는 거짓이라는 뜻이다.
true와 false는 블린(boolean)이라고 불리는 데이터 형식인데 이것은 조건문에서 비중있게 다룰 것이다.
아래는 주요한 비교 연산자들의 종류와 그에 따른 예제들이다.

== --> equal operator
동등 연산자로 좌항과 우항을 비교해서 서로 값이 같다면 true 다르다면 false가 된다.
'='가 두개인 것을 주의하자. '='가 하나인 것은 대입 연산자로 우항의 값을 좌항의 변수에 대입할 때 사용하는 것으로 의미가 완전히 다르다.
alert(1==2) //false
alert(1==1) //true
alert("one"=="two") //false
alert("one"=="one") //true

=== --> strict equal operator
일치 연산자로 === 좌항과 우항이 '정확'하게 같을 때 true 다르면 false가 된다. 여기서 정확하다는 말의 의미에 집중하자. 아래 예를보자.
alert(1=='1'); //true
alert(1==='1'); //false
위의 결과는 이상하다. '==='는 숫자 1과 문자 1을 다르게 인식한다.
반면에 '=='는 양쪽의 값을 같다고 판단한다. 바로 이것이 '정확'의 의미다.
즉 ===는 서로 같은 수를 표현하고 있더라도 데이터 형이 같은 경우에만 같다고 판단하기 때문이다.
결론부터 말하면 == 연산자 대신 === 연산자를 쓰는 것을 강력하게 권한다. 몇가지 사례를 더 살펴보자.

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과 같은 연산의 결과로 만들어지는 특수한 데이터 형인데 숫자가 아니라는 뜻이다.

!=
'!'는 부정을 의미한다. '같다'의 부정은 '같지 않다'이다.
이것을 기호로는 '!='로 표시한다. 아래의 결과는 !=의 결과인데 ==와 정반대의 결과를 보여준다.
alert(1!=2); //true
alert(1!=1); //false
alert("one"!="two"); //true
alert("one"!="one"); //false

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

>
좌항이 우항보다 크다면 참, 그렇지 않다면 거짓임을 알려주는 연산자다. '<'는 반대의 의미로 언급은 생략하겠다.
alert(10>20); //false
alert(10>1); //true
alert(10>10); //false

>=
좌항이 우항보다 크거나 같다. '<='는 반대의 의미로 언급은 생략하겠다.
alert(10>=20); //false
alert(10>=1); //true
alert(10>=10); //true

<조건문>

조건문

Boolean
'비교 수업'에서 비교 연산의 결과로 참(true)이나 거짓(false)을 얻을 수 있다고 배웠다.
여기서 참과 거짓은 '숫자와 문자 수업'에서 배운 숫자와 문자처럼 언어에서 제공하는 데이터 형이다.
이를 Boolean(불린)이라고 부르고 불린으로 올 수 있는 값은 true와 false 두가지 밖에 없다. 불린은 조건문에서 핵심적인 역할을 담당한다.

조건문
조건문이란 주어진 조건에 따라서 에플리케이션을 다르게 동작하도록 하는 것이다.

조건문의 문법
if
조건문은 if로 시작한다. if 뒤의 괄호에 조건이 오고, 조건이 될 수 있는 값는 Boolean이다.
Boolean의 값이 true라면 조건이 담겨진 괄호 다음의 중괄호 구문이 실행된다.
아래 예제의 실행결과는 'result : true'다. if 뒤에 true가 왔기 때문이다.
if(true){ alert('result : true'); }

다음 예제는 아무것도 출력하지 않을 것이다. if 뒤에 false가 왔기 때문이다.
if(false){ alert('result : true'); }

다음 예제를 보자. 결과는 12345를 출력할 것이다.
if(true){ alert(1); alert(2); alert(3); alert(4); } alert(5);

다음 예제를 실행해보자. 결과는 5만 출력될 것이다.
if(false){ alert(1); alert(2); alert(3); alert(4); } alert(5);

왜 그럴까? if 문의 조건이 참이면 중괄호의 시작({}부터 중괄호의 끝(})까지의 구간이 실행되기 때문이다.
거짓이면 중괄호 구간이 실행되지 않기 때문에 alert(5); 구문만 실행된 것이다.

else
if만으로는 좀 더 복잡한 상황을 처리하는데 부족하다. 아래 예제를 보자. 결과는 1이다.
if(true){ alert(1); } else { alert(2); }

다음 예제의 결과는 2다.
if(false){ alert(1); } else { alert(2); }

if문의 조건이 true라면 if의 중괄호 구간이 실행되고, false라면 else 이후의 중괄호 구간이 실행된다.
즉 else는 주어진 조건이 거짓일 때 실행할 구간을 정의하는 것이다.

else if
else if를 이용하면 조건문을 좀 더 풍부하게 할 수 있다. 아래 예제를 보자. 결과는 2다.
if(false){ alert(1); } else if(true){ alert(2); } else if(true){ alert(3); } else { alert(4); }

다음 예제의 결과는 3이다.
if(false){ alert(1); } else if(false){ alert(2); } else if(true){ alert(3); } else { alert(4); }

다음 예제의 결과는 4다.
if(false){ alert(1); } else if(false){ alert(2); } else if(false){ alert(3); } else { alert(4); }

else if는 좀 더 다양한 케이스의 조건을 검사할 수 있는 기회를 제공한다.
else if의 특징은 if나 else와는 다르게 여러개가 올 수 있다는 점이다.
else if의 모든 조건이 false라면 else가 실행된다. else는 생략 가능하다.

변수와 비교연산자

앞서 배운 변수와 비교연산자 그리고 조건문을 결합해보자. ID의 값으로 egoing을 입력해보고, 다른 값도 입력해보자.
아래의 예제는 브라우저에서 실행해야 한다. 다른 환경에서는 원하는데로 동작하지 않을 것이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<script>
id = prompt('아이디를 입력해주세요.')
if(id=='egoing'){
alert('아이디가 일치 합니다.')
} else {
alert('아이디가 일치하지 않습니다.')
}
</script>
</body>
</html>

위의 내용에서 prompt() 구문은 사용자가 입력한 값을 가져와서 id 변수의 값으로 대입한다.
이러한 것을 API 또는 함수라고 부르는데, 이에 대한 내용은 곧 배운다.
사용자가 입력한 값이 egoing이라면 '아이디가 일치 합니다'를 출력하고 그렇지 않다면 '아이디가 일치하지 않습니다'를 출력한다.

조건문의 중첩

위의 예제에서 아이디와 비밀번호를 모두 검증해야 한다면 어떻게 하면 될까? 다음 예제를 보자.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<script>
id = prompt('아이디를 입력해주세요.');
if(id=='egoing'){ password = prompt('비밀번호를 입력해주세요.');
if(password==='111111'){ alert('인증 했습니다.'); } else {
alert('인증에 실패 했습니다.'); } } else {
alert('인증에 실패 했습니다.'); }
</script>
</body>
</html>

if문 안에 다시 if문이 등장했다
즉 사용자가 입력한 값과 아이디의 값이 일치하는지를 확인한 후에 일치한다면 비밀번호가 일치하는지 확인한 것이다.
이렇게 조건문은 조건문 안에 중첩해서 사용될 수 있다.

논리 연산자

좌항과 우항이 모두 참(true)일 때 참이된다.
다음 예제를 보자. 결과는 1이다. &&의 좌우항이 모두 true인 것은 첫번째 조건문 밖에 없기 때문이다.
이러한 논리 연산자를 and 연산자라고 한다.
if(true && true){ alert(1); } if(true && false){ alert(2); } if(false && true){ alert(3); } if(false && false){ alert(4); }

||
'||'는 '||'의 좌우항 중에 하나라도 true라면 true가 되는 논리 연산자다.
|기호는 통상 엔터키 위에 있는 원화표시 키를 쉬프트와 함께 누르면 입력된다.
or 연산자라고 부른다.
다음 예를 보자. 결과는 1,2,3이 출력된다.
마지막 조건문의 '||'는 좌항과 우항이 모두 false이기 때문에 false가 된다.
if(true || true){ alert(1); } if(true || false){ alert(2); } if(false || true){ alert(3); } if(false || false){ alert(4); }

!
'!'는 부정의 의미로, Boolean의 값을 역전시킨다. true를 false로 false를 true로 만든다. not 연산자라고 부른다. 아래의 결과는 4다.
if(!true && !true){ alert(1); } if(!false && !true){ alert(2); } if(!true && !false){ alert(3); } if(!false && !false){ alert(4); }

Boolean의 대체제

0과 1
조건문에 사용될 수 있는 데이터 형이 꼭 불린만 되는 것은 아니다.
관습적인 이유로 0는 false 0이 아닌 값은 true로 간주된다.
아래의 예제는 2를 출력한다.
if(0){ alert(1) } if(1){ alert(2) }

기타 false로 간주되는 데이터 형
다음은 false와 0 외에 false로 간주되는 데이터형의 리스트다.
if문의 조건으로 !(부정) 연산자를 사용했기 때문에 각 조건문의 첫번째 블록이 실행되는 것은 주어진 값이 false이기 때문이다.
Javascript는 빈문자열, undefined, 값이 할당되지않은 변수, null, NaN을 모두 false로 간주한다.
if(!''){ alert('빈 문자열') }

if(!undefined){ alert('undefined'); }

var a;
if(!a){ alert('값이 할당되지 않은 변수'); }

if(!null){ alert('null'); }

if(!NaN){ alert('NaN'); }

<반복문>

반복문의 문법

while
while (조건){

반복해서 실행할 코드

}

아래의 예제를 실행해보자.
while(true){

document.write('coding everybody <br />');

}
document.write는 자바스크립트를 이용해서 웹페이지에 텍스트를 출력한다.
이것은 웹브라우저에서만 동작할 것이다. node.js 콘솔과 같은 환경에서 실습을 한다면 console.log와 같은 메소드를 대신 사용한다.

while문은 while문 뒤에 따라오는 괄호 안의 조건이 참(true)면 중괄호 안의 코드 구간을 반복적으로 실행한다.
조건이 false면 반복문이 실행되지 않는다.
여기서 true와 false는 종료조건이 되는데, 이 값을 변경하는 것을 통해서 반복문을 종료시킬 수 있다.
반복문에서 종료조건을 잘못 지정하면 무한반복이 되거나, 반복문이 실행되지 않는다.

var i = 0;

// 종료조건으로 i의 값이 10보다 작다면 true, 같거나 크다면 false가 된다.

while(i < 10){

// 반복이 실행될 때마다 coding everybody <br />이 출력된다. <br /> 줄바꿈을 의미하는 HTML 태그

document.write('coding everybody <br />');

// i의 값이 1씩 증가한다.

i++

}

for

for(초기화; 반복조건; 반복이 될 때마다 실행되는 코드){

반복해서 실행될 코드

}
다음 예제를 보자.

for(var i = 0; i < 10; i++){

document.write('coding everybody'+i+'<br />');

}

for문은 제일 먼저 '초기화'를 한다. 위의 예제에서 초기화는 var i = 0;이다.
즉 변수 i의 값을 0으로 설정한 것이다.
그 다음에는 '반복조건'인 i < 10이 실행된다.
현재 i의 값은 0이다. 그렇기 때문에 이 조건은 참이다.
반복조건이 참이면 중괄호 안의 내용이 실행된다.
i의 값이 0이기 때문에 'coding everybody0<br />'이라는 텍스트가 출력된다.
'반복해서 실행될 코드'의 실행이 끝나면 '반복이 될 때마다 실행되는 코드'가 실행된다.
i++는 현재 i의 값에 1을 더하라는 의미다. 현재 i의 값은 0이다. 따라서 i++의 결과로 i는 1이 되었다. 그리고 '반복조건'이 실행된다.
현재 i의 값은 1이기 때문에 i < 10은 참이다. 다시 '반복해서 실행될 코드'가 실행된다.
그렇게 반복해서 작업이 실행된다. 이 과정에서 i의 값은 반복 할 때마다 1씩 증가한다.
결국 i의 값이 10이 되는 순간 i < 10을 충족시키지 못하게 되고 반복문은 종료된다.

반복문의 제어

break
반복작업을 중간에 중단시키고 싶다면 어떻게 해야할까? break를 사용하면 된다.
아래의 예제는 위에서 살펴본 예제를 일부 변형한 것이다.
for(var i = 0; i < 10; i++){

if(i === 5) {

break;

}

document.write('coding everybody'+i+'<br />');

}
위 코드의 결과는 아래와 같다.

coding everybody 0

coding everybody 1

coding everybody 2

coding everybody 3

coding everybody 4

종료조건에 따르면 10행이 출력돼야 하는데 5행만 출력되었다.
2행의 if(i === 5) 에 의해서 i의 값이 5일 때 break 문이 실행되면서 반복문이 완전히 종료된 것이다.
반복문 안에서 break가 실행되면 반복문을 즉시 종료시키는 것이다.

continue
그럼 실행을 즉시 중단 하면서 반복은 지속돼게 하려면 어떻게 해야 할까?
설명이 어렵다면 예제를 보자. 이전 예제의 break를 continue로 변경했을 뿐이지만 결과는 전혀 다르다.

for(var i = 0; i < 10; i++){

if(i === 5) {

continue;

}

document.write('coding everybody'+i+'<br />');

}
결과는 아래와 같다. 숫자 5가 보이지 않는다. 왜 그럴까?
i의 값이 5가 되었을 때 실행이 중단 됐기 때문에 continue 이후의 구문이 실행되지 않은 것이다.
하지만 반복문은 중단되지 않았기 때문에 나머지 결과가 출력된 것이다.

coding everybody 0

coding everybody 1

coding everybody 2

coding everybody 3

coding everybody 4

coding everybody 6

coding everybody 7

coding everybody 8

coding everybody 9

반복문의 중첩

반복문 안에는 다시 반복문이 나타날 수 있다. 다음 예제를 보자.
다음 예제는 00, 01, 02....99 까지를 화면에 출력한다.

// 0부터 9까지 변수 i에 순차적으로 값을 할당

for(var i = 0; i < 10; i++){

// 0부터 9까지의 변수를 j의 값에 순차적으로 할당

for(var j = 0; j < 10; j++){

// i와 j의 값을 더한 후에 출력

// String은 숫자인 i와 j의 데이터 타입을 문자로 형태를 변환하는 명령이다.

// String()을 제거하고 실행해보면 의미가 좀 더 분명하게 드러날 것이다.

document.write(String(i)+String(j)+'<br />');

}

단순히 글자를 반복적으로 출력하기 위해서 반복문을 사용한다고 생각 할 수도 있다.
하지만 반복문의 진가는 배열과 결합했을 때 나타난다.
다음 토픽인 배열에서 반복문의 진가를 살펴보자.

ES6이 발표되면서 interpolation (보간법) 문법이 보다 쉬어졌습니다!
ES5까지는 ==> Console.log('Coding everybody' + i + 'everyone'); 이런 식으로 작은 따옴표와 + 를 사용하였는데,
ES6부터는 ` 키(grave accent 키 - 숫자 1 키 왼쪽의 물결표시 밑) 와 ${ } 의 사용으로 가능합니다. ==> Console.log(`Coding everybody ${i} everyone`);
참고하시길 바랍니다...^^

<함수>

함수의형식

함수(function)란 하나의 로직을 재실행 할 수 있도록 하는 것으로 코드의 재사용성을 높여준다.
함수의 형식
function 함수명( [인자...[,인자]] ){

코드

return 반환값

}

함수의 정의와 호출
함수는 function 뒤에 함수의 이름이 오고, 소괄호가 따라온다.
소괄호에 인자라는 값이 차례로 들어오는데 이 값은 함수를 호출할 때 함수의 로직으로 전달될 변수다.
인자는 생략 할 수 있다. 함수를 호출 했을 때 실행하게 될 부분이 중괄호 안쪽에 온다.

다음 예제를 보자. 이 함수의 이름은 numbering이고, 내용은 0부터 9까지를 화면에 출력한다.
function numbering(){

i = 0;

while(i < 10){

document.write(i);

i += 1;

}

numbering();
위의 예제 제일 하단에 아래 구문에 의해서 numbering이라는 이름의 함수가 호출되고 있는 것이다.
결과는 아래와 같다.
0123456789

함수의 입력과 출력

함수의 핵심은 입력과 출력이다. 입력된 값을 연산해서 출력하는 것이 함수의 기본적인 역할이다.
다음은 함수에서 입력과 출력의 역할을 하는 구문들에 대한 설명이다.

return
함수 내에서 사용한 return은 return 뒤에 따라오는 값을 함수의 결과로 반환한다. 동시에 함수를 종료시킨다.
아래 내용을 보자. 결과는 egoing과 k8805다.

function get_member1(){

return 'egoing';

}

function get_member2(){

return 'k8805';

}

alert(get_member1());

alert(get_member2());
get_member1와 get_member2를 출력(alert)한 결과가 각각 egoing과 k8805인 이유는 함수 내에서 문자열 egoing과 k8805을 return을 하기 때문이다.

return은 결과를 반환하는 것 외에 함수를 중지시키는 역할도 한다. 다음 코드를 보자. 결과는 egoing이다.
function get_member(){

return 'egoing';

return 'k8805';

return 'sorialgi';

}

alert(get_member());

인자

인자(argument)는 함수로 유입되는 입력 값을 의미하는데, 어떤 값을 인자로 전달하느냐에
따라서 함수가 반환하는 값이나 메소드의 동작방법을 다르게 할 수 있다.
다음 예를보자. 결과는 1,2이다.

function get_argument(arg){

return arg;

}

alert(get_argument(1));

alert(get_argument(2));

5행의 get_argument(1)은 1행에서 3행 사이에 정의된 함수를 실행하는 구문이다.
5행의 1은 get_argument로 1이라는 값을 전달하겠다는 의미다.
이 때 1행에 정의된 (arg) 구문에 의해서 변수 arg의 값으로 숫자 1이 함수 안으로 전달된다.
이 변수 arg는 함수 get_argument 안에서만 유효하다. 이 관계는 아래와 같다.

복수의 인자
그럼 여러개의 입력 값을 받고 싶다면 어떻게 해야할까? 다음 예제를 보자. 결과는 30과 50이다.

function get_arguments(arg1, arg2){

return arg1 + arg2

}

alert(get_arguments(10, 20));

alert(get_arguments(20, 30));

위의 예제를 그림으로 나타내면 아래와 같다.
즉 함수를 호출 할 때 전달한 인자 10과 20은 함수의 선언부(1행)의 arg1, arg2에 차례로 할당된다.
이렇게 전달된 값은 함수 내부로 전달되서 더해진 후에 반환된다.

함수를 정의하는 다른 방법

자바스크립트는 함수를 정의하는 또 다른 방법을 제공한다. 다음 예제를 보자. 아래 방법은 함수를 정의 하는 또 다른 방법이다.

var numbering = function (){

i = 0;

while(i < 10){

document.write(i);

i += 1;

}

numbering();

위의 내용은 이전 예제와 동일 하지만 함수를 정의 하는 방법을 달리한 것이다.

<배열>

배열
배열(array)이란 연관된 데이터를 모아서 통으로 관리하기 위해서 사용하는 데이터 타입이다.
변수가 하나의 데이터를 저장하기 위한 것이라면 배열은 여러 개의 데이터를 하나의 변수에 저장하기 위한 것이라고 할 수 있다.
아래의 예제를 보자. 변수 name에는 문자 egoing이 할당되었다. 이제부터 name을 호출하면 문자 egoing을 사용할 수 있다.
var name = 'egoing'

alert(name);

배열의 생성
그렇다면 여러 개의 데이터를 하나의 변수에 담아서 관리할 수 있는 방법은 없을까? 있다.배열을 쓰면 된다.
변수 member에 회원정보를 담아보자. 대괄호([])는 배열을 만드는 기호다.
대괄호 안에 데이터를 콤마(,)로 구분해서 나열하면 배열이 된다.
var member = ['egoing', 'k8805', 'sorialgi']
하나의 변수에 3개의 데이터를 담았다. 각각의 데이터를 원소(Element)이라고 부른다.
자 그럼 이 데이터를 꺼내오려면 어떻게 해야 할까? 아래의 예제를 보자.
var member = ['egoing', 'k8805', 'sorialgi']

alert(member[0]);

alert(member[1]);

alert(member[2]);

결과는 아래의 문자열을 차례로 경고창으로 출력 할 것이다.

egoing

k8805

sorialgi

즉 배열에 담겨있는 값을 가져올 때는 대괄호 안에 숫자를 넣는다.
이 숫자를 색인(index)라고 부르고 0부터 시작한다.
즉 첫번째 원소(egoing)를 가져오려면 대괄호 안에 0을 넣어주어야 한다는 것이다.
두번째는 1, 세번째는 2를 입력한다. 이 값을 이용해서 배열에 저정된 값을 가져올 수 있다.

배열의 사용
배열의 진가는 반복문과 결합했을 때 나타난다. 반복문으로 리스트에 담긴 정보를 하나씩 꺼내서 처리 할 수 있기 때문이다. 다음 예제를 보자.

function get_members(){

return ['egoing', 'k8805', 'sorialgi'];

}

members = get_members();

// members.length는 배열에 담긴 값의 숫자를 알려준다.

for(i = 0; i < members.length; i++){

// members[i].toUpperCase()는 members[i]에 담긴 문자를 대문자로 변환해준다.

document.write(members[i].toUpperCase());

document.write('<br />');

}
결과는 아래와 같다.

egoing

k8805

sorialgi

위의 예제에서 주목해야 할 것은 반복문과 배열을 결합한 부분이다.
반복문을 이용해서 배열 members의 내용을 하나씩 꺼낸 후에 이름의 첫글자를 대문자로 변경한 후에 출력하고 있다.
정리하면, 배열이란 연관된 정보를 하나의 그룹으로 관리하기 위해서 사용한다. 그리고 그 정보를 처리 할 때는 반복문을 이용한다.

배열의 제어

배열의 크기
아래와 같은 방법으로 배열의 크기를 알아낼 수 있다. 결과는 5이다.
var arr = [1, 2, 3, 4, 5];

alert(arr.length);

배열의 조작 (추가)

다음은 배열의 끝에 원소를 추가하는 방법이다.
push는 인자로 전달된 값을 배열(li)에 추가하는 명령이다.
배열 li의 값은 a, b, c, d, e, f가 됐다.

var li = ['a', 'b', 'c', 'd', 'e'];

li.push('f');

alert(li);

다음은 복수의 원소를 배열에 추가하는 방법이다. concat은 인자로 전달된 값을 추가하는 명령이다.
var li = ['a', 'b', 'c', 'd', 'e'];

li = li.concat(['f', 'g']);

alert(li);

다음은 배열의 시작점에 원소를 추가하는 방법이다.
배열 li는 z, a, b, c, d, e가 됐다.
unshift는 인자로 전달한 값을 배열의 첫번째 원소로 추가하고 배열의 기존 값들의 색인을 1씩 증가시킨다.
var li = ['a', 'b', 'c', 'd', 'e'];

li.unshift('z');

alert(li);

만약 두번째 인덱스 뒤에 대문자 B를 넣고 싶다면 아래와 같이한다.
splice는 첫번째 인자에 해당하는 원소부터 두번째 인자에 해당하는 원소의 숫자만큼의 값을 배열로부터 제거한 후에 리턴한다.
그리고 세번째 인자부터 전달된 인자들을 첫번째 인자의 원소 뒤에 추가한다.
var li = ['a', 'b', 'c', 'd', 'e'];

li.splice(2, 0, 'B');

alert(li);

배열의 조작(제거)

다음은 배열의 첫번째 원소를 제거하는 방법이다. shift를 사용하면 된다. 아래 결과는 b, c, d, e 다.
var li = ['a', 'b', 'c', 'd', 'e'];

li.shift();

alert(li);

다음은 배열 끝점의 원소를 배열 li에서 제거한다. 이때는 pop를 사용한다. 결과는 a, b, c, d 다.
var li = ['a', 'b', 'c', 'd', 'e'];

li.pop();

alert(li);

배열의 조작(정렬)

다음은 정렬하는 방법이다. 결과는 a, b, c, d, e 다.
var li = ['c', 'e', 'a', 'b', 'd'];

li.sort();

alert(li);

역순으로 정렬하고 싶을 때는 아래와 같이 한다.

var li = ['c', 'e', 'a', 'b', 'd'];

li.reverse();

alert(li);

<객체(Object)>

객체의 생성

지금까지 살펴본 배열은 아이템에 대한 식별자로 숫자를 사용했다.
데이터가 추가되면 배열 전체에서 중복되지 않는 인덱스가 자동으로 만들어져서 추가된 데이터에 대한 식별자가 된다.
이 인덱스를 이용해서 데이터를 가져오게 되는 것이다.
만약 인덱스로 문자를 사용하고 싶다면 객체(dictionary)를 사용해야 한다.
다른 언어에서는 연관배열(associative array) 또는 맵( map), 딕셔너리(Dictionary)라는 데이터 타입이 객체에 해당한다.

다음은 객체를 만드는 법이다.
var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80};

위의 예제에서 egoing은 key가 되고, 10은 value가 된다.
아래는 객체를 만드는 다른 방법이다.

var grades = {};

grades['egoing'] = 10;

grades['k8805'] = 6;

grades['sorialgi'] = 80;

객체를 만들었으니 이제는 객체에서 필요한 값을 가져와보자.

다음은 sorialgi라는 이름(key)으로 저장된 값을 가져오는 법이다. 결과는 80이다.
var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80};

alert(grades['sorialgi']);

다음 방법으로도 객체의 속성에 접근 할 수 있다.
alert(grades.sorialgi);
alert(grade['sori'+'algi'];

다음은 객체에 저장된 데이터를 기준으로 반복작업을 하는 방법이다.
var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80};

for(key in grades) {

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

}

결과는 아래와 같다.

key : egoing value : 10

key : k8805 value : 6

key : sorialgi value : 80

for 문은 in 뒤에 따라오는 배열의 key 값을 in 앞의 변수 name에 담아서 반복문을 실행한다.
반복문이 실행될 때 변수 key의 값으로 egoing, k8805, sorialgi가 순차적으로 할당되기 때문에 grades[key]를 통해서 객체의 값을 알아낼 수 있다.
객체에는 객체를 담을수도 있고, 함수도 담을 수 있다.
var grades = {

'list': {'egoing': 10, 'k8805': 6, 'sorialgi': 80},

'show' : function(){

for(var name in this.list){

document.write(name+':'+this.list[name]+"<br />");
//console.log(name, this.list[name]);

}

};

grades.show();

이것은 자바스크립트를 이용한 객체 지향 프로그래밍 기법의 핵심이 되는 성질로
취지에 따라서 로직을 객체에 그룹핑해서 객체라는 부품을 조립해서 소프트웨어라는 완제품을 만들 수 있게 해준다.
객체 지향에 대해서는 뒤에서 자세히 살펴본다.

<모듈>

모듈이란?

프로그램은 작고 단순한 것에서 크고 복잡한 것으로 진화한다.
그 과정에서 코드의 재활용성을 높이고, 유지보수를 쉽게 할 수 있는 다양한 기법들이 사용된다.
그 중의 하나가 코드를 여러개의 파일로 분리하는 것이다. 이를 통해서 얻을 수 있는 효과는 아래와 같다.
1. 자주 사용되는 코드를 별도의 파일로 만들어서 필요할 때마다 재활용할 수 있다.
2. 코드를 개선하면 이를 사용하고 있는 모든 애플리케이션의 동작이 개선된다.
3. 코드 수정 시에 필요한 로직을 빠르게 찾을 수 있다. 필요한 로직만을 로드해서 메모리의 낭비를 줄일 수 있다.
4. 한번 다운로드된 모듈은 웹브라우저에 의해서 저장되기 때문에 동일한 로직을 로드 할 때 시간과 네트워크 트래픽을 절약 할 수 있다.

(브라우저에서만 해당)

순수한 자바스크립트에서는 모듈(module)이라는 개념이 분명하게 존재하지는 않는다.
하지만 자바스크립트가 구동되는 호스트 환경에 따라서 서로 다른 모듈화 방법이 제공되고 있다.
이 수업에서는 자바스크립트의 대표적인 호스트 환경인 웹브라우저에서 로직을 모듈화하는 방법에 대해서 알아볼 것이다.

호스트 환경이란? --> 호스트 환경에 따라 모듈 적용이 달라진다.(호스트 환경별 메뉴얼을 참고)
호스트 환경이란 자바스크립트가 구동되는 환경을 의미한다.
자바스크립트는 브라우저를 위한 언어로 시작했지만, 더 이상 브라우저만을 위한 언어가 아니다.
예를들어 node.js는 서버 측에서 실행되는 자바스크립트다.
이 언어는 자바스크립트의 문법을 따르지만 이 언어가 구동되는 환경은 브라우저가 아니라 서버측 환경이다.
또 구글의 제품 위에서 돌아가는 Google Apps Script 역시 자바스크립트이지만 google apps script가 동작하는 환경은
구글 스프레드쉬트와 같은 구글의 제품 위이다.
여러분은 자바스크립트의 문법을 이용해서 PHP와 같은 서버 시스템을 제어(node.js)하거나 구글의 제품(Google Apps Script)을 제어 할 수 있다.
지금 당장은 어렵겠지만, 언어와 그 언어가 구동되는 환경에 대해서 구분해서 사고 할 수 있어야 한다. 이를 위해서는 다양한 언어를 접해봐야 한다.

모듈이 없다면

우선 모듈이 없는 애플리케이션을 하나 만들어보자. 파일의 이름은 main.html 이다.

<!DOCTYPE html>

<html>

<head>

</head>

<body>

function welcome(){

return 'Hello world'

}

alert(welcome());

</script>

</body>

</html>
위의 코드는 아무런 문제가 없다. 하지만 welcome 함수가 자주 사용되는 것이라고 가정해보자.
이런 경우 이것이 필요할 때마다 이 함수를 정의해서 사용하는 것은 유지보수도 어렵고 낭비가 될 것이다.
이럴 때 모듈이 필요하다. 함수 welcome을 모듈로 만들어보자.

모듈의 사용

새로운 파일을 만든다. 이름은 greeting.js 다. 자바스크립트 파일은 확장자로 js를 사용한다.

greeting.js

function welcome(){

return 'Hello world';

}

main.html의 내용을 다음과 같이 변경한다.
main.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

alert(welcome());

</script>

</body>

</html>

이전 예제와 비교했을 때 결과는 같다. 하지만 함수 welcome을 main.html의 외부 파일로 분리했다. 다음은 위의 코드에 대한 분석이다.

<script src="greeting.js"></script>
JavaScript와 HTML은 완전히 다른 문법을 가진 언어다. 그런데 HTML 문서 안에는 JavaScript와 HTML이 동시에 표현된다.
따라서 브라우저에게 어디서부터 어디까지가 JavaScript이고, HTML인지를 구분해서 알려줘야 한다.

이 역할을 하는 HTML 태그가 script 태그다.
script 태그 안쪽에 위치하는 컨텐츠는 브라우저에 의해서 JavaScript로 인식된다. 그런데 위의 코드는 컨텐츠 대신에 src 속성이 있다.
브라우저는 src 속성에 있는 파일을 다운로드해서 실행시킨다.
greeting.js에는 함수 welcome가 정의되어 있기 때문에 main.html 안에 이 함수가 정의 되어 있지 않음에도 실행할 수 있는 것이다.

Node.js에서의 모듈의 로드

본 수업은 Node.js를 위한 수업이 아니기 때문에 Node.js를 실행하는 방법은 다루지 않는다.
호스트 환경에 따라서 모듈을 로드하는 방법이 달라진다는 것을 보여주기 위한 예제일 뿐이기 때문에 동영상 수업을 참고하자.

모듈을 로드하는 방법은 호스트 환경에 따라서 달라진다. Node.js에서는 아래와 같은 방법으로 모듈을 로드한다.

node.circle.js (로드될 대상)

var PI = Math.PI;

exports.area = function (r) {

return PI * r * r;

};

exports.circumference = function (r) {

return 2 * PI * r;

};

node.demo.js (로드의 주체)

var circle = require('./node.circle.js');

console.log( 'The area of a circle of radius 4 is '

+ circle.area(4));

아래는 실행방법과 실행 결과다.
F:\BitNami\wampstack-5.4.22-0\apache2\htdocs\javascript\module>node node.demo.js

The area of a circle of radius 4 is 50.26548245743669

라이브러리

라이브러리는 모듈과 비슷한 개념이다.
모듈이 프로그램을 구성하는 작은 부품으로서의 로직을 의미한다면
라이브러리는 자주 사용되는 로직을 재사용하기 편리하도록 잘 정리한 일련의 코드들의 집합을 의미한다고 할 수 있다.
프로그래밍의 세계에는 휼룡한 라이브러리가 많다.
좋은 라이브러리를 선택하고 잘 사용하는 것은 프로그래밍의 핵심이라고 할 수 있다.

jQuery의 JavaScript 코드를 받아서 가져온다. 또하나는 API Documentation을 다운받는다.
이를 jQuery.js의 파일에 복붙한 후 저장한다.

1. jQuery는 $로 시작한다.
2. $('#list li').text('coding everybody') --> id값이 list, 하위값이 li를 선택하고 text들이 coding everybody로 한꺼번에 변경된다.

아래는 jQuery를 이용한 예제이다.

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<li>empty</li>

</ul>

$('#execute_btn').click(function(){

$('#list li').text('coding everybody');

})

</script>

</body>

</html>

다음은 jQuery를 이용하지 않고 동일한 기능을 구현한 예제이다.

<!DOCTYPE html>

<html>

<body>

<li>empty</li>

</ul>

function addEvent(target, eventType,eventHandler, useCapture) {

if (target.addEventListener) { // W3C DOM

target.addEventListener(eventType,eventHandler,useCapture?useCapture:false);

} else if (target.attachEvent) { // IE DOM

var r = target.attachEvent("on"+eventType, eventHandler);

}

function clickHandler(event) {

var nav = document.getElementById('list');

for(var i = 0; i < nav.childNodes.length; i++) {

var child = nav.childNodes[i];

if(child.nodeType==3

continue;

child.innerText = 'Coding everybody';

}

addEvent(document.getElementById('execute_btn'), 'click', clickHandler);

</script>

</body>

</html>

<UI와 API 그리고 문서보는 법>

API란?

UI
사용자를 대하는 접점.

API
Application Programming Interface의 약자
프로그램이 동작하는 환경을 제어하기 위해서 환경에서 제공되는 조작 장치이다.
이 조작 장치는 프로그래밍 언어를 통해서 조작할 수 있다.

프로그래밍을 공부하기 위한 자료는 크게 레퍼런스(reference)와 tutorial(안내서)가 있다.
통상 튜토리얼은 언어의 문법을 설명하고, 레퍼런스는 명령어의 사전을 의미하다.
본 수업은 자바스크립트에 대한 일종의 안내서라고 할 수 있고, 자바스크립트 사전은 레퍼런스라고 할 수 있다.

JavaScript의 API
자바스크립트의 API는
1. 자바스크립트 자체의 API - ECMAScript, 자바스크립트사전(생활코딩), 자바 스크립트 래퍼런스(MDN), jscript레퍼런스(MSDN)
2. 자바스크립트가 동작하는 호스트 환경의 API로 구분된다. - 웹브라우저 API, Node.js API, Google Apps Script API

<정규표현식>

정규표현식(regular expression)은 문자열에서 특정한 문자를 찾아내는 도구다.
이 도구를 이용하면 수십줄이 필요한 작업을 한줄로 끝낼 수 있다.

정규표현식은 하나의 언어라고 할 수 있다.
그러므로 본 수업에서 정규표현식의 모든 것을 다루는 것은 불가능하다. 본 수업은 아래와 같은 전략을 취하고 있다.
1. 입문자에게 정규표현식이 무엇인가에 대한 개념을 알려준다. 초심자에게는 사용법까지 공부하는 것은 무리다. 나중에 문자를 처리해야하는 상황이 생겼을 때 이곳을 찾아오거나 본 수업을 완주했을 때 마지막 단계로 본 수업을 공부한다.
2. 정규표현식을 이미 알고 있는 개발자에게는 정규표현식을 자바스크립트에서는 어떻게 사용하는가를 알려준다.
3. 정규표현식 자체에 대한 학습이 필요하다면 정규표현식 수업을 공부하자. - https://opentutorials.org/course/909/5142

정규표현식 생성

정규표현식은 두가지 단계로 이루어진다. 하나는 컴파일(compile) 다른 하나는 실행(execution)이다. 우선 컴파일부터 알아보자.

컴파일

컴파일은 검출하고자 하는 패턴을 만드는 일이다.

우선 정규표현식 객체를 만들어야 한다.
객체를 만드는 방법은 두가지가 있다.
1. 정규표현식 리터럴
var pattern = /a/; --> 우리가 찾고자 하는 a를 변수 pattern에 넣는다.

2. 정규표현식 객체 생성자
var pattern = new RegExp('a'); --> new로 정규표현식 객체를 만들었다. RegExp(Regular Expression의 약자) 찾고자하는 패턴은 'a' = a이다.

a라는 텍스트를 찾아내는 정규표현식을 만들어보자.

두가지 모두 같은 결과를 만들지만 각자가 장단점이 있다.

정규표현식 메소드 실행

정규표현식을 컴파일해서 객체를 만들었다면 이제 문자열에서 원하는 문자를 찾아내야 한다.

RegExp.exec()
console.log(pattern.exec('abcdef')); // ["a"]
실행결과는 문자열 a를 값으로 하는 패턴을 리턴한다.

console.log(pattern.exec('bcdefg')); // null
인자 'bcdef'에는 a가 없기 때문에 null을 리턴한다.

var pattern = /a/;
pattern.exec('abcde'); --> a 출력

var pattern = /a./;
pattern.exec('abcde'); --> ab 출력. 점(.)은 하나의 문자를 말함.

---

RegExp.test()
test는 인자 안에 패턴에 해당되는 문자열이 있으면 true, 없으면 false를 리턴한다.
console.log(pattern.test('abcdef')); // true
cnosole.log(pattern.test('bcdefg')); // false

문자열 메소드 실행

문자열 객체의 몇몇 메소드는 정규표현식을 사용할 수 있다.

String.match() - RegExp.exec()와 비슷하다
console.log('abcdef'.match(pattern)); // ["a"]
console.log('bcdefg'.match(pattern)); // null

String.replace() - 문자열에서 패턴을 검색해서 이를 변경한 후에 변경된 값을 리턴한다.
console.log('abcdef'.replace(pattern, 'A')); // Abcdef

---

var pattern = /a/; //undefined
var str = 'abcdef';
str.match(pattern); // ["a"]
str.match(pattern); // null
var str = 'abcdef'; // undefined
str.replace(pattern, 'A'); // "Abcdef"

<옵션>

정규표현식 패턴을 만들 때 옵션을 설정할 수 있다. 옵션에 따라서 검출되는 데이터가 달라진다.

i - i를 붙이면 대소문자를 구분하지 않는다.

var xi = /a/;

console.log("Abcde".match(xi)); // null

var oi = /a/i;

console.log("Abcde".match(oi)); // ["A"];

g - g를 붙이면 검색된 모든 결과를 리턴한다.

var xg = /a/;

console.log("abcdea".match(xg));

var og = /a/g;

console.log("abcdea".match(og));

<사례>

캡쳐 - 괄호안의 패턴은 마치 변수처럼 재사용할 수 있다. 이 때 기호 $를 사용하는데 아래 코드는 coding과 everyday의 순서를 역전시킨다.

var pattern = /(\w+)\s(\w+)/;

var str = "coding everybody";

var result = str.replace(pattern, "$2, $1"); // $2후에 ,를 찍고(공백)후에 $1가 나온다.

console.log(result);

1. ( )은 정규표현식에서 group을 의미한다.
2. \w -> A~Z, a~z, 0~9의 문자를 의미한다.
3. + -> 수량자로서 앞에있는 문자가 한 개 이상인 경우에 이 패턴이 유효해진다.
4. \s -> space, 공백을 뜻한다. 어떠한 문자뒤에 띄어쓰기가 있다는 조건

치환 - 아래 코드는 본문 중의 url을 링크 html 태그로 교체한다.

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);

결과는 아래와 같다.

생활코딩 : <a href="http://opentutorials.org/course/1">http://opentutorials.org/course/1</a> 입니다. 네이버 : <a href="http://naver.com">http://naver.com</a> 입니다.

정규표현식 시각화 - https://regexper.com/

정규표현식 빌더 - https://regexr.com/