📢jQuery + Javascript의 조합을 연습하자!
이것처럼 만들기
🎈1. 빈칸 체크 함수 만들기
1-1. 버튼을 눌렀을 때 입력한 글자로 얼럿 띄우기
[완성본]1-2. 버튼을 눌렀을 때 칸에 아무것도 없으면 "입력하세요!" 얼럿 띄우기
클릭을하면 input에 있는 입력값을 가지고 와야 된다.
let txt = $('#input-q1').val();
괄호 안에 id 써주기
txt잘 들어오는지 console.log(txt)
로 확인
console창을 띄우고 브라우저 입력창에 글자를 치고 클릭 누르기
console창에 찍히는것 확인
클릭 눌렀을 때 값을 가져와서 찍어주고 있기 때문.
만약에 txt가 빈칸이면
alert ('입력하세요!')
아니면
txt를 그대로 띄워줘라
🎈2. 이메일 판별 함수 만들기
2-1. 버튼을 눌렀을 때 입력받은 이메일로 얼럿 띄우기
2-2. 이메일이 아니면(@가 없으면) '이메일이 아닙니다'라는 얼럿 띄우기
[완성본]2-3. 이메일 도메인만 얼럿 띄우기
마찬가지로 입력값을 가져오고
똑같이 console로 확인을 해볼것이다.그전에
javascript문자열 포함 체크 구글링 후
예시가 'aaa'.includes('c',33)
포함되어있으면 true 아니면 false라 한다.
console.log(txt) 여기다
console.log(txt.includes('@'))
'@'미포함,'@'포함 해서 true/false 찍히는지 확인해본다.
간편하게 alert으로도 확인해본다.
let domain=
이라고 찍어놓고
console에서 split연습을하고 나온값을 복붙한다.
alert 내용을 도메인으로 넣고 else도 마저 넣는다.
🎈3. HTML 붙이기/지우기 연습
3-1. 이름을 입력하면 아래 나오게 하기
[완성본]3-2. 다지우기 버튼을 만들기
입력값가져오기.
let txt = $('#input-q3').val();
temp_html을 붙여준다.
let temp_html = `<li>${txt}</li>`
찍어보기
console.log(temp_html)
$('#...').append(temp_html)붙일때 ('#...')안에는
q3의 id값을 붙인다.
$('#names-q3').append(temp_html)
🎈다지우기
$('#...').empty()
이라고한다.괄호에 id값을 넣어보자.
function q3_remove() {
$('#names-q3').empty()
}
