[항해99][CSS][2주차] 내용 정리

1. JavaScript에서 기억해야 할 것.

    변수, 자료형, 함수, 조건문, 반복문

    나는 현재 반복문 작성에서 취약함을 보이는 듯 하다.

    튜터의 설명으로는 이전에 작업했던 코드를 그대로 붙여넣기하여 작업하는 것을 추천한다고 한다.

    이는 곧 편리함과 오타로 인한 오류를 줄여줄 수 있다.

     ex) 아래와 같은 코드는 학습중에도 많이 봐온 코드이고, 튜터의 설명으로도 실제로 많이 사용되는 코드라고 한다.

           다른 반복문 작업을 할 때에는 a_list의 내용만 바꿔서 작업하면 될 것으로 보인다.

let a_list = ['사과', '딸기', '배', '감']
for (let i = 0; i < a_list.length; i++) {
   console.log (a_list[i])
}

---

2. 간단한 홀수, 짝수 판정 코드

   기본 개념을 알고 있으면 이해하기 쉽다.

let even = 4;
console.log(even % 2); // 2로 나눈 나머지가 0이다.
let odd = 5;
console.log(odd % 2); // 2로 나눈 나머지가 1이다.

미리 생성되어 있는 <button>태그로 버튼을 클릭 시, 카운트 되는 수가 짝수번째인지, 홀수번째인지 판정한다.

<script>
let count = 1;
function hey() {
    if (count % 2 == 0) {
        alert('짝수'); 
    } else {
        alert('홀수');
    }
    count += 1; 
}
</script>

---

3. JQuery 연습하기.

   튜터의 풀이와 비교해보니 나의 풀이는 조잡하다.

   작동은 되지만 튜터의 것과 간단하고 직관적이어야 보기 좋다.

 

    - 빈칸 체크함수 만들기.

 

 

 

 

 

 

        // ↓나의 풀이.↓
        function q1() {
            $('#input-q1').val()
            if ($('#input-q1').val() == '') {
                alert('입력하세요!')
            } else {
                alert($('#input-q1').val())
            }
        }

        // ↓튜터의 풀이.↓
        function q1() {
            let txt = $('#input-q1').val()
            if (txt == '') {
                alert('빈칸입니다.')
            } else {
                alert(txt)
            }
        }

 

    - 이메일 판별 함수 만들기.

 

 

 

 

 

 

        // ↓나의 풀이.↓
        function q2() {
            $('#input-q2').val()
            if ($('#input-q2').val().includes('@') == true) {
                let see = ($('#input-q2').val().split('@'))
                alert(see[1])
            } else {
                alert('이메일이 아닙니다.')
            }
        }

        // ↓튜터의 풀이.↓
        function q2() {
            let txt = $('#input-q2').val()
            if (txt.includes('@') == true) {
                alert(txt.split('@')[1].split('.')[0])
            } else {
                alert('이메일이 아닙니다.')
            }
        }

 

    - 이메일 판별 함수 만들기.

 

 

 

 

 

 

 

 

 

        // ↓나의 풀이.↓
        function q3() {
            $('#input-q3').val()
            let txt = $('#input-q3').val()
            let temp_html = `<li>${txt}</li>`
            $('#names-q3').append(temp_html)
        }
        function q3_remove() {
            $('#names-q3').empty()
        }

        // ↓튜터의 풀이.↓
        function q3() {
            let txt = $('#input-q3').val()
            let temp_html = `<li>${txt}</li>`
            $('#names-q3').append(temp_html)
        }

        function q3_remove() {
            $('#names-q3').empty()
        }

---

4. JavaScript에서 기억해야 할 것.

    - 2주차 종료 과제

        날씨 api를 사용하여 날씨를 표시 할 것.

        참조 api : http://spartacodingclub.shop/sparta_api/weather/seoul

        이번 과제는 많이 헤맨 과제였고 끝내 답을 찾지 못한 과제였다.

        튜터의 답안을 보고, 너무 단순한 코드라 놀랐다. 나는 복잡하게 생각하고 복잡하게 풀이하고 있었다.

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
        data: {},
        success: function (response) {
            $('#temp').text(response['temp'])
        }
    })
});

---

식중독에 걸려 너무 힘든 2주차였다.

몸관리를 잘해야 남은 배움에 어려움이 없을 것이다.