[2주차] 스파르타코딩클럽 웹개발 종합반 2주차 2

2-5 강의에서는 자바 스크립트 + 쿼리를 이용하여 퀴즈를 내 주셨다.

도저히 혼자서는 못하겠어서 강사님이 풀으시는 걸 참고하여 풀었다.

 

첫번째 문제

1. 빈칸 체크 함수 만들기

1-1. 버튼을 눌렀을 때 입력한 글자로 얼럿 띄우기

[완성본]1-2. 버튼을 눌렀을 때 칸에 아무것도 없으면 "입력하세요!" 얼럿 띄우기

<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-q1의 입력값을 가져온다.

function q1() {
  let txt = $('#input-q1').val()

버튼을 눌렀을 때 입력하는 칸에 아무것도 없으면 입력하세요 라고 얼럿을 띄워야하니 if 문과 alert 문을 써준다.

if (txt == '') {
  alert('입력하세요!') }

글자를 입력하고 칸을 누르면 입력한 글자가 출력되게 else 문과 alert 문을 써준다.

 else { alert(txt)
}

첫번째 문제 끝! 사실 이거도 처음 딱 봤을때 멘붕이었다..

 

두번째 문제

 

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

2-1. 버튼을 눌렀을 때 입력받은 이메일로 얼럿 띄우기

2-2. 이메일이 아니면(@가 없으면) '이메일이 아닙니다'라는 얼럿 띄우기

[완성본]2-3. 이메일 도메인만 얼럿 띄우기

<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 값을 불러온다.

function q2() {
  let txt1 = $('#input-q2').val()

includes 함수를 써서 만약 입력 받은 글자가 이메일 인 경우 (@가 포함 된 경우)

if (txt1.includes('@') == true) {

 

이런식으로 하나하나 찾아 도메인만 나오는 식을 찾는다.

후에 얼럿으로 찾은 값을 출력하면 끝!

 

 

let txt2 = txt1.split('@')[1].split('.')[0]
alert(txt2)

만약 이메일이 아닐 경우 alert 문을 사용하여 이메일이 아니라고 출력하게 만들어준다.

}else { alert('이메일이 아닙니다.')
}

 

 

세번째 문제

3. HTML 붙이기/지우기 연습

3-1. 이름을 입력하면 아래 나오게 하기

[완성본]3-2. 다지우기 버튼을 만들기

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

먼저 입력하는 칸에 입력받은 값을 불러온다.

function q3() {
  let txt3 = $('#input-q3').val()

가져온 값을 이용해 names-q3에 붙일 태그를 만든다.

let temp_html = `<li>${txt3}</li>`

만들어둔 temp_html을 names-q3에 붙인다.

$('#names-q3').append(temp_html)

다 지우는 버튼을 만드는 법은 names-q3의 내부 태그를 전부 비우면 된다. .empty()문 사용

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

이렇게 해서 퀴즈를 전부 풀어보았다.

한번 더 다 지우고 처음부터 해봐야겠다.. 진짜 쉬운 길은 아니구나..