웹개발 2주차

이재윤·2021년 7월 16일
JavaScriptajaxjquerypycharm스파르타코딩클럽스파트라코딩자바스크립트파이참
0

<2주차>

  • Jquery
  • Ajax

지난 주 배웠던 Javascript 복습

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

let count == 1; 를 함수 밖에 쓸때와 함수 안에 포함을 할때의 결과값이 달라지기 때문에 변수를 어디에 지정해주는지가 중요하다.

what is JQuery?

Javascript는 HTML을 조작해서 움직이게 하기위함이였다면, JQuery는 미리 작성된 Javascript 코드 라이브러리
고로, jquery는 import를 해야만 할 수 있다.
"남이 짜둔 css = 부트스트랩"과 동일한 의미라고 생각하면됨

▶ JQuery를 사용하기 위해서는 import먼저 해줘야함
https://www.w3schools.com/jquery/jquery_get_started.asp

▶ google CDN의 코드를 복사해와서 <헤드>안에 붙여넣어주면 JQuery 사용준비 완료!

▶ 아티클url 포스팅박스의 input 박스의 값을 가져와보기
1. 아티클 url 포스팅박스에 지칭하기 위한 id를 설정해준다.
id = "article-url"

2. 아티클url의 input박스에 세종대왕이라고 친 후, 검사 console 에서 검색하면 "세종대왕"이라는 값이 나옴
(input박스의 값을 가지고 오는 것)

3. 아티클 url의 input박스안에 넣고 싶은 단어를 입력하면 그 값이 input 박스안에 들어간다.(input박스에 값을 입력하는 것)

$('#article-url').val();
article-url을 지칭해서 val()하라는 거구나! 라고 이해하면 쉬움

▶ <디브>숨기기/보이기
1. id = "post-box"로 설정하기

  1. post-box로 설정해둔 포스팅박스 없애기
  2. post-box로 설정해둔 포스팅박스 나타내기

▶ css 속성값을 가지고 오기

$('#post-box').css('width')
"500px"

$('#post-box').css('width', '700px')
S.fn.init [div#post-box.forms]

$('#post-box').css('display')
"block"

$('#post-box').hide()
S.fn.init [div#post-box.forms]

$('#post-box').css('display')
"none"
  1. 지칭된 id의 width를 알아볼 수 있다.
  2. 지칭된 id의 width을 바꿀 수도 있다.
  3. 지칭된 id의 display의 값을 가져오기. = block
  4. 지칭된 id를 숨겨라.
  5. 지칭된 id의 display의 값을 가져오기. = none

▶ 태그 내 텍스트 입력하기
1. "포스팅박스 열기"버튼의 글씨를 바꿔보자.
2. 포스팅박스 열기에 id값을 준다. id = "btn-postingbox"
3. 바꾸고자 하는 단어를 설정해준다.
이때는 .val이 아니라.text를 이용
why? .val은 input box안에서만 사용한다.

▶ 태그 내 html 입력하기
카드를 동적으로 붙일 수 있다.
1. card를 이어 붙일꺼니까 카드컬럼에 id 부여하기 id="cardbox"

2. 빽틱 (esc 밑 ')을 사용해서 let하면 html 처럼생긴 temp_html 문자열이 생긴다. 이 문자열을 html로 바꿔줄 수 있다. $('#cardsbox').append(temp_html)

  1. 우리는 버튼을 붙일게 아니라 카드를 붙일거기 때문에
    let temp_html = <카드 디브>를 가져오기

  2. 카드 html를 이어붙여야하니 .append해주기

  1. (추가로)이미 정해진 cards안에 넣고싶으면 title을 지정해서 넣고싶으면 let title = ' 아무거나 제목' 이라고 변수를 설정한 후, 카드 태그에 ${title}이라고 넣어주면됨.

▶ 포스팅박스 열고, 닫기
1. 포스팅 박스 열고 닫을 박스에 openclose를 설정해주고 <스크립트>에 함수를 설정을 해준다. 포스팅박스가 열려있는지 닫혀있는지 알기위해서는 우선, 포스팅박스의 상태를 알아야하기 때문에 status상태를 확인해본다. console.log(status);


열려있기 때문에 block이라고 잘 나옴 :)

  1. 포스팅박스가 닫혀 있을때 버튼을 눌러서 열꺼고, 박스가 열려있을때 버튼을 눌러서 닫을꺼다.
<script>
        function openclose(){
          let status = $('#post-box').css('display');
            if (status == 'block'){
                $('#post-box').hide();
                $('#btn-postingbox').text('포스팅박스 열기');
            } else{
                $('#post-box').show()
                $('#btn-postingbox').text('포스팅박스 닫기');
            }
        }
    </script>


포스팅 박스 열기" 버튼을 눌러서 닫혀있는 포스팅 박스 열기

포스팅 박스 닫기" 버튼을 눌러서 열려있는 포스팅 박스를 닫기

  1. 이때, 애초에 포스팅 박스가 닫혀져 있으면 더 좋을테니 포스팅박스를 지정해뒀던 form이라는 클래스의 스타일에
    display : none; 을 추가해주면 닫힌 상태가 기본이 된다.

▶JQuery + JAVA Script 연습하기

조건에 맞는 코드를 한번 짜보자!

<!doctype html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>jQuery 연습하고 가기!</title>

    <!-- JQuery를 import 합니다 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <style type="text/css">
        div.question-box {
            margin: 10px 0 20px 0;
        }
    </style>

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

        function q2() {
            // 1. input-q2 값을 가져온다.
            // 2. 만약 가져온 값에 @가 있으면 (includes 이용하기 - 구글링!)
            // 3. info.spartacoding@gmail.com -> gmail 만 추출해서 ( .split('@') 을 이용하자!)
            // 4. alert(도메인 값);으로 띄우기
            // 5. 만약 이메일이 아니면 '이메일이 아닙니다.' 라는 얼럿 띄우기
        }

        function q3() {
            // 1. input-q3 값을 가져온다. let txt = ... q1, q2에서 했던 걸 참고!
            // 2. 가져온 값을 이용해 names-q3에 붙일 태그를 만든다. (let temp_html = `<li>${txt}</li>`) 요렇게!
            // 3. 만들어둔 temp_html을 names-q3에 붙인다.(jQuery의 $('...').append(temp_html)을 이용하면 굿!)
        }

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

    </script>

</head>

<body>
    <h1>jQuery + Javascript의 조합을 연습하자!</h1>

    <div class="question-box">
        <h2>1. 빈칸 체크 함수 만들기</h2>
        <h5>1-1. 버튼을 눌렀을 때 입력한 글자로 얼럿 띄우기</h5>
        <h5>[완성본]1-2. 버튼을 눌렀을 때 칸에 아무것도 없으면 "입력하세요!" 얼럿 띄우기</h5>
        <input id="input-q1" type="text" /> <button onclick="q1()">클릭</button>
    </div>
    <hr />
    <div class="question-box">
        <h2>2. 이메일 판별 함수 만들기</h2>
        <h5>2-1. 버튼을 눌렀을 때 입력받은 이메일로 얼럿 띄우기</h5>
        <h5>2-2. 이메일이 아니면(@가 없으면) '이메일이 아닙니다'라는 얼럿 띄우기</h5>
        <h5>[완성본]2-3. 이메일 도메인만 얼럿 띄우기</h5>
        <input id="input-q2" type="text" /> <button onclick="q2()">클릭</button>
    </div>
    <hr />
    <div class="question-box">
        <h2>3. HTML 붙이기/지우기 연습</h2>
        <h5>3-1. 이름을 입력하면 아래 나오게 하기</h5>
        <h5>[완성본]3-2. 다지우기 버튼을 만들기</h5>
        <input id="input-q3" type="text" placeholder="여기에 이름을 입력" />
        <button onclick="q3()">이름 붙이기</button>
        <button onclick="q3_remove()">다지우기</button>
        <ul id="names-q3">
            <li>세종대왕</li>
            <li>임꺽정</li>
        </ul>
    </div>
</body>

</html>

Q1.

<script>
        function q1() {
            let txt = $('#input-q1').val();
            if (txt ==''){
                alert('입력하세요!')
            } else{
                alert(txt)
            }
            // 1. input-q1의 입력값을 가져온다. $('# .... ').val() 이렇게!
            // 2. 만약 입력값이 빈칸이면 if(입력값=='')
            // 3. alert('입력하세요!') 띄우기
            // 4. alert(입력값) 띄우기
        }
</script>
      
        
<body>
    <h1>jQuery + Javascript의 조합을 연습하자!</h1>

    <div class="question-box">
        <h2>1. 빈칸 체크 함수 만들기</h2>
        <h5>1-1. 버튼을 눌렀을 때 입력한 글자로 얼럿 띄우기</h5>
        <h5>[완성본]1-2. 버튼을 눌렀을 때 칸에 아무것도 없으면 "입력하세요!" 얼럿 띄우기</h5>
        <input id="input-q1" type="text" /> <button onclick="q1()">클릭</button>
    </div>
</body>


Q2.

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



<div class="question-box">
        <h2>2. 이메일 판별 함수 만들기</h2>
        <h5>2-1. 버튼을 눌렀을 때 입력받은 이메일로 얼럿 띄우기</h5>
        <h5>2-2. 이메일이 아니면(@가 없으면) '이메일이 아닙니다'라는 얼럿 띄우기</h5>
        <h5>[완성본]2-3. 이메일 도메인만 얼럿 띄우기</h5>
        <input id="input-q2" type="text" /> <button onclick="q2()">클릭</button>
    </div>


include함수와 split함수이용하기

내가 원하는 문자를 가지고 있는 변수를 찾기위해
변수.include('찾기원하는문자')
ex) eamil.include('@')

문자열에서 내가 원하는 부분만 잘라내기
변수.split('자르고자하는 영역')

Q3.

<script>
function q3() {
            let king = $('#input-q3').val();
            let temp_html = `<li>${king}</li>`
            $('#names-q3').append(temp_html)

            // 1. input-q3 값을 가져온다. let txt = ... q1, q2에서 했던 걸 참고!
            // 2. 가져온 값을 이용해 names-q3에 붙일 태그를 만든다. (let temp_html = `<li>${txt}</li>`) 요렇게!
            // 3. 만들어둔 temp_html을 names-q3에 붙인다.(jQuery의 $('...').append(temp_html)을 이용하면 굿!)
        }

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

    </script>
    
    
    
    
    <div class="question-box">
        <h2>3. HTML 붙이기/지우기 연습</h2>
        <h5>3-1. 이름을 입력하면 아래 나오게 하기</h5>
        <h5>[완성본]3-2. 다지우기 버튼을 만들기</h5>
        <input id="input-q3" type="text" placeholder="여기에 이름을 입력" />
        <button onclick="q3()">이름 붙이기</button>
        <button onclick="q3_remove()">다지우기</button>
        <ul id="names-q3">
            <li>세종대왕</li>
            <li>임꺽정</li>
        </ul>
    </div>

temp-html 만들어주는 코드 기억하기

▶ 서버-클라이언트 통신이해하기
페이지 전환 없이 자바스크립트를 이용하여 서버에서 값을 받아올 수 있는 방법

서버 -> 클라이언트 : json
클라이언트 -> 서버 : GET 요청

타입에 따라, GET/ POST요청으로 나뉨

  • GET : 데이터 조회 EX) 영화목록조회
  • POST : 데이터 생성, 변경, 삭제 EX) 회원가입, 탈퇴, 수정

Json은 딕셔너리와 리스트의 조합과 같음(아래API형태)
"<미세먼지 open api>"
http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99

▶ Ajax 시작하기
<Ajax의 기본골격>
Ajax는 jQuery를 임포트한 페이지에서만 동작 가능

$.ajax({
  type: "GET",
  url: "여기에URL을입력",
  data: {},
  success: function(response){
    console.log(response)
  }
})

콘솔창에서 ajax이용하기

profile
이재윤
장기적으론 낙관주의, 단기적으론 현실주의
이전 포스트

2주차 과제

다음 포스트

3주차

0개의 댓글