jQuery + Javascript의 조합을 연습
1.
function q1() {
// 1. input-q1의 입력값을 가져온다. $('# .... ').val() 이렇게!
// 2. 만약 입력값이 빈칸이면 if(입력값=='')
// 3. alert('입력하세요!') 띄우기
// 4. alert(입력값) 띄우기
let inputText = $('#input-q1').val()
if (inputText==''){
alert('입력하세요!')
}
else {
alert(inputText)
}
}
2.
function q2() {
// 1. input-q2 값을 가져온다.
// 2. 만약 가져온 값에 @가 있으면 (includes 이용하기 - 구글링!)
// 3. info@gmail.com -> gmail 만 추출해서 ( .split('@') 을 이용하자!)
// 4. alert(도메인 값);으로 띄우기
// 5. 만약 이메일이 아니면 '이메일이 아닙니다.' 라는 얼럿 띄우기
let inputEmail = $('#input-q2').val()
if (inputEmail.includes('@')) {
alert(inputEmail.split('@')[1].split('.')[0])
}
else {
alert('이메일이 아닙니다.')
}
console창에서 .split 나눈 후 ( inputEmail.split('@')[1].split('.')[0] ) 적용하면 좋은거 같음
let inputEmail = 'abc@gmail.com'
inputEmail.split('@')
(2) ['abc', 'gmail.com']
inputEmail.split('@')[1]
'gmail.com'
inputEmail.split('@')[1].split('.')[0]
'gmail'
3-1.
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)을 이용하면 굿!)
let inputPush = $('#input-q3').val();
let temp_html = `<li>${inputPush}</li>`;
$('#names-q3').append(temp_html);
}
3-2.
function q3_remove() {
// 1. names-q3의 내부 태그를 모두 비운다.(jQuery의 $('....').empty()를 이용하면 굿!)
$('#names-q3').empty()
}
'Sparta 웹개발 종합반' 카테고리의 다른 글
2023-01-09 2주차 ajax (0) | 2023.01.09 |
---|---|
2023-01-05 2주차 재수강 JQuery (0) | 2023.01.05 |
2023-01-05 웹개발 종합반 1주차 재수강 (0) | 2023.01.05 |
2022-08-22~2022-08-24 SpartaCoding Club 웹개발 종합반 2주차-2 (0) | 2022.08.25 |
2022-08-15~2022-08-21 SpartaCoding Club 웹개발 종합반 1주차 (0) | 2022.08.21 |