하는 내내.. 그래서 자바스크립트를 왜 하는건데..?
콘솔을 왜 보는건데..? 이건 진짜 바뀌는게 아니잖아!!... 왜 하지..?
하는 생각뿐이라 하기 싫었는데..😖
아.. 직접 해보니까 알겠다.. 편하잖아!?
모르겠으면 무조건 구글링하기
구글링 하는 습관 들이기!
jQuery
- html의 요소들을 조작하는 편리한 자바스크립트를 미리 작성해둔 것
- 쓰기 전에 미리 '임포트' 할 것
<head>
안에 임포트 해주기<head>
안에 넣어주기<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<input>
만들어주기<input-q1>
로 고쳐주고 스크립트를 <head>
안에 <script>
</script>
<div class="question-box">
<h2>1. 빈칸 체크 함수 만들기</h2>
<h5>1-1. 버튼을 눌렀을 때 입력한 글자로 얼럿 띄우기</h5>
<h5>[완성본]1-2. 버튼을 눌렀을 때 칸에 아무것도 없으면 "입력하세요!" 얼럿 띄우기</h5>
<input id="input-q1" type="text" /> <button onclick="q1()">클릭</button>
</div>
값이 없을 경우 뜨지 않지만 빈칸 안에 값이 있을 경우 그 값으로 조회된다
$(`#input-q1').val()
값을 입력해서 조회하면 빈칸 안에 입력한 값이 채워진다
$('#input-q1').val('메롱')
function
val
alert
alert
function q1() {
let txt = $('#input-q1').val()
if (txt == '') {
alert('입력하세요!')
} else {
alert(txt)
}
<input-q2>
로 고쳐주고 스크립트를 function q1
밑에 입력 <div class="question-box">
<h2>2. 이메일 판별 함수 만들기</h2>
<h5>2-1. 버튼을 눌렀을 때 입력받은 이메일로 얼럿 띄우기</h5>
<h5>2-2. 이메일이 아니면(@가 없으면) '이메일이 아닙니다'라는 얼럿 띄우기</h5>
<h5>[완성본]2-3. 이메일 도메인만 얼럿 띄우기</h5>
<input id="input-q2" type="text" /> <button onclick="q2()">클릭</button>
</div>
빈칸 안에 들어갈 예상 값을 myemail로 설정하기
let myemail = 'abc@naver.com'
도메인만 alert
띄우기 위해 발라내기
1. 결과값 : naver.com (@을 기준으로)
myemail.split('@')[1]
2. 결과값 : naver (@과 .을 기준으로)
myemail.split('@')[1].split('.')[0]
function
==
('@') == ture
alert
에 발라낸 도메인 값만 뜨게 하기alert
function q2() {
let txt = $('#input-q2').val()
if (txt.includes('@') == true) {
alert(txt.split('@')[1].split('.')[0])
} else {
alert('이메일이 아닙니다.')
}
<input-q3>
로 고쳐주고 스크립트를 function q2
밑에 입력<div class="question-box">
<h2>3. HTML 붙이기/지우기 연습</h2>
<h5>3-1. 이름을 입력하면 아래 나오게 하기</h5>
<h5>[완성본]3-2. 다지우기 버튼을 만들기</h5>
<input id="input-q3" type="text" placeholder="여기에 이름을 입력" />
<button onclick="q3()">이름 붙이기</button>
<button onclick="q3_remove()">다지우기</button>
<ul id="names-q3">
<li>세종대왕</li>
<li>임꺽정</li>
</ul>
</div>
<li></li>
붙여주기.append(temp_html)
function q3() {
let txt = $('#input-q3').val()
let temp_html = `<li>${txt}</li>`
$('#names-q3').append(temp_html)
}
remove
.empty(빈칸)
function q3_remove() {
$('#names-q3').empty()
}