[Window]
웹 브라우저에 내장된 전역객체인 Window 객체에는 대화상자를 표시하기 위한 세 개의 메서드가 있다.
1. window.alert();
2. window.prompt();
3. window.confirm();
실무에서는 prompt() 메서드 사용을 지양하지만, 이번 섹션에서는 단순히 이런 기능도 있다는 정도로 짚고 넘어간다.
Window 객체의 메서드들은 window. 를 생략해도 호출된다는 특징이 있다.
[Console]
Console 객체의 메서드를 이용해서 콘솔에 값을 출력해보았다. 사용한 메서드는 아래와 같다.
1. console.dir();
2. console.log();
3. console.info();
4. console.warn();
5. console.error();
특히, 자바스크립트 소스코드의 실행시간을 재기 위해서 아래의 두 메서드를 사용했다.
1. console.time();
2. console.timeEnd();
[이벤트와 이벤트 처리기 및 그 등록]
웹 브라우저에서 이루어지는 단순 클릭, 단순 마우스 움직임부터 특정 객체를 클릭, 더블클릭 혹은 그 위에서의 마우스 움직임 등을 모두 통틀어 이벤트라고 한다. 이러한 이벤트가 발생할 때 미리 등록해둔 기능을 수행하는 프로그램을 이벤트 주도형 프로그램이라고 한다.
이벤트 처리기란, 이벤트가 발생했을 때 실행되는 함수 자체를 의미한다. 특정 함수를 이벤트 처리기로 등록하는 방법은 세 가지이며, 이번 시간에 배운 것은 1번과 2번 두 가지이다.
1. HTML 요소의 속성으로 등록하는 방법
2. DOM 요소의 프로퍼티(속성)로 등록하는 방법
3. addEventListener 메서드를 사용하여 등록하는 방법
e.g.
1. <input type="button" id="btn" value="click me!" onclick="getTime()"/>
2.
<script>
window.onload = function(){
document.getElementById("btn").onclick = getTime();
}
</script>
주요 이벤트 처리기 이름은 아래의 표와 같다.
| 이벤트 처리기 이름 | 이벤트 종류 |
| onclick | 마우스로 클릭했을 때 |
| ondblclick | 마우스로 더블클릭했을 때 |
| onmousedown | 마우스 버튼이 눌렸을 때 |
| onmouseup | 눌렸던 마우스 버튼이 떼어질 때 |
| onmousemove | 마우스 포인터가 HTML 요소 위에서 움직일 때 |
| onmouseout | 마우스 포인터가 HTML 요소를 벗어났을 때 |
| onmouseover | 마우스 포인터가 HTML 요소 위에 놓였을 때 |
| onkeydown | 키보드 키가 눌렸을 때 |
| onkeyup | 눌렸던 키보드 키가 떼어질 때 |
| onkeypress | 소프트웨어적으로 키가 눌릴 때(키를 꾹 누르고 있으면 반복 실행된다.) |
| onchange | input 요소의 값이 바뀌었을 때 |
| onblur | input 요소가 포커스를 잃었을 때 |
| onfocus | input 요소에 포커스를 맞추었을 때 |
| onselect | 텍스트 필드 등의 텍스트를 선택했을 때 |
| onsubmit | form 요소의 제출 버튼을 눌렀을 때 |
| onload | HTML을 모두 읽어 들였을 때 |
| onunloadWeb | 웹 페이지가 메모리에서 내려갈 때(다른 페이지로 전환할 때) |
| onabort | 페이지나 이미지 읽어 들이기가 중단되었을 때 |
| onerror | 페이지나 이미지를 읽어 들이는 동안 오류가 발생되었을 때 |
| onresize | html 요소의 크기가 바뀌었을 때 |
등록했던 이벤트 처리기를 제거하는 방법은 아래와 같다.
e.g. document.getElementById("btn").onclick = null;
[타이머]
Window 객체에는 setTimeout() 메서드와 setInterval() 메서드 그리고 각각에 대응하는 clearTimeout()메서드와 clearInterval() 메서드가 있다. setTimeout() 메서드는 지정한 시간이 흐른 후에 함수를 단 한 번 호출하는 메서드이며, setInterval() 메서드는 지정한 시간마다 반복해서 함수를 호출하는 메서드이다.
이 메서드들을 활용하여 매 초마다 째깍대는 시계를 직접 실습해보았다.
[HTML 요소를 동적으로 읽고 쓰기]
<input/>태그와 같이 여는 태그와 닫는 태그가 쌍을 이루지 않는 태그의 경우 .value 속성을 통해서 그 값을 가져올 수 있으며, <p></p>태그나 <span></span>태그와 같이 쌍을 이루는 태그의 경우 .innerHTML(.innerTEXT) 속성을 통해서 그 값을 가져올 수 있었다. 그러나, <textarea></textarea>태그의 경우 쌍으로 이루어져 있음에도 불구하고 .value 속성을 통해서 그 값을 가져올 수 있다. 이를 표로 정리하면 아래와 같다.
| 요소 | type 속성의 값 | 프로퍼트(속성) | 설명 |
| input | text, number 등 | value | 입력된 값을 문자열로 변환한 값 |
| checkbox, radio | checked | 항목의 선택 여부를 의미하는 논리값 | |
| select | - | seletedIndex | 선택된 option 요소를 가리키는 0부터 시작하는 번호 |
| textarea | - | value | 입력된 문자열 |
초창기 자바스크립트의 유일한 출력 수단은 document.write() 메서드였다. 그러나 지금은 그다지 사용되지 않는다. 왜냐하면 사용시 <body> 태그 하위에 존재하던 기존의 내용을 모두 지워버리기 때문이다.
자바스크립트를 통해서 다양한 도형이나 그래프 등을 그려낼 수도 있는데 그 대표적 라이브러리로 D3.js(https://d3js.org/)나 C3.js(https://c3js.org/)가 있다.
[제어 구문 / 조건문]
제어구문은 아래의 표와 같이 요약할 수 있다.
| 분류 | 제어구문 | 설명 |
| 조건문 | if/else문, switch문, try/catch/finally문 | 조건에 따라 처리를 분기 |
| 반복문 | while문, do/while문, for문, for/in문, for/of문 | 조건을 만족하면 처리를 반복 실행 |
| 점프문 | break문, continue문, return문, throw문 | 프로그램의 다른 위치로 이동 |
if/else 문을 사용할 때에, else 절은 가장 가까운 if문과 호응된다는 점에 유의하여야 한다. 잘못 해석되는 상황을 피하기 가장 좋은 방법은 단 한 문장이라 하더라도 중괄호를 통해서 블록 문장으로 만들어 두는 것이다.
if/else 문을 사용하여 분기점을 여러개 만들면 코드가 복잡해 보일 수 있는 반면, switch 문을 사용하면 보다 간결하게 나타낼 수 있다. switch 문의 경우, 특정 케이스에 해당(=== 연산 결과가 true)되는 경우라 하더라도, 그 이후 문장을 모두 실행하는 fall through 방식으로 실행됨으로, break 문(또는 return 문)을 사용함으로써 폴 스루 방식을 피하는 것이 혼돈을 줄이는 방법이다. 또한 어떠한 케이스에도 해당되지 않는 경우 실행되는 default 문의 경우 모든 케이스가 작성된 뒤 맨 마지막에 작성해주는 것이 관례이다.
[반복문]
반복되는 횟수에 무관하게 조건만 맞으면 반복하는 것이 while 문이다. 반면 반복되는 횟수를 지정하여 문장을 반복하는 것이 for문이다.
while문과 for문 모두 반복문이므로 continue 문과 break 문을 사용할 수 있다. do/while문은 while문과 거의 유사하나, 일단 문장을 실행시킨 뒤에 조건을 판단하는 점이 차이점이다.
for문의 구성은 초기화 식, 조건식, 반복식, 문장으로 나눌 수 있으며, 초기화 식은 최초 실행시에 1회만 실행한다. 이후 조건식을 판단하며, 조건식이 참인 경우 문장을 실행하고 문장이 모두 실행된 후에 반복식을 실행한다. 이후 다시 조건식을 판단하는 순서이다.
for문의 경우 초기화식, 조건식, 반복식을 모두 생략할 수 있으며(단 세미콜론은 생략할 수 없다.), 이런 문장(for(;;){ 실행문장; })은 while(true){ 실행문장; }과 동일한 논리를 갖는다. 즉 break 문 등을 사용하여 반복문에서 탈출시키지 않으면 무한루프에 빠질 수 있는 문장이라는 의미이다.
for문 안에 for문을 작성하는 식의 문장을 중첩 반복문이라 하며, 주로 구구단이나 소수 구하기 프로그램 등에 쓰인다.
for/in 문의 경우 객체의 프로퍼티(속성)를 순회하는 반복문으로 객체를 다룰때 매우 유용하다.
[점프문]
기본적으로 지금까지 배운 break 문과 continue 문이 점프문에 해당한다. 왜냐하면 해당 문장들을 만난 프로그램은 특정 영역으로 이동(점프)되기 때문이다.
특히, switch 문이나 반복문(for, while 등)에 레이블을 붙여서 해당 레이블이 붙은 반복문을 빠져나오는 순간으로 점프할 수도 있는데 예제 코드는 아래와 같다.
e.g. loop: while ( true ) { if ( window.confirm("종료하시겠습니까?") ){ break loop; } }
e.g. const a = [2, 4, 6, 8, 10], b = [1, 3, 5, 6, 9, 11];
loop: for ( let i = 0; i < a.length; i++ ){
for ( let j = 0; j < b.length; j++ ){
if ( a[i] == b[j] ) { console.log(a[i]); break loop; }
}
}
break 문의 경우 반복문을 단순히 탈출하는 것이기 때문에 쉽게 이해할 수 있지만, continue 문의 경우 실행하던 반복문장을 멈추고, 다음 반복을 새로 시작하기 때문에 헷갈릴 수 있다. 아래의 표는 continue 문장에 의해서 반복문이 새로 시작될 때의 동작을 나타낸 것이다.
| 반복문 | continue 문을 만났을 때의 동작 |
| while문 | 반복문의 처음으로 되돌아가서 조건식을 다시 평가한다. 그 결과가 true이면 반복문을 처음부터 실행한다. |
| do/while문 | 중간을 건너뛰고 반복문의 마지막에 적힌 조건식을 평가한다. 그 결과가 true이면 반복문을 처음부터 실행한다. |
| for문 | 반복식을 실핸한 후, 조건식을 평가한다. 그 겨로가가 true이면 반복문을 이어서 실행한다. |
| for/in문 | 반복문의 처음으로 되돌아간다. 지정한 변수에 할당되어 있는 속성(프로퍼티)의 다음 속성(프로퍼티)을 대상으로 문장을 마저 실행한다. |
[함수 정의]
함수를 정의 하는 방법은 아래와 같이 네 가지가 있다.
1. 함수 선언문으로 정의하는 방법 : function f(x) { return x*x; }
2. 함수 리터럴로 정의하는 방법 : const f = function(x) { return x*x; };
3. Function 생성자로 정의하는 방법 : const f = new Function("x", "return x*x" );
4. 화살표 함수 표현식으로 정의하는 방법 (ES6) : const f = x => x*x;
중첩함수란, 다른 언어에서는 흔하지 않은 개념인데, 특정 함수의 내부에 선언된 함수를 가리켜 그 함수의 중첩함수라고 한다. 이러한 중첩함수는 외부함수의 최상위 레벨에만 작성될 수 있다. 즉 특정 함수 내부에 작성된 if 문이나 switch문 등의 문장 안에는 중첩함수를 작성할 수 없다. 또한 중첩함수의 참조는 그 중첩함수를 둘러싼 외부함수의 '지역'변수에 저장되므로, 외부 함수의 밖에서 접근할 수 없다. 중첩함수의 중요한 성질은 자신을 둘러싼 외부 함수의 인수와 지역변수에 접근할 수 있다는 점이다.
[함수 호출]
1. 가장 기본적 함수 호출 : 그룹 연산자인 ()를 붙여서 함수를 호출한다.
2. 메서드 호출 : 객체의 프로퍼티가 함수인 경우 이를 메서드라고 부르는데, 이를 호출할 때에는 객체_식별자.메서드_명()과 같이 호출한다.
3. 생성자 호출 : 함수를 생성자로서 동작하도록 하려면 new 키워드를 붙여 호출하면 된다.
4. call(), apply() 메서드를 사용한 간접 호출 : 이후에 자세히 다룬다.
[함수의 인수]
경우에 따라서는 인수를 생략하여 호출할 수도 있다. Function 객체의 내부에 지역변수로서 가상의 배열 형태로 존재하는 arguments 변수(Arguments 객체)를 사용하여 임의의 개수인 n개의 인수를 넘겨 받도록 함수안의 문장을 작성할 수도 있다.
[재귀 함수]
어떤 함수가 자기 자신을 호출하는 행위를 가르켜 재귀호출이라 하며, 이러한 재귀호출을 수행하는 함수를 재귀함수라고 한다. 재귀함수는 실행이 완료될 때까지 메모리의 공간을 계속해서 차지하고 있으므로, 재귀로 간단하게 풀 수 있는 경우에만 사용하고 이외의 경우에는 사용을 지양한다.
또한 재귀함수의 경우 무한루프에 빠지지 않도록 반드시 멈출 수 있는 조건을 포함하게 작성하여야 한다. 그렇게 하지 않으면 메모리의 모든 공간을 차지해버리는 Stack Overflow 현상이 일어날 수도 있다.
[프로그램의 실행과 평가과정]
생략하고 다음 시간에 그림으로 이해하는 것으로 넘어가기로 함.
[상황에 따라 달라지는 this]
1. 최상위 레벨 코드의 this : 전역 객체를 의미한다.
2. 이벤트 처리기 안에 있는 this : 이벤트가 발생한 요소 객체를 의미한다.
3. 생성자 함수 안에 있는 this : 그 생성자로 생성한 객체(인스턴스)를 의미한다.
4. 생성자의 prototype 메서드 안에 있는 this : 그 생성자로 생성한 객체(인스턴스)를 의미한다.
5. 직접 호출한 함수 안에 있는 this : 함수를 호출한 곳이 최상의 레벨의 코드라면, 전역 객체를 가르킨다. 함수를 호출한 곳이 특정 객체의 속성(프로퍼티)이라면, 해당 속성을 메서드로 갖고 있는 객체를 의미한다.
6. apply() 메서드와 call() 메서드로 호출한 함수 안에 있는 this : this가 의미하는 객체를 동적으로 바꾸어 넘겨줄 수 있다. 이는 추후 자세히 배울 예정이다.
'컴퓨터 공학 > 프로그래밍 과외 기록' 카테고리의 다른 글
| [자바스크립트 과외] 9. Day4 요점정리 (0) | 2021.07.25 |
|---|---|
| [자바스크립트 과외] 8. Day3 요점정리 (0) | 2021.07.11 |
| [자바스크립트 과외] 6. Day1 요점정리 (0) | 2021.06.26 |
| [자바스크립트 과외] 5. 객체(Object)란? (0) | 2021.06.26 |
| [자바스크립트 과외] 4. 진리표 (0) | 2021.06.25 |