JAVA - Array & Loop

이번엔 벨로그 첫 커밋을 시도했다.
여기서 만든 것들은 모두 깃허브 페이지에 옮겨담을 예정이다.
일을 두번 하는 셈이지만, 이를 간소화할 방법을 검색해야겠다.
아무튼 본론으로 들어가서 오늘은, 자바스크립트의 배열문을 활용했다.

loop

반복문은 스크립트 태그를 통해 여러번의 작업을 단순화 시켜준다.

기본적으로 다음과 같은 코드를 실행시킨다면

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

결과 값은 리스트 형태로 1,2,3,2,3,2,3,4라는 형태가 나온다
i 값이 0에서 2까지 갈 동안 리스트 태그 2,3이 세번 반복하기 때문

이를 활용할 방법은 무궁무진하다.

array를 활용한 loop

여기서는 array를 활용해 loop를 적용시킨다

왜 이 방법을 사용해야하는지에 대해 고민해보자.
먼저,

<ul>
    <li>yoig</li>
    <li>egont</li>
    <li>duru</li>
    <li>minho</li>
    ~~
</ul>

만약 li 코드를 활용해 만들어야할 목록이 수 없이 많은데다,
매번 새로운 항목을 추가해야한다면?
이를 손으로 처리할 필요 없이, 코드로 처리 가능하다.

해당 식은 아래와 같다.

<script>
	var friend = ['young','seok','bin','jun']
  	var i = 0;
    while(i < friend.length){
		document.write('<li>+freind[i]+</li>')
        i = i + 1;
}
</script> 

이렇게 짜두면 friend라는 array에 무엇이든 추가해도,
새로운 리스트 형성이 가능하다.
왜냐면 friend.length 만큼 자동으로 리스트가 추가되기 때문이다.

예제 적용 모습

그렇다면 실제로 웹에서 작동시킨다면 어떤 모습일까?

먼저 만들어둔 웹 페이지에서 a태그가 조건문이 실행할 때 같이 동작하는 방식이다.

이 상태에서 a 태그를 먼저 끌어오는 연습을 해보자
inspect를 키고, '문서 내에 있는 모든 a태그를 불러오자'

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

이렇게 적용한다면, 아래와 같이 해당 페이지에 있는 모든 a태그를 불러온다.
참고로 console.log는 alist에 해당하는 결과 값을 보여주는 역할을 한다.
고로 console.log를 적용해야 아래와 같은 결과가 나온다.

여기서 해당 태그에 적용할 수 있는 alist[1]style.color='' 값을 추가해준다면,
'특정 조건에서 모든 a태그에 적용'되는 코드가 나온다.

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

이제 이 코드를 활용해 '조건문'에서 night를 눌렀을때
바디태그에 있는 글씨와 함께 a태그 또한 바뀌는 것을 확인할 수 있다.

현재 java로 만들어둔 다크모드는 아래와 같다.

  <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'

      var alist = document.querySelectorAll('a');
      var i = 0;
      while(i < alist.length ){
        alist[i].style.color = 'skyblue';
        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 ){![](https://media.vlpt.us/images/willy4202/post/5713de29-a335-4daa-a1c4-87eb839cebc0/image.png)
        i  = i + 1;
      }
    }
    ">