옥수수와 식빵 그리고 코딩

23. 배열과 반복문의 활용 본문

2023/생활코딩

23. 배열과 반복문의 활용

옥식 2023. 9. 28. 15:51

검색은 진짜진짜 중요!!

ex) 이 문서 안에 <a>태그 개수 전체 몇개인지.. 알려면 

javascript get element by css selector multiple 이런 키워드로 검색해서

https://www.w3schools.com/jsref/met_document_queryselectorall.asp 이런 사이트에서 도움 받을 수 있음.

 

-꿀팁!-

  • 웹페이지에서 html열 때 esc키 누르면 console창 밑으로 열 수 있음
  • shift키 + enter하면 실행되지 않고 줄바꿈 됨

간단하다면 간단한건데 또! 또 안됬따!

그래서 30분동안 붙잡고 선생님의 코드와 내 코드를 하나하나 비교해가면서 하나씩 바꿀 때마다 새로고침을 한 결과 틀린 부분을 발결할 수 있었다.

 

문제가 되었던 부분은

 

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

여기.

else 구문 안쪽에 있어야하는데 저게 바깥쪽으로 빠졌는 바람에 코드가 제대로 동작되지 않았다.

혹시나 하는 마음에 줄맞춤을 하다 발결했다.

줄맞춤을 잘 하면 이런 실수를 예방하고 빨리 발견할 수 있으니 습관화 하도록 하자.

 

<!doctype html>
<html>
<head>
  <title>WEB1 - JavaScript</title>
  <meta charset="utf-8">
</head>
<body>
  <h1><a href="index.html">WEB</a></h1>
  <!-- <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 id="night_day" 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') ; //어두워지면 <a>태그 글자색 하늘색으로
      var i = 0;
      while (i<alist.length) {
          alist[i].style.color = 'powderblue';
          //console.log(alist[i]);
          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;
      }

    }

      
    ">
  <ol>
    <li><a href="1.html">HTML</a></li>
    <li><a href="2.html">CSS</a></li>
    <li><a href="3.html">JavaScript</a></li>
  </ol>
  <h2>JavaScript</h2>
  <p>
    JavaScript (/ˈdʒɑːvəˌskrɪpt/[6]), often abbreviated as JS, is a high-level, dynamic, weakly typed, prototype-based, multi-paradigm, and interpreted programming language. Alongside HTML and CSS, JavaScript is one of the three core technologies of World Wide Web content production. It is used to make webpages interactive and provide online programs, including video games. The majority of websites employ it, and all modern web browsers support it without the need for plug-ins by means of a built-in JavaScript engine. Each of the many JavaScript engines represent a different implementation of JavaScript, all based on the ECMAScript specification, with some engines not supporting the spec fully, and with many engines supporting additional features beyond ECMA.
    내가해냄
  </p>
</body>
</html>

 

설명하실 떄마다 항상 코드 일억개를 예시로 드시는데 그 말이 정말 좋은 것 같다.

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

간단하게 이런 코드에서도 반복문과 배열, 변수선언으로 3줄(주석제외)짜리 로 만들었지만 이걸 다 하나하나씩 쓴다면

<a href="1.html">HTML</a>.style.color ='powderblue';

이런식으로 각각 만들었어야 겠지.

 반복문과 배열과 변수의 감사함..! 감사하다!

 

이제 버튼을 누를 떄 마다 배경과 글자색, 글씨가 바뀌는 홈페이지가 나오게 되었다.

사용자의 요청에 따라 코드가 바뀌는 이것이 javascript의 힘!

 

C언어 배울때는 진짜 이게 그래서 뭔가..싶은 마음에 너무 어렵고 힘들었는데 자바스크립트는 그래서 내가 하는 행동들이 이렇게 보이는구나라는게 바로바로 이해되닌까 훨씬 재미있다.

지금 내가 쓰는 블로그도 이런 원리로 작동되는 거겠지.

흥미롭다. 어렵지만 흥미로워서 쟁취하고 싶다. 장미꽃일까? 

 

 

 

 

저작자표시

'2023 > 생활코딩' 카테고리의 다른 글

28. 함수 활용 (실습)  (0) 2023.09.29
24. 함수..!  (0) 2023.09.29
22. 배열과 반복문 하이브리드  (0) 2023.09.28
21. 반복문(loop)  (0) 2023.09.27
20. 배열(JavaScript)  (0) 2023.09.27
'2023/생활코딩' Related Articles more
Comments