Javascript 제어문 : write함수, 비교 연산자, 조건문, 리팩토링, 배열, 반복문

KSH·2022년 1월 4일

Javascript로 웹 페이지에 문구 출력하기

--html--

<script>
  var a = "X";
  document.write("X<br>");
  document.write(a + "<br>");

이렇게 document.write를 사용하면 웹 페이지에 문구를 출력할 수 있다.

둘 다 X를 출력하고 줄바꿈한다.

💡 document.write("~") : 웹 페이지에 문구 출력 (프로그래밍 언어의 print문과 비슷)
이때 출력문구에 태그를 넣고 싶으면(줄바꿈 등) 따옴표로 묶어서 넣는다.
("<br>")

Javascript에서의 비교 연산자

A와 B가 같다는 비교 연산자는 "==="이다.

💡 파이썬에서는 등호 2개로 표현했었다.
Javascript에서 A==B 이렇게 쓰지 않도록 주의하자!

Javascript 조건문 활용 예제

EX) 기본 예제에서 버튼을 1개로 바꾸고 그 버튼의 이름이 night이면 주간모드 / 버튼 이름이 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';
">

💡 조건문 프로세스 : 버튼 선택 -> 버튼의 이름을 판단하는 조건 추가

1. 먼저 버튼을 선택하기 위해 버튼에 id를 준다.

<input id="night_day" type="button" value="night" onclick="

">

: document.querySelector('#night_day')를 하게 되면 id가 night_day인 버튼을 선택한다.

2. 버튼의 이름을 판단하기
: 버튼의 이름을 판단하려면 value함수로 버튼의 이름(value)을 호출한다.

document.querySelector('#night_day').value
: id가 night_day인 버튼 선택 후 그 버튼의 value를 가져온다. (night)

3. 조건문 작성

  <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.quertSelector('#night_day').value ='day';
  } else {
	document.querySelector('body').style.backgroundColor='White';
	document.querySelector('body').style.Color='black';
	document.quertSelector('#night_day').value ='night';
  }
 
">

👉 : 버튼의 이름(value)가 "night"라면 야간모드 / "day"라면 주간모드 실행

※주의할 점 : 한 번 실행되고 나면 버튼의 이름이 바뀌어야 한다.

document.quertSelector('#night_day').value ='night';
document.quertSelector('#night_day').value ='day';

추가하기!

Javascript 리팩토링(중복 제거)

리팩토링 : 코드의 가독성을 높이기 위해 코드를 개선하는 작업
리팩토링 방법 : this 사용 / 변수 선언

※ 위의 조건문 예제에서 리팩토링을 해보자!

  <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.quertSelector('#night_day').value ='day';
  } else {
      document.querySelector('body').style.backgroundColor='White';
      document.querySelector('body').style.Color='black';
      document.quertSelector('#night_day').value ='night';
  }
 
">

① this 사용
onclick 속성 안에 있는 document.querySelector('#night_day')는 결국 onclick 속성이 있는, 바로 위에 있는 input 태그를 가리키게 된다.
∴ document.querySelector('#night_day')를 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';
  }
 
">

💡 장점

바로 위에 있는 태그를 가리키기 때문에 억지로 태그에 id를 줄 필요가 없다.
id를 줄 필요가 없기 때문에 어느 곳에서 재사용을 하더라도 정상적으로 실행된다.
(id가 있을때 다른 곳에 재사용하게 되면 id를 가리키는 것은 id가 고유하기 때문에 재사용하더라도 처음 원본의 태그를 가리키게 되어서 재사용한 곳에서 제대로 실행되지 않는다!)

② 변수 선언
위에서 this를 사용해서 리팩토링을 하였지만 document.querySelector('body')가 4번이나 중복된다. 이것도 간단하게 위에 변수를 선언하여 변수를 재사용하면 된다.

<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';
  }
 
">

👉 : document.querySelector('body')를 target 변수로 선언하여
document.querySelector('body')가 나오는 곳마다 target 변수를 재사용한다.

💡 장점

target 변수를 쓴 곳에 body 태그가 아니라 다른 태그를 선택하고 싶을 때 target 변수를 선언하지 않았다면 일일이 하나씩 바꿔야 할 텐데 변수를 선언하여 선언한 부분의 body 태그만 교체하면 target 변수를 쓴 모든 코드가 바뀐다!!

Javascript 배열

: 파이썬의 리스트와 비슷하다!

변수에 배열을 저장하여 쓸 수 있다.
var coworkers = ["egoing", "leezche"];
배열 값의 개수를 세는 함수 length
coworkers.length : 2 출력
배열에 값 추가하는 함수 push (맨 뒤에 값 추가)
coworkers.push("추가할 값")
배열 값 제거하는 함수 pop (맨 뒤 값 제거)
coworkers.pop()

5. 배열 값 중간에 추가 or 제거하는 함수 splice
array.splice(start, deleteCount[, item1 [, item2[, ...]]]])

start : 배열의 변경을 시작할 index
deleteCount : 배열에서 제거할 개수 (start로 받은 index부터 순서대로 제거할 개수)
- deleteCount를 생략하면 start로 받은 index부터의 값을 모두 제거한다.
- deleteCount가 0 이하면 아무것도 제거하지 않는다 : 값 추가 시 사용
item : 배열에 추가할 값
반환 값 : 제거한 값을 담은 배열

① 값 추가

2번 인덱스부터 “drum”, “guitar” 추가

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2, 0, 'drum', 'guitar');

// myFish is ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"]
// removed is [], no elements removed

② 값 제거

2번 인덱스부터 2개 제거

var myFish = ['parrot', 'anemone', 'blue', 'trumpet', 'sturgeon'];
var removed = myFish.splice(2, 2);

// myFish is ["parrot", "anemone", "sturgeon"]
// removed is ["blue", "trumpet"]

2번 인덱스부터 모든 요소 제거

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2);

// myFish is ["angel", "clown"]
// removed is ["mandarin", "sturgeon"]

③ 값 추가 + 제거

2번 인덱스부터 1개 제거하고 "trumpet" 추가

var myFish = ['angel', 'clown', 'drum', 'sturgeon'];
var removed = myFish.splice(2, 1, 'trumpet');

// myFish is ["angel", "clown", "trumpet", "sturgeon"]
// removed is ["drum"]

Javascript 반복문

: While과 for 사용

① While
While(condition) {

}

condition : 조건

var n = 0;
var x = 0;
while (n < 3)          
  n++
  x += n;
}

         <br>

👉 : 반복할 때마다 n이 커지면서 n을 x에 더한다. 마지막 x = 6(1+2+3)

② for
for (initialization; condition; final-expression) {

}

initialization : 식 또는 변수 선언
condition : 조건
final-expression : 반복 후에 실행할 식 (주로 카운트 변수 증감)

for (var i = 0; i < 9; i++) {
   console.log(i);
   // 기타 등등
}

👉 : i가 0부터 9전까지 커지면서 출력된다.

Javascript 배열과 반복문 활용

기본 예제

<  <ul>
	<li>A</li>
	<li>B</li>
	<li>C</li>
	<li>D</li>
</ul>

html에서 이렇게 목록을 만드는데, 목록 수가 엄청 많고 li 태그가 아니라 복잡한 태그라면 수작업으로 할 수 없다.
따라서 Javascript에서 배열과 반복문을 활용하여 만든다.

<script>
	var array = ['A', 'B', 'C', 'D'];
</script>

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

👉 : 배열과 반복문을 사용하여 목록이 4개 생성된다.

※주의할 점

document.write('<li>array[i]<li>'); // 1
document.write('<li>' + array[i] + '<li>') // 2

2번처럼 li 태그를 따옴표로 분리해줘야한다.

2. 위의 메인 예제
: 야간모드일때는 link의 글자색이 powderblue로 표시되고 주간모드일때는 link의 글자색이 blue로 표시되게하기

<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';
	}
">
<a href = "~">WEB</a>;
<a href = "~">HTML</a>; 
<a href = "~">CSS</a>;
<a href = "~">Javascript</a>;

여기서 여러 요소 추가하기

link의 글자색을 변경하기 위해 링크를 가진 a 태그를 모두 선택해야한다.
: querySelectorAll 사용
document.querySelectorAll('a') : [a, a, a, a]로 출력한다!
var alist = document.querySelectorAll('a');
console.log(alist[0]);
alist[0]을 출력하게 되면 첫 번째로 나오는 a 태그를 선택하게 된다.

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

이 코드를 처음 예제 코드에 추가하면 된다.

최종 코드

<input type="button" value="night"powderblue";
					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 += 1;
			}
	}
">
<a href = "~">WEB</a>;
<a href = "~">HTML</a>; 
<a href = "~">CSS</a>;
<a href = "~">Javascript</a>;

KSH

성실히 살아가는 비전공자

이전 포스트

22.01.03 [6] TIL : JAVA - 기본 구조, 탈출문자, 데이터 변환(캐스팅), 데이터 타입 선언 / html/css - 부등호 표시

다음 포스트