WEB2 - JavaScript

이슬비·2023년 5월 31일
JavaScriptweb

생활코딩

목록 보기
3/3

생활코딩 WEB2 - JavaScript

1. 수업소개

웹이 등장하였을 때는 HTML 기술만이 존재하였다. HTML은 정적이며 한 번 화면에 출력되면 그 형태를 유지한다. 이후 사용자와 상호작용하는 웹페이지를 만들기 위해 JavaScript가 탄생하였다.

JavaScript는 동적이며 사용자의 조작에 반응하여 움직인다. 웹은 HTML을 이용하여 웹페이지를 만든 후 JavaScript를 이용하여 사용자와 상호작용할 수 있는 기능을 추가함으로써, 강력한 시스템으로 성장하였다.

2. 수업의 목적

사용자와 상호작용할 수 있는 JavaScript를 배워보자. 다음과 같이 버튼을 이용하여 웹페이지의 주간 모드와 야간 모드를 활성화 할 수 있는 기능을 만들어보고자 한다.

우선 코드를 먼저 살펴보자.

<input type="button" value="night" onclick="
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';
">
<input type="button" value="day" onclick="
document.querySelector('body').style.backgroundColor = 'white';
document.querySelector('body').style.color = 'black';
">

<input> : 사용자로부터 입력을 받을 수 있는 입력 필드.
type : <input> 태그가 나타낼 타입. 버튼을 만들기 위해서는 속성값으로 button을 입력한다.
value : <input> 태그의 초깃값.
onclick : HTML 사용 설명서에는 onclick의 속성값으로는 JavaScript가 와야 한다고 적혀있다. 사용자가 onclick 속성이 위치하고 있는 태그를 클릭하였을 때 JavaScript 코드가 실행된다.

JavaScript 코드를 좀 더 자세하게 보자.

document.querySelector('body').style.backgroundColor = 'black';

사용자가 태그를 클릭하면
document.querySelector('body') : 현재 document에서 <body> 태그를 선택.
style.backgroundColor = 'black' : style 속성의 backgroundColor를 black으로 지정.

어떤 버튼을 클릭하냐에 따라 <body> 태그의 style 속성의 CSS 코드가 바뀌는 것을 확인할 수 있다.

3. HTML과 JS의 만남: <script> 태그

기본적으로 JavaScript는 HTML 위에서 동작하는 언어이다. 따라서 JavaScript를 넣기 위해서는 HTML 코드로 'JavaScript 코드가 시작된다.'라는 것을 알려줘야 한다.

이를 위해서 <script> 태그를 사용한다. <script> 태그 안에 있는 코드는 JavaScript로 해석된다.

1 + 1을 JavaScript와 HTML로 입력하였을 때 어떤 차이가 있는지 확인해보자.

<h1>JavaScript</h1>
<script>
	document.write(1 + 1);
</script>
        
<h1>HTML</h1>
1 + 1

정적인 HTML과는 다르게 JavaScript는 동적이기 때문에 계산을 수행한 뒤 출력하는 능력을 지니고 있다.

4. HTML과 JS의 만남: 이벤트

이벤트는 JavaScript가 사용자와 상호작용하는데 핵심적인 역할을 한다.

<input> 태그를 이용해서 버튼을 만들어보자.

<input type="button" value="hi" onclick="alert('hi');">

onclick 속성은 다음 특징을 갖고 있다.

  1. onclick 속성의 값으로는 반드시 JavaScript가 와야 한다.
  2. onclick 속성의 값을 웹브라우저가 기억하고 있다가 onclick 속성이 위치하고 있는 태그가 클릭되었을 때, 기억하고 있던 JavaScript 코드가 웹브라우저에 동작한다.

이처럼 웹브라우저 위에서 일어나는 일들을 이벤트(Event)라고 한다. 다른 이벤트도 알아보자.

<input type="text">

type 속성의 값을 text로 설정하면 텍스트창이 만들어진다.

onchange : 텍스트창에 텍스트를 입력하고 수정하였을 때 활성화.
onkeydown : 텍스트창에 텍스트를 입력하면 활성화.

이렇게 onclick, onchange, onkeydown과 같은 속성을 이벤트라고 한다.

5. HTML과 JS의 만남: 콘솔

파일과 웹페이지를 만들지 않고도 가벼운 JavaScript 코드를 실행하는 방법도 있다. 바로 콘솔을 이용하여 JavaScript를 실행하는 것이다.

[우클릭]-[요소 점검]-[콘솔] 또는 [우클릭]-[요소 점검]-esc를 입력하면 콘솔에서 간단하게 JavaScript를 실행할 수 있다.

예를 들어, 본문의 글자 수를 알고 싶다면 콘솔에 다음 코드를 입력한다.

alert(string.length);

콘솔에서 실행하는 JavaScript는 해당 웹페이지를 대상으로 실행된다.
예를 들어, 영상 또는 게시글의 댓글에서 추첨을 통해 사은품을 주는 이벤트가 있다고 하자. 해당 추첨을 편하게 하기 위해서는 콘솔을 이용하여 JavaScript를 작성하면 된다.

웹페이지와 JavaScript를 이용한다는 것은 웹페이지를 만든다는 거대한 목표와 이미 만들어져있는 웹페이지를 편의에 맞게 이용하는 작은 목표를 지닌다.

6. 데이터 타입 - 문자열과 숫자

JavaScript에서 데이터 타입 또는 자료형은 다음과 같다.

  1. Boolean
  2. Null
  3. Undefined
  4. Number
  5. String
  6. Symbol
  7. Object

이 중 Number과 String에 대해서 보고자 한다.

파이썬과 문법이 비슷하다.

콘솔에서 산술 연산자 +, -, *, /는 다음과 같이 작동한다.

문자열은 큰 따옴표(") 또는 작은 따옴표(')의 쌍으로 묶어야 한다. 문자열과 관련된 속성과 메서드는 String - JavaScript | MDN에서 확인할 수 있다.

같은 연산자를 사용한다 하더라고 데이터 타입이 무엇이냐에 따라 결과가 다르게 나오기 때문에, 데이터 타입을 정확하게 표현하는 것이 중요하다.

7. 변수와 대입 연산자

변수(Variable)란 바뀔 수 있는 값을 의미한다.
대입 연산자란 우항의 값을 좌항의 변수에 대입하게 해주는 연산자를 의미한다.
상수(Constant)란 변하지 않는 값을 의미한다. 따라서 상수에 우항의 값을 대입하는 것은 불가능하다.

그렇다면 변수를 쓰는 이유는 무엇일까? 다양한 이유가 있겠지만 다음 글을 보자.

이 글에서 'JavaScript' 부분을 'Python'이라고 수정하고 싶다. 일일히 찾아서 수정하는 방법도 있겠지만 변수를 사용하면 손쉽게 중복을 피하여 글을 편집할 수 있다.

변수를 선언할 때에는 변수명 앞에 var을 선언한다.

8. 웹브라우저 제어

3.html로 다시 돌아오자.
night 버튼을 누르면 야간 모드가 활성화 되면서 <body> 태그의 style 속성이 아래와 같이

<body style="background-color: black; color: white;">

day 버튼을 누르면 주간 모드가 활성화 되면서 아래와 같이

<body style="background-color: white; color: black;">

로 변한다.

이렇게 웹브라우저를 제어하기 위해서는 다음과 같은 사항들을 알아야 한다.

  1. CSS의 본질적이고 중요한 문법
  2. JavaScript를 통해서 원하는 태그를 선택하는 방법

9~11. CSS 기초: style 속성 & style 태그 & 선택자

챕터 9부터 챕터 11까지는 CSS에 관련된 내용이다. 본 파트는 JavaScript에 관한 내용이기 때문에 보지 않겠다.

CSS에 관한 자세한 내용은 WEB2 - CSS에서 확인가능하다.

12. 제어할 태그 선택하기

3.html의 night 버튼과 day 버튼을 만들어보자.
우선은 <input> 태그를 이용하여 버튼을 만든다. 또한 클릭하였을 때의 이벤트이므로 onclick 속성을 사용한다.

<input type="button" value="night" onclick="">

클릭하였을 때 <body> 태그의 style 속성을 동적으로 넣고자 한다. 즉 웹브라우저에게 <body> 태그라는 선택자를 선택하게 해야한다. querySelector를 이용한다.

document.querySelector(selectors);

selectors에는 ID 선택자, 클래스 선택자, 또는 태그 선택자가 들어간다. <body> 태그를 선택해보자.

<input type="button" value="night" onclick="
document.querySelector('body')
">

<body> 태그의 style 속성을 수정하고 싶을 때는 .style을 이용한다.

<input type="button" value="night" onclick="
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';
">

같은 방법으로 day 버튼도 완성한다.

<input type="button" value="night" onclick="
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';
">
<input type="button" value="day" onclick="
document.querySelector('body').style.backgroundColor = 'white';
document.querySelector('body').style.color = 'black';
">

13. 프로그램, 프로그래밍, 프로그래머

JavaScript라는 프로그래밍 언어는 무엇인가?

HTML과 JavaScript는 컴퓨터 언어이다. 그리고 JavaScript는 동시에 컴퓨터 프로그래밍 언어라고도 한다.

그렇다면 프로그램이란 무엇일까? 프로그램의 어원은 음악회 같은 곳에서 시간의 순서에 따라 음악이 연주되는 순서를 말한다. 즉 순서가 프로그램의 본질이다. 이 순서를 만드는 행위를 프로그래밍, 만드는 사람을 프로그래머라고 한다.

의도에 따라서 순서대로 여러 기능을 작동시키는 것이 컴퓨터를 사용하는 일반적인 방법이다. 하지만 그 순서가 반복되고 반복되는 과정에서 비용이 많이 들자, 그 반복을 극복해내기 위해 컴퓨터 프로그래밍 언어가 탄생하였다.

시간의 순서에 따라서 실행되어야 할 기능을 프로그래밍 언어의 문법에 맞게 글로 적어두는 방식을 고안한 것이다. 그리고 작업이 필요할 때마다 적어두었던 글을 컴퓨터에게 내밀어 실행시킨다. 이것이 프로그램의 본질적인 의미라고 할 수 있다.

HTML은 시간의 순서에 따라 실행되지 않지만 JavaScript는 사용자와 상호작용하기 위해 만들어진 컴퓨터 프로그래밍 언어이기 때문에, 시간의 순서에 따라 웹브라우저의 여러 기능을 수행한다.

14. 조건문 예고

3.html의 night 버튼과 day 버튼의 경우를 생각해보자. 이 두 버튼을 하나로 합치고자 한다. 야간 모드의 경우 버튼을 누르면 주간 모드로 바뀌고, 주간 모드의 경우 버튼을 누르면 야간 모드로 바뀌는 기능을 구현하고자 한다.

이를 토글(Toggle)이라고 한다. 토글 기능 구현에 핵심은 바로 if와 else 문법이다.

15. 비교 연산자와 불리언

비교 연산자는 좌항의 값과 우항의 값을 비교하여 true나 false를 반환한다. 여기서 true와 false를 불리언(Boolean)이라고 한다.

동등 연산자 ===

좌항의 값과 우항의 값이 같다.

<h1>Comparison operator & Boolean</h1>
<h2>===</h2>
<h3>1 === 1</h3>
<script>
	document.write(1 === 1);
</script>
<h3>1 === 2</h3>
<script>
	document.write(1 === 2);
</script>

비교 연산자 < (&lt;)

좌항의 값이 우항의 값보다 작다.

<h1>Comparison operator & Boolean</h1>
<h2>&lt;</h2>
<h3>1 &lt 1</h3>
<script>
	document.write(1 < 1);
</script>
<h3>1 &lt 2</h3>
<script>
	document.write(1 < 2);
</script>

16. 조건문

그렇다면 비교 연산자와 불리언은 어디에 쓰일까? 바로 조건문에 사용된다. 조건문의 기본 구조는 다음과 같다.

if (condition) {
	statement_1
}
else {
	statement_2
}

condition에는 불리언 타입이 온다.
만약 condition이 true라면 statement_1이 실행된다.
반대로 false라면 statement_2가 실행된다.

17. 조건문의 활용

다시 돌아와 night 버튼과 day 버튼을 하나로 통일해보자. 전체적인 구조는 다음과 같다.

<input id="night_day" type="button" value="night" onclick="
if (value 값이 'night') {
	야간 모드
} else {
	주간 모드
}
">

해당 버튼의 value 값을 찾는 코드는 다음과 같다.

document.querySelector('#night_day').value

이를 이용해 코드를 작성해보면 다음과 같다.

<input id="night_day" type="button" value="night" onclick="
if (document.querySelector('#night_day').value === 'night') {
	document.querySelector('body').style.backgroundColor = 'black';
    document.querySelector('body').style.color = 'white';
} else {
	document.querySelector('body').style.backgroundColor = 'white';
    document.querySelector('body').style.color = 'black';
}
">

위 코드의 문제는 처음 버튼을 누르면 value 값이 night이기 때문에 야간 모드로 설정이 된다. 이 상황에서 다시 버튼을 누르면 여전히 value 값이 night이기 때문에, 주간 모드로 설정되지 않는다.
따라서 버튼 클릭 시 value 값도 변경해야 한다.

<input id="night_day" type="button" value="night" onclick="
if (document.querySelector('#night_day').value === 'night') {
	document.querySelector('body').style.backgroundColor = 'black';
    document.querySelector('body').style.color = 'white';
    document.querySelector('#night_day').value = 'day';
} else {
	document.querySelector('body').style.backgroundColor = 'white';
    document.querySelector('body').style.color = 'black';
    document.querySelector('#night_day').value = 'night';
}
">

18. 리팩토링 중복의 제거

리팩토링이란 코드 자체를 효율적으로 만들어, 가독성을 높이거나 유지보수를 편리하게 하고 중복된 코드를 제거하는 등의 방향으로 코드를 개선하는 작업을 말한다.

위의 버튼을 여러 개 만든다고 생각해보자. 이 경우 제대로 작동하기 위해서 각 버튼의 id 값을 매번 다 바꾸어 주어야 하기 때문에 번거롭다.

<input id="night_day_2" type="button" value="night" onclick="
if (document.querySelector('#night_day_2').value === 'night') {
	document.querySelector('body').style.backgroundColor = 'black';
    document.querySelector('body').style.color = 'white';
    document.querySelector('#night_day_2').value = 'day';
} else {
	document.querySelector('body').style.backgroundColor = 'white';
    document.querySelector('body').style.color = 'black';
    document.querySelector('#night_day_2').value = 'night';
}
">

night_day_2 값을 매번 입력해야 한다는 것은 굉장히 번거로운 일이다.
이럴때 onclick과 같은 이벤트에서 코드가 속해있는 태그를 가리키도록 약속되어 있는 키워드가 있다. 바로 this이다.

<input type="button" value="night" onclick="
if (this.value === 'night') {
	document.querySelector('body').style.backgroundColor = 'black';
    document.querySelector('body').style.color = 'white';
    this.value = 'day';
} else {
	document.querySelector('body').style.backgroundColor = 'white';
    document.querySelector('body').style.color = 'black';
    this.value = 'night';
}
">

this 키워드를 사용하면 id 값이 필요하지 않다.

this 키워드를 통해 리팩토링 하였지만 여전히 중복되는 부분이 존재한다. 바로 document.querySelector('body')이다. 이 중복되는 부분을 변수로 선언함으로써 제거할 수 있다.

<input type="button" value="night" onclick="
var target = document.querySelector('body');
if (this.value === 'night') {
	target.style.backgroundColor = 'black';
    target.style.color = 'white';
    this.value = 'day';
} else {
	target.style.backgroundColor = 'white';
    target.style.color = 'black';
    this.value = 'night';
}
">

중복 제거는 코딩의 기술에 있어서 핵심이다.

19. 반복문 예고

주간 모드와 야간 모드에 따라 <a> 태그 문구들의 색을 바꾸고 싶다. 이때 사용하는 문법이 바로 반복문이다.

20. 배열

프로그래밍을 하다보면 굉장히 많은 데이터들을 다루게 된다. 데이터가 많아짐에 따라 소프트웨어는 너무 복잡해지기 때문에 감당할 수 없는 수준에 이르게 된다. 이에 연관된 데이터를 잘 정리정돈하여 담아 두는 일종의 수납 상자를 배열(Array)이라고 한다.

배열의 기본 특징으로는 다음과 같다.

  1. 배열은 대괄호로 시작해서 대괄호로 끝난다. 배열 안에는 여러 개의 값을 넣을 수 있으며 그 값들은 콤마(,)로 구분한다.
  2. 배열의 값을 가져오는 방법은 인덱스로, 0부터 시작한다.
  3. 배열에 값을 추가하는 방법은 array.push();이다.
  4. 배열에 있는 값들의 개수를 보는 방법은 array.length이다.

21. 반복문

반복문은 순서대로 실행되는 프로그램의 흐름을 제어하는 제어문이다. 반복문의 기본 구조는 다음과 같다.

while (condition) {
	statement_1
}
statement_2

condition에는 불리언 타입이 온다.
condition이 true인 동안 statement_1이 실행된다.
그러다 false가 되면 statement_2가 실행된다.

22. 배열과 반복문

<ul> 태그와 <li> 태그를 사용하여 수많은 목록을 작성한다고 생각해보자. 이를 위해서는 <ul> 태그와 <li> 태그를 무수히 많이 적어야 한다. 너무 비효율적이지 않은가?
따라서 내용을 배열에 담고, 반복문을 이용하여 배열에서 원소를 가져오는 방법을 사용한다.

사람 4명 'egoing', 'leezche', 'duru', 'taeho'를 목록으로 만들어보자. 우선 배열에 담는다.

var coworkers = ['egoing', 'leezche', 'duru', 'taeho'];

변수 i를 도입하여 i < 4라는 조건을 사용한다.

var i = 0;
while (i < 4) {
	i = i + 1;
}

변수 i를 이용하여 배열의 인덱싱을 사용하면 다음과 같다.

<h1>Loop & Array</h1>
        
<h2>Co workers</h2>
<script>
	var coworkers = ['egoing', 'leezche', 'duru', 'taeho'];
</script>
<ul>
	<script>
		var i  = 0;
        while (i < 4) {
        document.write('<li>' + coworkers[i] + '</li>');
        i = i + 1;
        }
    </script>
</ul>

HTML과 JavaScript 문법

document.write('<li>' + coworkers[i] + '</li>')의 문법을 추측해보자.
<li> 태그는 HTML 언어이고 coworkers[i]는 JavaScript 언어이다. 해당 코드는 JavaScript 언어이기 때문에 HTML 언어만 따옴표로 묶은 것이 아닌가 싶다.

해당 코드의 문제는 배열 coworkers의 원소가 추가되거나 삭제된다면 제대로 작동하지 않는다는 것이다. 데이터가 바뀌었다고 해서 코드의 로직까지 바꾸는 것은 굉장히 좋지 않은 작업이다. 조건을 데이터에 맞게 수정한다면 유연한 코드가 완성된다.

<ul>
	<script>
		var i  = 0;
        while (i < coworkers.length) {
        document.write('<li>' + coworkers[i] + '</li>');
        i = i + 1;
        }
    </script>
</ul>

23. 배열과 반복문의 활용

배열과 반복문을 이용하여 3.html에 활용해보자. 링크들이 주간 모드일 때는 어둡게, 야간 모드일 때는 밝게 표시되도록 해보자.

우선 querySelector를 이용하여 웹페이지에 있는 <a> 태그를 가져와보자.

document.querySelector('a');

위 코드는 웹페이지에 있는 <a> 태그 중 맨 처음으로 등장하는 태그만 가져온다.
모든 태그를 가져오기 위해서는 querySelectorAll을 입력한다.

document.querySelectorAll('a');

querySelectorAll은 웹페이지에 있는 모든 <a> 태그를 가져올 뿐만 아니라 배열에 담겨 나온다. 따라서 배열에 관한 문법을 활용할 수 있다.

이를 활용하여 배열에 담겨있는 <a> 태그를 반복문과 인덱싱을 이용하여 하나씩 가져오고, 가져온 태그의 style 속성을 수정해보자.

var alist = document.querySelectorAll('a');
var i = 0;
while (i < alist.length) {
	alist[i].style.color = 'powderblue';
    i = i + 1;
}

컴퓨터는 자주 서로 연관된 데이터를 배열의 형태로 반환한다. 따라서 배열을 적극적으로 활용하자.

24. 함수 예고

코드가 길어지고 많아지면 그에 따른 복잡도 역시 증가한다. 이에 코드를 정리정돈할 도구의 필요성이 생기는데, 그 도구 중 하나가 바로 함수이다.

함수보다 상위의 도구는 객체.

3.html을 보자. 버튼이 여러 개인 경우, 그 개수에 비례하여 코드가 길어질 것이며 복잡도 역시 증가할 것이다. 따라서 함수로 코드를 묶어서 간단하게 처리할 수 있다. 함수를 선언하는 방법은 다음과 같다.

function name() {
}

버튼의 기능을 하는 NightDayHandler 함수를 선언해보자.

<script>
	function NightDayHandler(self) {
        var target = document.querySelector('body');
        var alist = document.querySelectorAll('a');
        var i = 0;
        if (self.value === 'night') {
            target.style.backgroundColor = 'black';
            target.style.color = 'white';
            self.value = 'day';

            while (i < alist.length) {
            alist[i].style.color = 'powderblue';
            i = i + 1;
            }
        } else {
            target.style.backgroundColor = 'white';
            target.style.color = 'black';
            self.value = 'night';

            while (i < alist.length) {
            alist[i].style.color = 'blue';
            i = i + 1;
            }
        }
    }
</script>

함수 선언을 통해 버튼이 여러 개가 있다 하더라도 코드는 간결해진다.

즉, 함수 선언을 하면

  1. 반복되는 수정 작업 없이 함수를 한 번만 수정하면 되므로, 유지보수가 극단적으로 좋아진다.
  2. 중복되는 코드를 줄임으로써 코드가 간결해지고 웹페이지의 크기가 극단적으로 줄어든다.
  3. 반복되는 코드가 똑같은 로직을 갖고 있다는 것을 확신하게 된다.
  4. 함수 이름을 통해 코드의 정체를 분명하게 이해할 수 있다.

25. 함수

중복을 피하기 위해 사용했던 방법 중 하나가 반복문이었다. 하지만 다음 코드와 같이 반복문으로는 분명 한계가 존재하는 순간이 온다.

<ul>
	<script>
    	document.write('<li>1</li>');
        document.write('<li>2-1</li>');
        document.write('<li>2-2</li>');
        document.write('<li>3</li>');
        document.write('<li>2-1</li>');
        document.write('<li>2-2</li>');
    </script>
</ul>

이럴 경우 two 함수를 선언하면 중복을 쉽게 피할 수 있다.

<script>
	function two() {
    	document.write('<li>2-1</li>');
        document.write('<li>2-2</li>');
</script>
<ul>
	<script>
    	document.write('<li>1</li>');
        two();
        document.write('<li>3</li>');
		two();
    </script>
</ul>

26. 함수: 매개변수와 인수

함수라는 것은 입력과 출력으로 이루어져있다.
입력 : 매개변수(Parameter) 또는 인자(Argument)
출력 : 반환(Return)

여태까지의 함수는 입력값 없이 작동하는 경우였다. 만약 입력값이 필요한 경우는 어떻게 해야할까? 입력값으로 사용하는 변수를 함수명 뒤 괄호에 넣어준다.

<script>
	function sum(left, right) {
	    document.write(left + right + '<br>');
    }
    
    sum(2, 3);  // 5
    sum(3, 4);  // 7
</script>

이처럼 함수를 선언할 때에 사용되는 변수를 매개변수(Parameter)라 하고, 함수로 전달하는 값을 인수(Argument)라고 한다.

매개변수 : left, right
인자 : 1, 2

27. 함수: 리턴

sum 함수는 document.write()로 실행하였다. 이번에는 결과값을 반환해보자.
return을 이용하여 계산한 결과를 표현식으로 나타내보자.

<script>
	function sum2(left, right) {
		return left + right;
	}
</script>

return를 이용하면 함수를 다양한 맥락에서 활용할 수 있는 자유도가 주어진다.

<script>
	document.write(sum2(2, 3) + '<br>');
	document.write('<div style="color: red;">' + sum2(2, 3) + '</div>');
	document.write('<div style="font-size: 3rem;">' + sum2(2, 3) + '</div>');
</script>

28. 함수의 활용

본격적으로 3.html을 리팩토링 해보자.
우선 버튼에 대한 코드를 그대로 NightDayHandler 함수로 선언한다.

<script>
    function NightDayHandler() {
        var target = document.querySelector('body');
        var alist = document.querySelectorAll('a');
        var i = 0;
        if (this.value === 'night') {
            target.style.backgroundColor = 'black';
            target.style.color = 'white';
            this.value = 'day';

            while (i < alist.length) {
            alist[i].style.color = 'powderblue';
            i = i + 1;
            }
        } else {
            target.style.backgroundColor = 'white';
            target.style.color = 'black';
            this.value = 'night';

            while (i < alist.length) {
            alist[i].style.color = 'blue';
            i = i + 1;
            }
        }
    }
</script>

...

<script>
	<input type="button" value="night" onclick="NightDayHandler();">
</script>

이렇게 그대로 함수를 선언하게 되면 올바르게 작동하지 않는다. 함수 선언에 사용된 this 변수는 전역 객체가 되어 웹브라우저의 윈도우를 가리키기 때문이다.

따라서 NightDayHandler 함수의 매개변수를 self, 인자를 this로 지정하면 올바르게 웹브라우저의 윈도우가 아닌 <input> 태그를 가리키게 된다.

<script>
    function NightDayHandler(self) {
        var target = document.querySelector('body');
        var alist = document.querySelectorAll('a');
        var i = 0;
        if (self.value === 'night') {
            target.style.backgroundColor = 'black';
            target.style.color = 'white';
            self.value = 'day';

            while (i < alist.length) {
            alist[i].style.color = 'powderblue';
            i = i + 1;
            }
        } else {
            target.style.backgroundColor = 'white';
            target.style.color = 'black';
            self.value = 'night';

            while (i < alist.length) {
            alist[i].style.color = 'blue';
            i = i + 1;
            }
        }
    }
</script>

...

<script>
	<input type="button" value="night" onclick="NightDayHandler(this);">
</script>

29. 객체 예고

객체(Object)는 정리정돈의 수단 중 하나이다. 서로 연관된 함수와 서로 연관된 변수를 같은 이름으로 그룹핑하여 정리정돈하기 위한 도구라 할 수 있다.

3.html을 보면 해당 코드가 중복됨을 알 수 있다.

while (i < alist.length) {
	alist[i].style.color = 'powderblue';
    i = i + 1;
}

매개변수 color를 갖는 함수 setColor로 독립시켜 중복을 피할 수 있다. 이때 변수 alist와 i 선언에 주의하여 코드를 수정한다.

<script>
    function setColor(color) {
        var alist = document.querySelectorAll('a');
        var i = 0;
        while (i < alist.length) {
            alist[i].style.color = color;
            i = i + 1;
        }
    }
</script>

또한 target.style.backgroundColor와 target.style.color 코드 역시 중복됨을 알 수 있다.

중복으로 보기에는 코드가 비교적 간단하고 명확한 구조이지만, 다른 경우에 의미가 불명확하거나 의미를 파악하기 어려울 때는 함수를 통해 로직에 이름을 부여하는 것은 좋은 전략이다.

함수명에 유의하여 이전에 선언했던 setColor 함수명을 LinksSetColor로 수정하고, 추가로 BodySetBackgroundColor 함수와 BodySetColor 함수를 선언한다.

<script>
    function LinksSetColor(color) {
        var alist = document.querySelectorAll('a');
        var i = 0;
        while (i < alist.length) {
            alist[i].style.color = color;
            i = i + 1;
        }
    }
    function BodySetBackgroundColor(color) {
    	document.querySelector('body').style.backgroundColor = color;
    }
    function BodySetColor(color) {
    	document.querySelector('body').style.color = color;
    }
</script>

이처럼 함수명에 유의하여 선언하다 보면 함수명이 점점 길어지게 되는 일이 발생한다. 이런 경우에 객체를 도입하면 보다 코드가 직관적이고 간결해질 수 있다.

30. 객체 쓰기와 읽기

배열은 정보를 순서대로 저장한다.
그렇다면 순서 없이 정보를 저장할 수 있는 것도 있지 않을까? 그것이 바로 객체이다.

대괄호로 선언하는 배열과 달리 객체는 중괄호로 선언한다. 다음과 같이 객체 coworkers를 선언한다.

<script>
    var coworkers = {
        'programmer': 'egoing',
        'designer': 'leezche'
    };
</script>

객체 안에 있는 정보에 접근하기 위해서는 .을 사용하는데, 이를 Object Access Operator라고 한다.

<script>
	document.write('programmer: ' + coworkers.programmer + '<br>');
    document.write('designer: ' + coworkers.designer + '<br>');
</script>

객체에 정보를 추가하기 위해서는 .을 사용하여 추가할 수 있다.

<script>
	coworkers.bookkeeper = 'duru';
    document.write('bookkeeper: ' + coworkers.bookkeeper + '<br>');
</script>

만약 정보명에 띄어쓰기가 있다면 위의 방법으로는 불가능하다. 이때에는 배열과 같이 대괄호를 사용하여 추가한다.

<script>
	coworkers['data scientist'] = 'taeho';
	document.write('data scientist: ' + coworkers['data scientist'] + '<br>');
</script>

31. 객체과 반복문

객체에 있는 모든 데이터를 가져와야 하는 경우 배열과 마찬가지로 반복문을 사용한다. for .. in 반복문을 사용한다.

for (var key in yourobject) {
	statement
}

yourobject 객체에서 key 값들을 가져온 뒤 statement를 실행한다는 뜻이다.

<script>
	for (var key in coworkers) {
    	document.write(key + ': ' + coworkers[key] + '<br>');
    }
</script>

객체는 순서를 보장하지 않는다.

32. 객체 프로퍼티와 메소드

객체에는 어떠한 데이터도 담을 수 있다. 함수 역시 가능하다. coworkers 객체에 showAll이라는 메소드를 추가하는 방법은 다음과 같다.

<script>
    coworkers.showAll = function () {
        statement
    }
</script>

다음 코드와 같은 뜻이다.

<script>
	function showAll() {
    	statement
    }
</script>
<script>
    coworkers.showAll = function () {
        for (var key in coworkers) {
            document.write(key + ': ' + coworkers[key] + '<br>');
        }
    }
</script>

만약 coworkers 객체의 내용이 수정된다면 해당 메소드에는 오류가 발생할 수도 있다. 따라서 함수가 소속되어 있는 객체를 의미하는 this를 사용한다.

<script>
    coworkers.showAll = function () {
        for (var key in this) {
            document.write(key + ': ' + this[key] + '<br>');
        }
    }
</script>

객체(coworkers)에 소속된 함수(showAll) : 메소드(Method)
객체(coworkers)에 소속된 변수(programmer, designer, bookkeeper, data scientist) : 프로퍼티(Property)

33. 객체의 활용

다시 돌아와 3.html에서 객체를 활용해보자. 다양한 종류의 함수와 함수명을 객체를 활용하여 연관된 함수와 변수끼리 그루핑하고자 한다.

Links 객체를 만들고, LinksSetColor 함수를 다음과 같이 메소드로 만든다.

<script>
	var Links = {
    	setColor: function (color) {
        	var alist = document.querySelectorAll('a');
            var i = 0;
            while (i < alist.length) {
            	alist[i].style.color = color;
                i = i + 1;
            }
        }
    }
</script>

또한 Body 객체를 만들고, BodySetBackgroundColor 함수와 BodySetColor 함수를 다음과 같이 메소드로 만든다.

<script>
    var Body = {
    	setBackgroundColor: function (color) {
        	document.querySelector('body').style.backgroundColor = color;
        },
        setColor: function (color) {
        	document.querySelector('body').style.color = color;
        }
    }
</script>

34. 파일을 쪼개서 정리 정돈하기

객체보다 더 큰 정리정돈의 도구, 어떻게 보면 가장 큰 정리정돈의 도구를 알아보자. 바로 서로 연관된 코드들을 파일로 묶어서 그루핑하는 것이다.

이제 3.html에서 만들었던 버튼 코드를 index.html과 1.html, 2.html에도 복사하자.

<input type="button" value="night" onclick="NightDayHandler(this);">

JavaScript 코드는 복사하지 않았기 때문에 당연히 작동하지 않을 것이다.

이를 해결하기 위해서 JavaScript 코드를 복사해도 되지만, 이는 중복의 발생이다. 또한 코드를 수정하고 싶을 때 복사한 코드의 수만큼 수정의 작업을 거쳐야한다.

따라서 파일로 쪼갠다. <script> 태그 내부에 있는 코드를 별도의 파일 color.js로 저장한다.

그리고 index.html, 1.html, 2.html 그리고 3.html에 다음 코드를 작성한다.

<script src="color.js"></script>

코드를 수정하고 싶을 때 color.js 파일만 수정하여도 된다.

캐시(Cache)

WEB2 - CSS와 같이 네트워크 측면에서 경제적이다.

한 번 color.js 파일을 다운로드 받으면 캐시에 저장되기 때문에, 이 파일은 수정되기 전까지 네트워크를 사용하지 않고 다운로드를 받을 수 있다.

35. 라이브러리와 프레임워크

직접 소프트웨어를 만들 수 있을 뿐만 아니라 다른 사람의 도움을 받아서 소프트웨어를 만들 수 있다.

라이브러리(Library)란 만들고자 하는 프로그램에 필요한 부품이 되는 소프트웨어를 잘 정리정돈 하여 재사용하기 쉽도록 한 소프트웨어를 말한다.

프레임워크(Framework)란 만들고자 하는 것이 무엇이냐에 따라서 목적과 의도에 따른 공통적인 부분을 말한다.

라이브러리는 당겨 와서 쓰는 느낌.
프레임워크는 안에서 우리가 작업하는 느낌.

JavaScript에서 가장 유명한 라이브러리는 jQuery이다. jQuery 적용법은 다음과 같다.

  1. Download jQuery에 접속하여 다운로드한다.
  2. 소스코드를 데스크탑에 저장한다.
  3. 저장한 소스코드를 프로젝트 폴더에 이동한다.

더 간편한 방법으로는 CDN을 이용한다.

  1. Download jQuery에서 Google CDN에 접속한다.
  2. jQuery에 해당하는 코드를 복사하여 프로젝트 파일에 붙여넣는다.
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

jQuery를 직접 이용하여 color.js의 Links 객체를 수정해보자. jQuery를 이용하면 반복문을 쉽게 제어할 수 있다.

setColor: function (color) {
	var alist = document.querySelectorAll('a');
    var i = 0;
    while (i < alist.length) {
    	alist[i].style.color = color;
        i = i + 1;
    }
}

위의 8줄짜리 긴 코드를 간단하게 수정할 수 있다.
jQuery는 $로 시작한다. 우선 <a> 태그를 제어한다.

$('a')

CSS의 color 값을 변경하기 위해서는 다음과 같이 작성한다.

$('a').css('color', color);

이렇게 짧은 한 줄의 코드가 위의 setColor 함수와 동일한 기능을 한다.

같은 방법으로 Body 객체도 수정할 수 있다.

var Body = {
    setBackgroundColor: function (color) {
    	$('body').css('backgroundColor', color);
    },
    setColor: function (color) {
    	$('body').css('color', color);
    }
}

36. UI vs API

사용자가 시스템을 제어하기 위해서 사용하는 조작 장치를 UI(User Interface)라고 한다.

애플리케이션을 만들기 위해 프로그래밍을 할 때 사용하는 조작 장치를 API(Application Programming Interface)라고 한다.

37. 수업을 마치며

document : 웹페이지에 있는 태그를 삭제하거나, 태그에 자식 태그를 추가.
확장된 개념으로 DOM.

window : 웹페이지가 아닌 웹브라우저 자체를 제어.

ajax : 웹페이지를 리로드하지 않고 정보를 변경.

coockie : 웹페이지가 리로드되어도 현재 상태를 유지.

offline web application : 인터넷이 끊겨도 동작하는 웹페이지 동작.

webRTC : 화상 통신앱.

speech로 시작하는 API : 사용자의 음성을 인식하고 음성으로 정보를 전달.

webGL : 3차원 그래픽.

webVR : 가상현실.

profile
이슬비
이전 포스트

WEB2 - CSS

0개의 댓글