10/20 알고보면 쉬운 jQuery

10/20 오늘은 jQuery가 시작되는날이다

jQ 는 JS의 긴코드를 사용하기 편하게 미리 지정을해놓고

라이브러리를 끌어다 쓰는 용도라고 보면된다

JQ를 사용할때에는 $(`#`) 이 기본적으로 붙고 아래에는

if문이나 for문을 이용하여 조금더 다체로운 동작이가능하다

 

중요! 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
구글 jQuery 폼을 넣지않으면 jQuery는 동작하지않는다 꼭빼먹지말고 넣어주자

 

먼저 input 박스의 값을 가져오는방법을 알아보자

url의 값을 가져올려면 url에있는 요소를 지정해줘야한다

css에서는 class로 지정했던것을 JQ에서는 id로 지정해준다

 

functon open_box(){

$(`#postbox`).show();

}

 

function으로 opne_box라는 함수를 지정해주고

그안에는 html로 지저한 post_box를 .show()JQ에서 보이게하는기능

을 실행하게된다

 

postbox는 html상에서 id로 지정을해주어야하며

script안에서는 백틱``으로 감싸줘서 사용해야한다

 

보여주는건 .show() 라면 숨기는기능은 .hide()이다

 

조금더 심도있게 알아보자

<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>

    위문제를풀어보자 id값은 input-q1 이고 버튼에지정된 함수는q1 이다
    입력된값을 얼럿으로 보내고 입력이되지않았다면 얼럿으로 입력하라고 를 출력하자

    function q1 (){ alert(1); }
    먼저 q1에 함수가 잘들어가는지확인

    function q1 (){                                 // onclick으로 지정해준 q1에 함수를 지정한다
        let a = $(`#input-q1`).val();      //id값 a = inupt으로 들어오는값이다
        if( a == ''){                                 //만약에 a에 입력되는값이없으면
            alert("입력해야지!")               //입력해야지!를 얼럿으로표기
        } else {                                     //그렇지않다면
            alert(a);                              //a에 입력된값을 표기!
        }           
    }

 

이런식으로 해석이되겠다 조금더 응용해서

다른 문제를 한개더 풀어보자

 

<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>


    function q2() {                                    //  onclick으로 지정해준 q2함수를 지정한다
    let mail = $(`#input-q2`).val();                    // id값 mail =input으로 들어오는 값이다
    if (mail.includes('@')){                            // mail 로들어온 input값안에 .includes로 '@' 가 들어있는지검사
        let dot = mail.split('@')[1];                //   dot = 메일에서 .split('@') 으로 분리된부분(12123)(gmail.com)중 [1]번을선택
        let domain = dot.split('.')[0];               //  domain = dot으로 선언된 gmail.com 에서 .split('.')으로 분리된(gmail)(com)중 [0]번을선택
        alert(domain);                              // 얼럿창으로 (domain) 을 출력
    } else {                                            // 그렇지않다면
        alert("이메일이아니야!");                           // 얼럿창으로 ("이메일이아니야!") 출력
    }

 

가되겠다 앞서배운 JS내용을 조금이해했더라면 처음푸는데 시간은걸리겠지만

못풀정도의 문제는 아닌거같았다

내일은 ajax를 다룬다 실제로 계속 업데이트 되는 정보를 

실시간으로 가져오는것을 배워볼예정이다

그럼 오늘의 포스팅은 여기서 마치겠다