[2주차 목표]
1. Javascript 문법에 익숙해진다.
2. jQuery로 간단한 HTML을 조작할 수 있다.
3. Ajax로 서버 API(약속)에 데이터를 주고, 결과를 받아온다.
✍️ jQuery
jQuery란 미리 작성된 javascript 코드, 라이브러리이다. 전문 개발자들이 짜둔 코드를 가져와서 사용하는 것이다. 따라서 쓰기 전에 "임포트"를 해줘야 한다.
jQuery import
https://www.w3schools.com/jquery/jquery_get_started.asp
- <head>와 </head> 사이에 google CDN (Content Delivery Network)를 복사해서 붙여넣어주면 된다.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>- 전의 실습에서 부트스트랩을 쓰기 위해 가져왔던 코드에 포함되어있다.
Selector
jQuery에서는 선택자로 id값을 사용한다.
자주쓰는 jQuery
1. input box 값을 가져오기
// 크롬 개발자도구 콘솔창에서 쳐보기
// id 값이 post-url인 곳을 가리키고, val()로 값을 가져온다.
$('#post-url').val();2. 보이기/숨기기
// 크롬 개발자도구 콘솔창에 쳐보기
// id 값이 post-box인 곳을 가리키고, hide()로 안보이게 한다.(=css의 display 값을 none으로 바꾼다)
$('#post-box').hide();
// show()로 보이게 한다.(=css의 display 값을 block으로 바꾼다)
$('#post-box').show();3. css값 가져오기
display의 속성 값을 가져온다.
$('#post-box').hide();
$('#post-box').css('display');
//result
'none'
$('#post-box').show();
$('#post-box').css('display');
//result
'block'4. 태그 내 텍스트 입력하기
1) input box인 경우
$('#post-url').val('여기에 텍스트를 입력하면!');2) 이외의 것 예)버튼의 텍스트
$('#btn-posting-box').text('포스팅 박스 닫기');5. 태그 내 html 입력하기
<div>~</div> 사이에 동적으로 html을 넣고 싶을 때
1) 버튼 넣기
let temp_html = '<button>나는 추가될 버튼이다!</button>';
$('#cards-box').append(temp_html);2) 카드 넣기
// 주의: 홑따옴표(')가 아닌 backtick(`)으로 감싸야 합니다.
// 숫자 1번 키 왼쪽의 버튼을 누르면 backtick(`)이 입력됩니다.
// backtick을 사용하면 문자 중간에 Javascript 변수를 삽입할 수 있습니다.
// 변수는 ${}안에 들어간다.
let img_url = 'https://www.eurail.com/content/dam/images/eurail/Italy%20OCP%20Promo%20Block.adaptive.767.1535627244182.jpg';
let link_url = 'https://naver.com/';
let title = '여기 기사 제목이 들어가죠';
let desc = '기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...';
let comment = '여기에 코멘트가 들어갑니다.';
let temp_html = `<div class="card">
<img class="card-img-top"
src="${img_url}"
alt="Card image cap">
<div class="card-body">
<a href="${link_url}" class="card-title">${title}</a>
<p class="card-text">${desc}</p>
<p class="card-text comment">${comment}</p>
</div>
</div>`;
$('#cards-box').append(temp_html);✍️ jQuery 연습1
나의 코드
function q1() {
if ($('#input-q1').val() == ''){
alert ("입력하세요!")
} else {
alert($('#input-q1').val())
}
// 1. input-q1의 입력값을 가져온다. $('# .... ').val() 이렇게!
// 2. 만약 입력값이 빈칸이면 if(입력값=='')
// 3. alert('입력하세요!') 띄우기
// 4. alert(입력값) 띄우기
}
function q2() {
if ($('#input-q2').val().includes("@")){
alert ($('#input-q2').val().split('@')[1].split('.')[0])
} else {
alert('이메일이 아닙니다.')
}
// 1. input-q2 값을 가져온다.
// 2. 만약 가져온 값에 @가 있으면 (includes 이용하기 - 구글링!)
// 3. info.spartacoding@gmail.com -> gmail 만 추출해서 ( .split('@') 을 이용하자!)
// let split1 = $('#input-q2').val().split('@')
// let split2 = $('#input-q2').val().split('@')[1].split('.')
// let split3 = $('#input-q2').val().split('@')[1].split('.')[0]
// 4. alert(도메인 값);으로 띄우기
// 5. 만약 이메일이 아니면 '이메일이 아닙니다.' 라는 얼럿 띄우기
}
function q3() {
let txt = $('#input-q3').val();
let temp_html = `<li>${txt}</li>`;
$('#names-q3').append(temp_html);
// 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)을 이용하면 굿!)
}
function q3_remove() {
$('#names-q3').empty();
// 1. names-q3의 내부 태그를 모두 비운다.(jQuery의 $('....').empty()를 이용하면 굿!)
}정답 예제
function q1() {
// 1. input-q1의 입력값을 가져온다.
let value = $('#input-q1').val();
// 2. 만약 입력값이 빈칸이면 if(입력값=='')
if (value == '') {
// 3. alert('입력하세요!') 띄우기
alert('입력하세요!');
} else {
// 4. alert(입력값) 띄우기
alert(value);
}
}
function q2() {
// 1. input-q2 값을 가져온다.
let email = $('#input-q2').val();
// 2. 만약 가져온 값에 @가 있으면 (includes 이용하기 - 찾아보자!)
if (email.includes('@')) {
// 3. info.spartacoding@gmail.com -> gmail 만 추출해서
// 4. alert(도메인 값);으로 띄우기
let domainWithDot = email.split('@')[1];
let onlyDomain = domainWithDot.split('.')[0];
alert(onlyDomain);
} else {
// 5. 만약 이메일이 아니면 '이메일이 아닙니다.' 라는 얼럿 띄우기
alert('이메일이 아닙니다.');
}
}
function q3() {
// 1. input-q3 값을 가져온다.
let newName = $('#input-q3').val();
if (newName == '') {
alert('이름을 입력하세요');
return;
}
// 2. 가져온 값을 이용해 names-q3에 붙일 태그를 만든다. (let temp_html = `<li>${가져온 값}</li>`)
let temp_html = `<li>${newName}</li>`;
// 3. 만들어둔 temp_html을 names-q3에 붙인다.(jQuery의 $('...').append(temp_html)을 이용하면 굿!)
$('#names-q3').append(temp_html);
}
function q3_remove() {
// 1. names-q3의 내부 태그를 모두 비운다.(jQuery의 $('....').empty()를 이용하면 굿!)
$('#names-q3').empty();
}✋ 기억할 것
1. 변수를 이용해서 코드를 깔끔하게 만들자.
2. id를 입력할 때 #을 잘 붙이자.
3. 백틱 안에 변수를 쓰는 모양${text}을 잘 기억하자.
훈이야 화이팅