WEB2 - JavaScript

조건문의 활용

조건문의 활용

소스코드

변경사항

댓글

댓글 본문
작성자
비밀번호
  1. 이수안
    와 신기해요~~
  2. hyegineer
    완료!
  3. udevapp
    비교해야할 곳과 바뀌는 부분이 달라 그런 것 같습니다.
    토글을 할때 뭘 해야할지를 한번 생각해보는 것도 좋을 것 같습니다.

    아래에 이고잉님의 코드를 간략화해서 적어보았습니다.
    아래 코드 보시면 if else 로직중에 둘중에 하나만 실행됩니다.

    우선 day_night 라는 변수를 a 라고 바꿔서 보겠습니다.

    if (a === 'day'){
    a= 'night'
    // 원하는 작업(day 때 필요한 동작)
    }else{
    a= 'day'
    // 원하는 작업 (nihgt 때 필요한 동작)
    }

    저희가 버튼을 눌렀을때 if 나 else 둘 중 하나가 실행됩니다.
    a 가 day 이면 if 안쪽이 실행되고 끝납니다.
    그때 a 를 'night' 로 바꾸는 작업은 다음에 실행했을때는 else 가 실행되기를 바라고 예약하는 것이라고 생각하면 좋을 것 같습니다. 현재 night 가 되었다고 해서 else 문의 day 동작이 다시 실행되지 않습니다.

    반대로 다음에 버튼을 눌렀을때는 a가 night 겠죠
    그럼 else 로 타고 들어갑니다.
    원하는 작업을 하고 이제 a 를 day 로 바꾸죠. '다음번에' 이 버튼을 누를때의 동작을 예약하는 겁니다.
    대화보기
    • udevapp
      저도 해매서 테스트 해봤는데요.
      초보인님 말하신게 맞습니다.
      구조의 상단이 홑따옴표이면 안쪽은 겹따옴표여야 하고요.
      상단이 홑따옴표이면 안쪽이 겹따옴표여야 합니다.

      아래와 같이 했을때 둘다 동작합니다.

      1. 온클릭다음에 겹따옴표
      <input type="button" id="night_day" value="night"
      onclick="
      if (document.querySelector('#night_day').value === 'night'){
      document.querySelector('#night_day').value = 'day';
      document.querySelector('body').style.backgroundColor = 'black';
      document.querySelector('body').style.color = 'white';

      }else{
      document.querySelector('#night_day').value = 'night';
      document.querySelector('body').style.backgroundColor = 'white';
      document.querySelector('body').style.color = 'black';
      }
      ">
      </input>


      2. 온클릭 다음이 홑따옴표
      <input type="button" id="night_day" value="night"
      onclick='
      if (document.querySelector("#night_day").value === "night"){
      document.querySelector("#night_day").value = "day";
      document.querySelector("body").style.backgroundColor = "black";
      document.querySelector("body").style.color = "white";

      }else{
      document.querySelector("#night_day").value = "night";
      document.querySelector("body").style.backgroundColor = "white";
      document.querySelector("body").style.color = "black";
      }
      '>
      대화보기
      • Hyeon-Jun Ha
        완료!
      • 채정훈
        오타 주의합시다 ㅎㅎ 안 되어서 한참 눈을 굴려봤는데 querySelector를 quertSelector로 쳐서 찾느라 힘들었네요 ㅋㅋㅋ
      • 코돌이
        5/10 어려워지지만 무사히 완료!
      • 허공
        190509 감사합니다.
      • 위준우
        완료
      • Jongjin Park
        5/6 완료
      • 주워니
        완료~~~!!!!
      • 미고랭이
        완료
      • 최승윤
        완료!
      • 김한주
        완료
      • greedy0111
        완료스
      • 끝가지간다
        완료~
      • cosmic08
        와 점점 어려워지네요 그래도 이해하고나면 재밌어요 동영상 몇번을 멈추고 다시봤는지 몰겠음;
        항상 두번 보면서 두번째엔 노트를 적는데... 이번건 뭐 노트를 어케써야할지 감도안잡힘
        혼자 나름 써내려 가면서 아 잠깐만요 아 잠만요 샘 기다려봐요.... 이러고 ㅋ
      • 이달
        완료
      • 완료!
      • Seohee Kim
        완료!
      • 2019-02-18 완료
      • 우도순
        완료
      • 초보인
        저도 비슷한 문제로 고민했었는데요. 제 스스로 생각한 답은 onclick 다음에 겹따옴표가 시작되잖아요. 그러니까 그 다음부터는 코드중에 겹따옴표가 또 등장하면 거기서 겹따옴표로 묶은 명령문이 '종결'되버리는거죠. 그럼 우리가 원하는 코드가 통으로 실행이 안되고 중간에 끊겨버리는 셈이 되니까 제대로 실행이 안되는 거겠죠. 그러니까, 일단 onclick 다음에 홑따옴이건 겹따옴이건 암튼 하나로 시작하면, 그 스코프가 끝날때까지는 그 스코프 안에서는 다른 종류의 따옴표를 써야 하는거죠. (제 추측이긴 합니다만)

        홑이나 겹이 기능적 차이가 있는게 아니라, 어디서 어디까지를 무엇으로 묶느냐의 차이인것 같아요. 아마도.
        대화보기
        • 호두
          고맙습니다
        • 발헤
          감사합니다. 완료
        • Juyeon Heo
          완료!
        • 이고잉메리호
          저는 atom 에디터 이용중인데 저랑 시도하신 부분이 일치하네요.. 물론 저도 홀따옴표로 해야 정상 작동 하구요. 검색해봤는데 정보가 제대로 안나와 일단 넘어갔어요ㅠ
          대화보기
          • 지미츄
            감사합니다!
          • 투게디
            쌍따옴표와("") 홀따옴표('')는 자바스크립트에서는 둘다 문자열이라는 같은 기능을 하는것으로 알고있는데요.
            onclick="안의 자바스크립트코드에 쌍따옴표를 사용했더니 코드가 작동이 안되네요. 다시 홀따옴표로 바꾸었더니 작동을 하고요. 왜그런건지 궁금합니다. 전 if(document.querySelector('#night_day').value === /*이부분*/'night') 저 주석처리한 night부분을 홀따옴표대신 쌍따옴표로 감싸봤어요. 처음에 작동을 안하길레 혹시몰라 value = night와 value = day 부분도 모두 쌍따옴표로 통일해도 역시 작동을 안하더군요.. 궁금하네요 혹시 onclick의 쌍따옴표안에 자바스크립트 코드가 있어서 그안에 또 쌍따옴표를 썻기에 브라우저가 혼동하는것인가요.
            /*전 브락켓 에디터를 쓰고있습니다*/
          • 함가죠
            완료 감사합니다:)
          • gravity251
            완료
          • 이수하
            완료
          • Aimhee
            완료
          • 냄민새감
            if(document.querySelector('#night_day').value === 'night'){
            document.querySelector('body').style.backgroundColor = 'black';
            document.querySelector('body').style.color = 'white';
            document.querySelector('#night_day').value = 'day';
            } else {
            document.querySelector('body').style.backgroundColor = 'white';
            document.querySelector('body').style.color = 'black';
            document.querySelector('#night_day').value = 'night';
            }
            ">

            붙여넣기 하면 작동하는데 정말 토시하나 안틀리고 직접입력하면 안되는데 어떻해야하나요 지금 이것만 한시간반째입니다 ㅜ
          • 한강
            오늘도 감사합니다.
          • 오타 조심합시다 오타 때문에 한참 고민했어요ㅠㅠㅠㅠㅠㅠㅠㅠㅠ 어휴
          • 2019.01.11 슬슬 어려워지는데 아직까진 따라가고 있습니다^^
          • suhwan
            그럼 if절을 이용해서 css stylesheet 값도 변경할 수 있나요?
            그 나이트일때 boarder 색이 검은색이라 안보여서요
          • 돼지천재
            감사합니다.
          • Pakupaku
            어제 보다가 너무 어려워서 자버렸음;; 아침에 다시 보니깐 아하! 깨달음을 얻었습니다. 감사합니다 ^^;
          • icdoit
            감사합니다.
          • 늦었지만
            감사합니다.
          • 좋아요.
          • 키보드치는남자
            잘들었습니다
          • 오우 코딩좀 할줄 아는놈인가
            어째서 작동이 안되는 거지 하면서 이것 저것 건들면서 수십분째 지나고
            onclick 을 onclik 으로 써버려서 오류가 난걸 알았을때....
            오타조심합시다.....
          • 아미쓔
            쌍따옴표랑 홑따옴표 구분 잘해야겠네요 ㅎㅎㅎ
          • 감사합니다!!
          • 오유상
            감사합니다
          • 감사합니다.
          • 로버트한
            변수와 대입연산자 잘 배웠습니다.
            변수에는 var 를 사용하자 ^^
            예) var name ^^
          버전 관리
          egoing
          현재 버전
          선택 버전
          graphittie 자세히 보기