TIL2 - 자바스크립트 입문

(아래는 전부 2022.02.15에 학습한 내용입니다.)

오늘 공부한 것은 자바스크립트에서 쓰이는 중요한 기능들이었다. 위 사진에서 알 수 있듯, 크게 조건문, 반복문과 배열, 함수로 구성되어 있다. 학습 시간은 약 4시간 정도였다.

No.1 - 조건문

조건문에서 중요한 것은 비교 연산자와 블리언(Boolean)이다.

• 비교 연산자 : 기호의 오른쪽과 왼쪽에 적힌 값을 비교하여 결과를 확인한다. 예시로, ===와 < 등이 존재한다.
• 블리언(Boolean) : 비교 연산자로 도출된 결과(true or false)를 통칭한다.

<script>
     document.write(1===2);
</script>
.
<script>
     document.write(1<2);
</script>

위의 형식은 아래와 같은 블리언을 출력한다.

1은 2가 될 수 없기 때문에 1===2의 블리언은 false를 출력하고, 2는 1보다 크기 때문에 1<2는 블리언으로 ture를 출력하게 되는 것이다.

이제, 본격적으로 조건문에 대해 알아보자. IF 태그가 블리언 값을 확인하는 기능을 가지고 있기 때문에 해당 태그를 통해 조건문을 작성한다.

<script>
	document.write("1<br>")
	if(true){
		document.write("2<br>")
	}   else {
		document.write("3<br>")
	}
		document.write("4<br>")
</script>

위와 같이 조건문을 작성하면, 아래와 같이 출력된다.

이처럼, 블리언 값을 직접 지정할 경우 해당 값으로 항상 유지되기 때문에 "3"이 출력되지 않는다.

이를 활용하여 웹사이트 화면을 주간모드 또는 야간모드로 바꾸는 코드를 작성해보자.

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

이렇게 코드를 작성하면, 번거롭게 두 개의 버튼을 만들지 않고도 하나의 버튼으로 주간모드와 야간모드를 오갈 수 있게 된다. 아래는 위의 코드가 적용된 예시이다.

하지만, 우리는 여기서 한 번 더 생각해 보아야 한다. 이러한 방식으로 코드를 짜는 것은 글자수가 엄청나게 늘릴 뿐더러, 코딩하는 페이지 전체를 복잡하게 만든다. 때문에 우리는 코딩 중간마다 리팩토링을 통해 중복된 부분을 제거할 필요성이 있다.

아래는 변수를 지정하는 var 태그를 이용해 리팩토링한 예시이다. 리팩토링을 하더라도 이전과 똑같은 역할을 하기 때문에 추가적인 이미지 자료는 넣지 않았다.

<input type="button" value="night" onclick="
	var target=document.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';
	}
">

var 태그로 document.body를 target으로 지정한 뒤, document.body가 기입되어 있던 모든 자리를 target으로 대체한다. 또한, document.querySelector('#nightday')는 해당 코드를 지정하기 위해 임의로 생성한 id임으로, 똑같은 기능을 하는 this라는 키워드로 대체했다.
이런 식으로 각종 태그와 키워드를 활용하면 코딩을 훨씬 깔끔하고 보기 편하게 만들 수 있다.

No.2 - 반복문과 배열

두번째는 위에서 살짝 알아본 배열과 배열을 이용해 만드는 반복문에 대한 내용이다.

• 배열 : [ ]안에 데이터를 묶어놓고 사용하는 것. 오늘 배운 것을 기준으로 보면, var 태그로 배열을 변수로 지정하여 사용했다. 추가적인 태그를 이용하여 배열을 추가 또는 제거하거나 출력할 수 있다.
  아래는 배열을 변수로 지정하고 출력하는 방법을 담았다.

<script>
	var name=["text", "text2"];
</script>
<script>
	document.write(text[0]);
	document.write(text[1]);
</script>

이렇게 작성할 경우 아래와 같이 출력된다.

• 반복문 : var 태그로 변수를 지정하고, while 태그를 통해 블리언 값이 ture 또는 false가 될 때까지 코드를 반복 실행시킨다.
  아래는 반복문의 예시와 출력되는 방식이다.

  <script>
  	var i=0;
  	while(i<3) {
  		document.write('<li>mama</li>');
  		i=i+1;
  	}
  </script>

i 값이 0으로 지정된 후, 반복문에 들어선다. 처음에는 i가 0이기 때문에 true로 지정되어 리스트 'mama'를 출력한다. 이후 i는 i=i+1에 의해 값이 1 증가한다. 이는 연산자가 i가 3이 되어 i<3을 false로 판단하기 전까지 반복된다. 따라서, 리스트 'mama'가 세 번 출력되고 멈추는 것이다.

• 배열 + 반복문 : 배열을 지정한 뒤 반복문이 블리언을 판단할 때 지정된 배열을 사용하는 방식이다.
  아래는 예시와 출력되는 방식이다.

  <script>
  	var number=['1','2','3','4','5'];
  </script>
  <script>
  	var i=0;
  	while(i<number.length) {
  		document.write('<li>'+number[i]+'</li>');
  		i=i+1;
  	}
  <script>

이처럼 다섯 개의 데이터를 묶은 배열을 number라는 이름을 가진 변수로 지정하고, i를 수 변수로 지정하고 나면, 반복문의 블리언을 판단하는 소괄호 안에 i가 number의 배열 속 데이터의 개수와 값이 같아지면 블리언이 false로 바뀌며 반복문이 멈추는 식이다. 블리언이 ture인 동안에는 number의 i번째 데이터를 리스트 형식으로 출력하게 된다. number 변수가 다섯 개의 데이터를 가지고 있기 때문에 출력되는 것도 다섯 개이다.

출력 방식을 이런 식으로 지정하면 링크를 걸 수도 있다.

('<li><a href="https://a.com/+number[i]">' + number[i]+'</li>');

• 배열과 반복문 활용
  앞서 만들었던 주야간모드 버튼에 배열과 반복문을 사용하여 특수한 기능을 추가해 보자.

<input type="button" value="night" onclick="
	var target=document.body;
	if (this.value==='night')  {
		target.style.backgroundColor='black';
		target.style.color='white';
		this.value='day';
		var alist=document.querySelectorAll('a');
		var i=0;
		while(i<alist.length){
			alist[i].style.color='powderblue';
			i=i+1;
		}
	} else {
		target.style.backgroundColor='white';
		target.style.color='black';
		this.value='night';
		var alist=document.querySelectorAll('a');
		var i=0;
		while(i<alist.length){
			alist[i].style.color='blue';
			i=i+1;
		}
	}
">

모든 a 태그를 지정하는 document.querySelectorAll('a')를 alist라는 변수로 지정하면, 지정된 a 태그가 alist 변수의 배열의 데이터로 정리된다. 이를 이용해 주야간모드 변경 버튼을 누르면 a 태그가 적용된 코드들이 출력될 때 나타나는 색을 지정할 수 있게 된다.

... 하지만, 우리는 다시 문제에 봉착하게 된다. 저 코드 역시 길쭉한 코드가 반복되고 있기 때문에, 우리는 이것을 정리할 필요가 있다.
아래, 함수 학습을 하면서 한 번 코드를 정리해 보자.

No.3 - 함수

함수는 기본적으로 function a( ) { }의 형식으로 사용된다.

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

이처럼 함수로 지정한 코드는 함수명을 입력하기만 해도 바로 출력되는 것을 알 수 있다.
함수에는 입력하는 매개변수와 인자, 출력하는 리턴이 존재한다.

• 매개변수와 인자 : 입력한 값에 따라 다른 값을 출력하게 해주는 것.

<script>
	function sum(left, right){
		document.write(left + right + '<br>');
	}
	function sum2(left, right){
		document.write('<div style="color:red">' + (left + right) + '</div><br>');
	}
	sum(2, 3);
	sum(3, 4);
	sum2(5, 5);
</script>

sum( ); 안에 2, 3이라는 인자를 추가하고, function sum( ) 안에 left, right라는 매개변수를 추가하면 인자의 값이 함수 안으로 매개되어 함수 내의 코드로 결과값을 출력하게 된다.
하지만, 결과값 출력에서 개별적으로 CSS를 적용할 경우 각 함수마다 이름을 달리 지정해주어야 하는 문제가 발생한다. 이는 리턴을 사용하여 해결할 수 있다.

• 리턴(출력)

<script>
	function sum3(left, right){
		return left + right;
	}
	document.write(sum3(2, 3) + '<br>');
	document.write('<div style="color:red">' + sum3(2, 3) + '</div>');
	document.write('<div style="font-size:30px">' + sum3(2, 3) + '</div>');
</script>

return을 통해 계산의 기능만 sum3가 담당하도록 하고, 출력함으로서 함수를 다양한 용도로 활용할 수 있도록 해준다.

마지막으로, 앞서 만들었던 주야간모드 변경 버튼의 코드를 리팩토링 해보자.

<head>
	<script>
		function nightDayHandler(self) {
			var target=document.body;
			if (self.value==='night')  {
				target.style.backgroundColor='black';
				target.style.color='white';
				self.value='day';
				var alist=document.querySelectorAll('a');
				var i=0;
				while(i<alist.length){
					alist[i].style.color='powderblue';
					i=i+1;
				}
			} else {
				target.style.backgroundColor='white';
				target.style.color='black';
				self.value='night';
				var alist=document.querySelectorAll('a');
				var i=0;
				while(i<alist.length){
					alist[i].style.color='blue';
					i=i+1;
				}
			}
		}
	</script>
</head>
<body>
	<input type="button" value="night" onclick="
		nightDayHandler(this);
	">
</body>

버튼을 구성하던 코드를 독립된 함수로 지정할 경우, this가 더 이상 버튼의 코드를 가리키지 않기 때문에 매개변수로 self를 지정한 후, this의 자리에 self를 대체하여 넣었다. 또한, 버튼 코드에 쓰인 함수 이름 내 인자를 this로 지정하여 버튼의 변화가 함수에 매개되어 작동되도록 했다.

이렇게 버튼의 변화로 기능을 나타내는 코드를 독립된 함수로 지정할 경우, 버튼의 변화로 작동하는 코드에 함수의 이름까지에 해당되는 짧은 코드만 넣어주면 웹사이트의 어느 곳이라도 버튼을 생성할 수 있게 된다.

No.4 - 소감

두번째 여정도 만만치 않았다. 그래도 이렇게 확실하게 정리하고 다시 한 번 보면 완전히 머릿속에 박아넣듯 입력되는 기분이 들었다. 오늘도 늦게까지 학습하고 정리글을 쓰게 되어 꽤 피곤하지만 굉장한 보람이 느껴진다. 평소에는 느낄 수 없었던 이 짜릿함, 성취감, 활짝 피어나는 신뢰, 그리고 드러나는 가능성까지. 힘들더라도 더 나아갈 이유가 생겼다. 앞으로 계속 비슷한 방식으로 공부하며 시간을 조절하는 방법을 배우고, 학습 속도도 늘려야겠다. 어느 정도 적응하고 나면 개인적인 여가 시간도 생기겠지. 오늘은 이걸로 만족한다. 내일도 쓸 내용이 가득하니까!