코딩 도전기_07_210706

학습 내용

- Java Script 적용 연습

(1) 빈칸 체크 함수 만들기

• 클릭 버튼을 눌렀을 때 빈칸이면 '입력하세요!', 빈칸이 아니면 입력한 값 띄우기
• jQuery - .val(), 조건문 필요

1) 값 가져오기(.val())를 이용해 빈칸의 입력 값을 가져옴

<script>
let txt = $('#input-q1').val();
</script>

2) 조건문으로 빈칸일 때, 아닐 때를 구분

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

(2) 이메일 판별 함수 만들기

• 클릭 버튼을 눌렀을 때 이메일이면(=@가 있으면) 도메인 값을 띄우고, 이메일이 아니면 '이메일이 아닙니다!' 띄우기
• jQuery - .val(), .split(), 조건문 필요

1) 값 가져오기(.val())를 이용해 빈칸의 입력 값을 가져옴

<script>
let txt = $('#input-q2').val();
</script>

2) 조건문으로 이메일일 때(=@를 포함), 아닐 때를 구분

• .includes('특정문자') : 특정문자를 포함하는지 확인

<script>
let txt = $('#input-q2').val();

if (txt.includes('@')) {}
</script>

3) .split() 이용해 도메인만 추출

<script>
let txt = $('#input-q2').val();

if (txt.includes('@')) {
alert (txt.split('@')[1].split('.')[0])
} else {
alert ('이메일이 아닙니다.')
}
</script>

(3) HTML 붙이기/지우기

• 이름붙이기 버튼을 누르면 아래 쌓이도록, 다지우기 버튼을 누르면 다 삭제되게 하기
• jQuery - .val(), $('').append(), .empty()필요

1) 값 가져오기(.val())를 이용해 빈칸의 입력 값을 가져옴

<script>
let txt = $('#input-q3').val();
</script>

2) 원하는 곳에 동적으로 삽입할 html 코드 만들기 (백틱 사용!)

<script>
let txt = $('#input-q3').val();

let temp_html = `<li>${txt}</li>`
</script>

3) .append 이용해 원하는 곳에 붙이기

<script>
let txt = $('#input-q3').val();

let temp_html = `<li>${txt}</li>`
$('#names-q3').append(temp_html)
</script>

4) .empty()이용해 내부 태그 비우기

<script>
$('#names-q3').empty()
</script>

• 강의 3번 청취 후 2번 본인 실습
• 동적으로 html 붙이기 연습 필요
• 최대한 많이 연습하여 괄호 헷갈리지 말 것