jquery 연습(3)

이번 시간은 quiz 문제를 풀어보았다.

 

 

# 1번 문제 - 버튼을 눌렀을 때 입력한 글자로 얼럿 띄우기 (버튼을 눌렀을 때 칸에 아무것도 없으면 "입력하세요!" 얼럿 띄우기)

 

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

우선 문제 내용을 확인해보자

input type = text  의 id 값 'input-q1" 과 onclick 함수 'q1' 이 주어졌다.

먼저 q1 함수를 만들어주고 그 안에 내용을 담아주어야겠다.

 

<script>
    function q1() {
        let txt = $('#input-q1').val();
        console.log(txt);
    }

txt 라는 함수안에 input-q1의 값을 담아준 후 consol 찍어 보아 잘 실행되는지 확인해본다.

 

정상적으로 실행이된다.

function q1() {
    let txt = $('#input-q1').val();
    if (txt == ''){
        alert('입력하세요!!');
    }else{
        alert(txt);
    }
}

txt 값이 빈 칸이면  if (txt == '')  -->      alert('입력하세요');   를 출력

아닐경우 else --> alert(txt);   txt 값을 출력

 

빈 칸으로 클릭 시 '입력하세요!!' 출력 확인

 

txt 내용이 있을때도 내용 출력 확인

 

 

 

 

# 2번 문제 - 이메일 판별 함수 만들기 (이메일이 아니면(@가 없으면) '이메일이 아닙니다'라는 얼럿 띄우기)           

                                       - 이메일은 도메인만 얼럿 띄우기

 

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

 

마찬가지로 input-q2 와 q2 함수 확인.

문자열안에 특정 문자가 있는지 확인하기 위해서는 includes 함수를 사용해주면 된다.

txt2 에 intput-q2 값을 담아준다.  txt2 =$('input-q2').val();

txt2.includes('@')  해주면 txt2에 @가 있으면 true, 없으면 false

 

마지막으로 이메일은 도메인만 얼럿으로 띄워야하니 split 함수를 한번더 사용해야한다

split 함수는 문장을 특정 문자를 기준으로 배열로 나눠준다.

 

예를들어

'010-1234-5678'  이라는 문장이 있고 split('-')을 사용하면 3개의 배열로 나눠진다.

 

let TEL = '010-1234-5678'

let split = TEL.split('-');

해주면

split = ['010', '1234', '5678'] 로 3개의 배열로 나뉨

split[0] = 010

split[1] = 1234

split[2] = 5678 

 

function q2() {
    let txt2 = $('#input-q2').val();
    if (txt2.includes('@')){
        let print = txt2.split('@')[1].split('.')[0];
        alert(print);
    }else {
        alert('이메일이 아닙니다.');
    }

}

만약,   txt2 = usop@gmail.com 이 입력된다면

txt2에는 @가 있으므로

print에는 'usop@gmail.com' 을 split('@') 하여  ['usop', 'gmail.com'] 으로 먼저 나눠진 후 [1] 배열의 값인

'gmail.com' 이 split('.') 되어 ['gmail' , 'com'] 으로 나눠진 후 [0] 배열인 gmail이 담긴다

alert(print) 하면 도메인 gmail 이 출력될 것 이다.

 

확인해보자

 

usop@gmail.com을 입력하면 도메인이 정상적으로 출력

 

@를 입력하지 않으면 '이메일이 아닙니다'가 출력

 

 

 

  #3번 문제 - 이름을 입력하면 추가되는 버튼과 다 지우기 버튼을 만들어보자. 

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

input-q3 와 q3 와 q3-remove  마지막으로 names-q3와 <ul><li> 태그를 확인했다.

<li>'이름값'</li> 형식으로 추가해주면 이름이 계속 추가될거같다.

 

 

정리된 스크립트 코드를 먼저 보고 설명하자면

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

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

 

우선 txt3 에 intput-q3 의 밸류값을 담아준다.

그리고 temp_html  에 `(백틱)을 사용하여 `<li>${txt3}</li>`; 담아준 후

txt3 의 값이 빈 값이 아닐경우에 추가가되야 하므로

if (txt3 != "") 를 해주었다.

names-q3 뒤에 append 를 사용하여 이름을 추가하였다.

q3_remove 는 empty() 를 사용하여 리셋버튼을 추가해주었다.

 

usop 이름 붙이기 정상 작동

 

지우기 버튼을 누르자

 

다 지우기 버튼 정상 작동

 

 

정리)

split, append, includes 등 다양한 메소드와 함수를 사용하여 예제를 풀어보니 재밌기도하고 몇마디 안 써도 뚝딱 뚝딱 완성되는게 너무 신기하다.

하핳... 열심히 연습해서 조만간 간단한 홈페이지를 만들어봐야겠다!!