WEB2 - JavaScript

조건문의 활용

조건문의 활용

소스코드

변경사항

댓글

댓글 본문
작성자
비밀번호
  1. 초보인
    저도 비슷한 문제로 고민했었는데요. 제 스스로 생각한 답은 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 ^^
      • 아 단순한건데 이해를 못했네요 이해 잘되게 설명해주셔서 감사합니다!
      • ==과 === 의 차이점
        "192.16~~~" == 192.16~~~ -> true
        "192.16~~~" === 192.16~~~ -> false 이다

        === 은 타입조차 구분해준다.


        onclick=" document.querySelector('body').style.backgroundColor = 'black'; "

        위 경우 document.querySelector('body').style.backgroundColor = "black" ; 와 같다.

        차이점 black 의 따옴표 표시.
      • kissandlove
        먼저 '=' 은 대입을 뜻하고, '==='는 비교를 뜻합니다.
        document.querySelector('#night_day').value = 'day' 라는 것은 'day'를 document.querySelector('#night_day').value에 대입하는 것입니다. (즉 버튼의 value가 'day' 됨)

        마지막에 document.querySelector('#night_day').value = 'day'로 넣어주지 않으면 document.querySelector('#night_day').value는 계속 'night'인 상태이므로 if 문의 조건에서 항상 true가 되므로 계속 나이트 모드로 되겠죠.
        마지막에 document.querySelector('#night_day').value='day'를 넣어줌으로써 버튼을 두번째 눌렀을 때 if 조건문이 false가 되어 else 안에 있는 내용이 실행됩니다.

        허접한 답변인데 도움이 되면 좋겠네요.
        대화보기
        • 다 이해가 되는데 아무리 생각을 해봐도
          왜 if { } 마지막에 왜 마지막에 document.querySelector('#night_day').value = 'night' 이걸 써줘야 Night 모드에서 Day 모드로 변환되는지도 모르겠습니다.
          마지막에 꼭 document.querySelector('#night_day').value = 'Day';를 써야하고
          else { } 에는 반대로 써야만 night, day 모드가 전체적으로 다 동작 되는지 이해가 안됩니다.

          if와 else 둘을 잇는 역할인건가요? 그렇다면 = 'night/day'가 무슨 뜻인가요??
          =와 ===의 차이를 모르겠어서 검색을 해봤는데 ==와 ===의 차이만 나오고
          =에 대해서는 != 결과만 나와서요.

          document.querySelector('#night_day').value === 'Night'과
          document.querySelector('#night_day').value = 'night' 에서 뭐가 차이를 어떻게 만드는지 모르겠습니다.
          왜 마지막에 document.querySelector('#night_day').value = 'night' 이걸 써줘야 Night 모드에서 Day 모드로 변환되는지도 모르겠구요.

          아시는분 짧게라도 답변 부탁드립니다. 궁금하고 헷갈려서 미치겠습니다ㅠㅠㅠ
        • 콘솔에 document.querySelector('#night_day') 이거 분명 오타없이 쳤는데 자꾸 null이라 나와서 애먹었는데 다시 해보니까 또 되긴되네요ㅠㅎ;

          따라쳐서 구현하긴했는데 정확히 이해하진 못한 것 같네요! 다시 한 번 복습해야 할듯..
        • 한상문
          이 영상을 보면서 가야할 길이 참 멀구나 생각되네요~
          그래도 열심히 해 보겠습니다~~ ㅎㅎㅎ
        • 동글몬
          감사히 잘 봤습니다. 감사합니다~ ^^
        • 허허
          초반부 강의 영상에 설명이 있습니다.
          Javascript 에서는 같은 "",'' 모두 같은 기능을 합니다.
          강의 초반부를 다시 보시거나, 모르시는건 인터넷 검색을 추천합니다..
          직접 찾아보는 습관은 큰 도움이 됩니다
          대화보기
          • 스피릿
            누구는 ""를 붙히고 누구는 ''로 감싸주는데 언제 누가 사용되는지에 대한 기준이 뭔가요?
            직접 코딩할 때 ""와 ''가 언제 사용되는지가 자꾸 헷갈리네요.
          • 소금돌
            하루만 쉬어도 공부 흐름이 끊겨서 그런지..
            헷갈리는 부분이네요... id 값을 가져오는 부분과
            querySelector 부분...
          • jayxwoo
            오늘도 강의 잘 들었습니다. 감사합니다.
          • 옥슬이
            1. === 은 왼쪽값과 오른쪽값이 같느냐라고 이고잉님께서 설명하시더군요

            2. 맞습니다. value 값을 바꾸라는 의미입니다
            대화보기
            • 권호석
              <input id="night_day" type="button" value="day & night" onclick="
              if (document.querySelector('body').style.backgroundColor === 'white')
              {
              document.querySelector('body').style.backgroundColor='black';
              document.querySelector('body').style.color='white';
              }
              else
              {
              document.querySelector('body').style.backgroundColor='white';
              document.querySelector('body').style.color='black';
              }">
              전 이렇게 해봤습니다.
            • 상상예찬
              김예찬 배재영
            • daaawnstar
              심장아 나대지마라
            • Dani Choi
              감사합니다!
            • Dreaming_Joyy
              개발자도구 console에
              document.querySelector(#night_day). value라고 하는데 안나와서 엄청헤멨는데....
              ' #night_day ' 이렇게 single quotation mark를 꼭 붙여주셔요...String문자열이니까요 ㅠㅠ.

              그래도 오늘 좋은 실수 한 것 같습니다!!!
            • Lee Seon Bin
              document.querySelector('#night-day').value === 'night'
              에서 ===의 뜻이 정확히 뭔가요 ?? id값이 night-day인 코드의 벨류값이 night랑 같느냐 라고 해석하면 되는건가요 ?

              document.querySelector('#night-day').value = 'night'
              이것은 d값이 night-day인 코드의 벨류값을 night로 바꾸란 뜻인가요 ?
              이꼴의 의미를 정확히 알고싶습니다.
            • 정중식
              정리해주셔서 감사합니다~
              대화보기
              • 라울
                감사합니다.
              • Mingi Son
                180213 너무 재밌어요!! 감사합니다
              • JN87
                180210 감사합니다!
              버전 관리
              egoing
              현재 버전
              선택 버전
              graphittie 자세히 보기