2022-08-22~2022-08-24 SpartaCoding Club 웹개발 종합반 2주차-1

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()
}