[지오의 개발 공부] 7일차. 자바스크립트 공부 시작: 블로그 야간, 주간 모드 만들기

오늘은 생활 코딩에서 자바스크립트 공부를 시작했습니다. 자바스크립트는 강의를 한 번 들은적이 있어서, 아주 기초 부분은 스킵하며 넘어갔는데요. 야간 모드, 주간 모드 전환 버튼을 만들어 봤는데 이게 왜 전부다 바뀌질 않고, 일부만 바뀌는 건지 당췌 모르겠어요. 

 

물론, 특정 css 영향을 받는 건 분명히 알겠는데 해당 클라스의 서식을 변경하려 지정을 해줘도 반응이 없더군요. 일례로 h2 태그가 현재 변경이 안되고 있는데요. 분명 제대로 지정을 해줬는데, 첫번째 h2만 변경시키고 나머진 스크립트가 들어가지 못하더라고요. 본문 안의 전체 h2 태그를 찾아서 모두 바뀔 때까지 스크립트를 반복해야 하는 걸까요? 그러긴엔 또 너무 무거운 버튼이 되고 말 거 같아서 우선은 보류해 뒀습니다.

 

오늘도 공부를 포기할 뻔 했어요. 점차 머리를 써야 하는 자바스크립트에 왔으니 말예요. 하지만 조금 더 힘을 내 가보겠어요. 매번 이쯤에서 포기하곤 했으니까요. 허헛. 자바스크립트 강의 듣고 스킨 개발도 얼른 해야죠. 지금은 제 블로그에 들러주시는 분이 거의 한 분도 없다시피 하지만, 나중엔 이웃님들에게 멋진 스킨을 선물로 드릴거여요. 후훗.

 

p.s. 위에 적은 말이 맞았네요. 이 글을 쓰고 구글링을 왕창 해 본 결과 `h2` 태그를 모두 받아서 반복문을 돌려야 했군요. 우선은 부족하게나마 만든 코드를 공유해봅니다. 

<input type="button" id="night_day" style="float: right" value="야간모드(개발중)" onclick="
	if(this.value === '야간모드(개발중)'){
		document.querySelector('body').style.backgroundColor='black';
		document.querySelector('body').style.color='white';			
		document.querySelector('title').style.color='white';													 var x, i;
			x = document.querySelectorAll('h1, h2, h3, h4, h5')
			for (i = 0; i < x.length; i++) {
      	    x[i].style.color = 'white';
			} var y, j;																																	  	y = document.querySelectorAll('button')
			  for (j = 0; j < y.length; j++) {
      	      y[j].style.color = 'white';
	          }	this.value='주간모드(개발중)';			
	} else {
		document.querySelector('body').style.backgroundColor='white';
		document.querySelector('body').style.color='rgb(51, 51, 51)';
		this.value='야간모드(개발중)';																																						 }
">