2-5_Quiz_JQuery 연습하기

250x250

Recent Posts

« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

관리 메뉴

Hello creators 🙌

2-5_Quiz_JQuery 연습하기 본문

[WEB & AI] (feat. 취준)/스파르타코딩클럽_웹개발종합반

2-5_Quiz_JQuery 연습하기

부시매나_HA 2023. 10. 5. 07:23

728x90

Ⅰ. 이번 회차 학습 목표 (goal)

1. 배우고자 하는 것

지금까지 배웠던거 활용해서 퀴즈 풀기

Ⅱ. 퀴즈 풀기 사전 파일 만들기

1. 이 코드 스니펫 복사해서 시작

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

Ⅲ. DJ 먼저 해보기

1. 입력한 글자가 있으면, 해당 글자로 alert 띄우기

1) 전략

우선, 퀴즈 안내에 나온대로 하고 있음.

2) jquery 써서 값 가져오기 #jquery_값가져오기

'값 가져오기' 예제 코드 스니펫
```
$('#__타겟id__').val()
```

3) 우선 되는 코드

#jquery_값가져오기_예시코드

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

    if (input_value == 0) {
        alert('입력하세요~')
    } 
    else {
        alert(input_value)
    }
}

3) design critic

a. 튜터님 코드

배운점

텍스트 변수 입력시 -> txt 를 관습적으로 쓸 수 있다는 것

빈칸을 ' ' 이렇게 표현할 수 있다는 것. ⭐⭐⭐⭐⭐

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

2. 이메일 판별 함수

1) 해야 하는 것

버튼 눌렀을 때 -> 입력받은 이메일 도메인 alert 띄우기
@ 없어서 -> 이메일 아니면 -> '이메일 아닙니다.'' alert 띄우기

2) 해보기

#jquery_includes_특정문자포함여부_예시코드

#jquery_split_특정문자기준쪼개기_예시코드

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

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

👉 우선, 돌아가긴 함

3) design critic

a. 튜터님 접근

colsole.log 로 먼저 includes 함수 테스트 -> console f12 열어서 확인 #What_i_learned

split 함수 써서 도메인만 취하려고 할 때, console 창 열어서 테스트 하고 > 해당 line 을 복사해서 가져온다. #What_i_learned

그런데, 변수를 txt 로 하면, 위에 q1 함수에서 입력한 값이랑 겹치는거 아냐? (overwrite) 되는거 아냐? ❓❓❓❓❓❓❓❓❓❓ #질문사항

튜터님 코드

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

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

1) 이름 입력 -> 붙이기 클릭 -> 아래 나오게 하기

하고자 하는 것

나오게 하는 건 = 해당 id 에, append ( ) 를 쓴다.
- 사전에 무엇을 append 할지 temp 변수가 정의 되어야 함
- 그러면 if 클릭 되면 > 붙여지는 함수가 실행
- 그 함수에는 1) html temp 변수 선언 2) 그게 jquery 로 html 이 되고

a. 우선 되는 코드

#jquery_append_추가로붙이기_예시코드

#jquery_변수활용꽂아주기_예시코드

#jquery_임시html을진짜html만들기_예시코드

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)을 이용하면 굿!)

    // jquery 로 값 가져오기
    let input_attach = $('#input-q3').val()

    // 변수활용해서 꽂아준걸 -> 임시 html 로 
    let temp_html = `<li> ${input_attach} </li>`

    // 어디로 id 를 잡아야 하나! 고민이 됨 
    $('#names-q3').append(temp_html)    

}

👉 우선 나오긴 함

👉 onclick 함수는 이름 붙이기 버튼에 있음

b. what i learned

==어떤 HTML 태그가 늘어나야 해?== 를 확인

여기에서는 임꺽정 리스트가 늘어나야 해!
이걸 처음에 잘 못 찾았음 ⭐⭐⭐⭐⭐⭐⭐

'그걸 ==포함하고== 있는 건?'' ⭐⭐⭐⭐⭐

그걸 ==포함하고 있는 태그==가 뭔지 잘 살펴!
이거에 대해서 jquery 먹여주면 됨

2) 이름 지워보기

a. 우선 되는 코드 #jquery_empty_예시코드

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

    $('#names-q3').empty()

}

💭 What i learned

# 활용하면, 원하는 스니펫을 바로 찾을 수 있지 않을까.
'1차 우선 되는 코드' 로 기록하고 -> 그 다음 design critic 목차를 넣는게 좋을 거 같음
태그를 활용해서, #jquery_변수활용꽂아주기_예시코드 이렇게 하면 -> 나중에 가져오기 편함 ⭐⭐⭐
빈칸을 ' ' 이렇게 표현할 수 있다는 것. ⭐⭐⭐⭐⭐
includes 같은 새로운 함수를 테스트 할 때, console f12 열어서 확인
jquery_append 관련
- '어떤 ==html tag== 늘리고 싶은거야?' ⭐⭐⭐⭐⭐ 를 먼저 확인
- 늘리고 싶은 tag 를 ==포괄하는 tag== 에 이름표를 붙인다.
- 그러면, 포괄하는 태그에 append 하는 식이 된다.

그런데, 변수를 txt 로 하면, 위에 q1 함수에서 입력한 값이랑 겹치는거 아냐? (overwrite) 되는거 아냐? ❓❓❓❓❓❓❓❓❓❓

728x90

저작자표시 비영리 변경금지

'[WEB & AI] (feat. 취준) > 스파르타코딩클럽_웹개발종합반' 카테고리의 다른 글

2-7_Ajax 시작하기 (0)	2023.10.06
2-6_서버-클라이언트 통신 이해하기 (4)	2023.10.05
2-4_JQuery 적용하기(포스팅 박스) (0)	2023.10.05
2-3_JQuery 다뤄보기 (2)	2023.10.02
2-2_JQuery 시작하기 (0)	2023.10.02

'[WEB & AI] (feat. 취준)/스파르타코딩클럽_웹개발종합반' Related Articles

Comments

Hello creators 🙌

2-5_Quiz_JQuery 연습하기 본문

2-5_Quiz_JQuery 연습하기

Ⅰ. 이번 회차 학습 목표 (goal)

1. 배우고자 하는 것

Ⅱ. 퀴즈 풀기 사전 파일 만들기

1. 이 코드 스니펫 복사해서 시작

Ⅲ. DJ 먼저 해보기

1. 입력한 글자가 있으면, 해당 글자로 alert 띄우기

1) 전략

2) jquery 써서 값 가져오기 #jquery_값가져오기

3) 우선 되는 코드

3) design critic

a. 튜터님 코드

2. 이메일 판별 함수

1) 해야 하는 것

2) 해보기

3) design critic

a. 튜터님 접근

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

1) 이름 입력 -> 붙이기 클릭 -> 아래 나오게 하기

a. 우선 되는 코드

b. what i learned

2) 이름 지워보기

a. 우선 되는 코드 #jquery_empty_예시코드

💭 What i learned

'[WEB & AI] (feat. 취준) > 스파르타코딩클럽_웹개발종합반' 카테고리의 다른 글

티스토리툴바