왕초보 웹개발반 2주차 강의 개발일지 - 1

오늘의 강의 절반듣기 커리큘럼은 이렇다.
벌써부터 아득하다........... 나는 1주차 자바스크립트도 이해못한 얼레벌레이기 때문에....
그래도 까짓것 한번 해보죠 뭐. 선생님을 믿습니다.

와! 스크립트! 놀라울 만큼 이해못했다!

어디가요 선생님 왜 저를 두고 혼자서 제이쿼리를 하러가시는거죠?

<script>
        let count = 1;

        function hey() {
            if (count % 2 == 0) {
                alert('짝수입니다!')
            } else {
                alert('홀수입니다!')
            }
            count += 1;

        }
    </script>

일단 요건 2-2에서 새로 알게된 스크립트...
대충 느낌은 알겠다. function{} 함수 밖으로 let변수를 선언해주면 어디 함수에서나 그 변수가 적용되고, 축적된다는것을 알겠는데...! 이런 감수성 함수 배움 괜찮은가? 원래 함수는 필링으로 배우는건가?

• 알게된점: == 이건 등호(=이것만 쓰면 안됨) / count += 1 이건 count + 1 과 똑같은 지문?이다

<a onclick="hey()" class="btn btn-primary btn-lg" href="#" role="button">포스팅박스 열기</a>

body에서 적용한 코드보니까 hey의 용도를 알게 되었다. 그냥 함수이름을 hey로 지정하고 이걸 포스팅박스 버튼에 적용한건듯

얼레벌레 감성이해 성공!

제이쿼리 재밌다면서요

오~ 무슨말인지 모르겠는데~ 한국어로 해주세요~ 일단 해보면서 또 감수성이해 해보기로 했다.
선생님말론 '제이쿼리=남이 짜둔 자바스크립트' 라고 하신다 오..오오? 오오오....

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

일단 부트스트랩 템플릿을 이용하지 않는다면, 해당 스크립트를 head사이에 넣어야한다. 써야 제이쿼리 적용이 된단다.

<script>

        function openclose() {
            let status = $('#post-box').css('display');
            if (status == 'block') {
                $('#post-box').hide();
                $('#btn-posting-box').text('포스팅박스 열기');
            } else{
                $('#post-box').show();
                $('#btn-posting-box').text('포스팅박스 닫기');
            }
        }

    </script>

위에 코드 뭔가...뭔가 뭘까..?
재밌다면서요 재밌다면서요 재밌다면서요
무슨기능하는진 알겠는데 문법이 이해가 잘안된다. 이건 복습하면서 또 감수성 이해해야할듯

자바스크립트 + 제이쿼리 퀴즈? 못풀었어요 하염없이 우는 얼은이에요

퀴즈 문제 내느라 고생많으셨죠 쌤
놀랍게도 하낫또 몰라서 못풀었습니다. 네네 아무래도 해답지 먼저 보는편이에요.
하나도 머리에 안들어왔는데 뭘...어떻게 풀어요 선생님 이걸 알아야 풀죠. SORRY #ImNOTsorry
일단 아래는 코드

  <script>
    function q1() {
      // 1. input-q1의 입력값을 가져온다.
      let value = $('#input-q1').val();
      // 2. 만약 입력값이 빈칸이면 if(입력값=='')
      if (value == '') {
        // 3. alert('입력하세요!') 띄우기
        alert('입력하세요!');
      } else {
        // 4. alert(입력값) 띄우기
        alert(value);
      }
    }

    function q2() {
      // 1. input-q2 값을 가져온다.
      let email = $('#input-q2').val();
      // 2. 만약 가져온 값에 @가 있으면 (includes 이용하기 - 찾아보자!)
      if (email.includes('@')) {
        // 3. [email protected] -> gmail 만 추출해서
        // 4. alert(도메인 값);으로 띄우기
        let domainWithDot = email.split('@')[1];
        let onlyDomain = domainWithDot.split('.')[0];
        alert(onlyDomain);
      } else {
        // 5. 만약 이메일이 아니면 '이메일이 아닙니다.' 라는 얼럿 띄우기
        alert('이메일이 아닙니다.');
      }
    }

    function q3() {
      // 1. input-q3 값을 가져온다.
      let newName = $('#input-q3').val();
      if (newName == '') {
        alert('이름을 입력하세요');
        return;
      }
      // 2. 가져온 값을 이용해 names-q3에 붙일 태그를 만든다. (let temp_html = `<li>${가져온 값}</li>`)
      let temp_html = `<li>${newName}</li>`;
      // 3. 만들어둔 temp_html을 names-q3에 붙인다.(jQuery의 $('...').append(temp_html)을 이용하면 굿!)
      $('#names-q3').append(temp_html);
    }

    function q3_remove() {
      // 1. names-q3의 내부 태그를 모두 비운다.(jQuery의 $('....').empty()를 이용하면 굿!)
      $('#names-q3').empty();
    }

  </script>

배워야할점 1: let 어쩌구와 스크립트 if문 (q1 문제 참고)
배워야할점 2: .includes / 뭐 기준으로 첫째 둘째 나뉘는거(q2 문제, 1주차 강의 참고)
배워야할점 3: .appned / .empty

진짜 뭔말인지 모르겠다 cry like a baby
그냥 코드들 나중에 또 찬찬히 뜯어보고 강의도 복습하면서 감수성 이해 해야겠다^ㅠ....얼레벌레 파이팅...