이어지는 복습 jQuery를 Vanilla JS로 바꾸기
사전강의 2주차 강의에서 jQuery를 사용하는 퀴즈가 있었는데
이를 바닐라 스크립트를 이용해서 풀어보고자 했다.
문제
위 코드가 jQuery, 아래 박스 안의 코드가 바닐라 스크립트!
function q1() {
if($('#input-q1').val() ==''){
alert('입력하세요!')
} else {
alert($('#input-q1').val());
}
}
function q1() { let inputBox = document.getElementById('input-q1').value; if (inputBox == '') { alert('입력하세요!') } else { alert(inputBox) } }
function q2() {
let mail = $('#input-q2').val();
if(mail.includes('@')){
alert(mail.split('@')[1].split('.')[0])
} else {
alert('이메일이 아닙니다용')
}
}
function q2() { let inputBox2 = document.getElementById('input-q2').value; if (inputBox2.includes('@')) { alert(inputBox2.split('@')[1].split('.')[0]) } else { alert('이메일이 아닙니다용') } }
function q3() {
let txt = $('#input-q3').val();
$('#names-q3').append(`<li>${txt}</li>`)
}
function q3() { let inputBox3 = document.getElementById('input-q3').value; let createli = document.createElement('li'); createli.innerHTML = `${inputBox3}` document.getElementById('names-q3').appendChild(createli); }
function q3_remove() {
$('#names-q3').empty();
}
function q3_remove() { document.getElementById('names-q3').innerHTML = ''; document.getElementById('names-q3').remove(); } 두 코드 다 같은 기능을 하는데 자세한 차이는 모르겠다..
Author And Source
이 문제에 관하여(이어지는 복습 jQuery를 Vanilla JS로 바꾸기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@2_juzzang/이어지는-복습-jQuery를-Vanilla-JS로-바꾸기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)