Sparta 웹개발 종합반 2주차 1~8강
01. 2주차 오늘 배울 것
jQuery,Ajax
HTML파일을 받았다고 가정하고, Javascript로 다시 서버에 데이터를 요청하고 받는 방법 배운다.
Query를 이용해 Javascript로 HTML을 쉽게 제어하고
Ajax를 이용해 다시 서버에 데이터를 요청하고 받는다.
02. Javascript 복습
<script>
let count=1; //전역변수
function hey(){
if(count % 2 ==0) {
alert('짝수입니다!')
} else{
alert('홀수입니다!')
}
count+=1;
//count 사라짐
alert('안녕')
}
</script>결과
03. JQuery 시작하기
JQuery란?
미리 작성된 javascript 코드
임포트를 해야한다.
브라우저마다 길게 다르게 써야됨(복잡,브라우저 호환성 문제)
해결 =>HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것. 라이브러리를 만든다.
JQuery
document.getElementById("element").style.display = "none";
Javascript
$('#element').hide();
Javascript가 간단하게 쓰임을 확인할수 있다.
04. JQuery 다뤄보기
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> //이미 부트스트랩에 써있음 그래서 지운다.<head> 와 </head> 사이에 아래를 넣는다.
<label>아티클 URL</label>
<input type="email" class="form-control" id="article-url" aria-describedby="emailHelp"
placeholder="">input에 id을 바꾸고
label에 있는 for="exampleInputEmail"은 짝이 안맞는다는 뜻으로 지워도 된다.
1. input 박스의 값을 가져와보기
아티클 Url이 세종대왕에서 장영실로 바뀜
2. div 보이기 / 숨기기
<div class="posting-box" id="post-box"> //id="post box" 추가
<div class="form-group">
<label>아티클 URL</label>
<input type="email" class="form-control" id="article-url" aria-describedby="emailHelp"
placeholder="">
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">간단 코멘트</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-primary">기사저장</button>
</div>
3. css의 값 가져와보기 (우리는 display 속성 값을 가져오기)
postbox가 있을때는 display결과는 block이다.
postbox를 숨긴후에는 diplay결과는 none이 나온다.
4. 태그 내 텍스트 입력하기
<div class="wrap">
<div class="jumbotron">
<h1 class="display-4">나 홀로 링크 메모장!</h1>
<p class="lead">중요한 링크를 저장해두고, 나중에 볼 수 있는 공간입니다</p>
<hr class="my-4">
<p class="lead">
<a onclick="hey()" id="btn-postbox" class="btn btn-primary btn-lg" href="#" role="button">포스팅박스열기</a>
</p> //onclick,class,id 순서는 상관 없이 id="btn-"postbox"를 추가
</div>
5. 태그 내 html 입력하기
` (백틱)
temp_html html처럼 생긴 문자열이다.
05. JQuery 적용하기(나홀로메모장)
<p class="lead"> //onclick 추가
<a onclick="openclose()" id="btn-posing-box" class="btn btn-primary btn-lg" href="#" role="button">포스팅박스열기</a>
</p><script>
function openclose() {
let status = $('#post-box').css('display');
console.log(status)
}
</script>
포스팅박스 있는지 없는지 확인하기 위해 위와 같이 실행하면 console창에 block이 뜨는것을 확인할수 있다.
포스트박스 제어하기
<script>
function openclose() {
let status = $('#post-box').css('display');
if(status == 'block'){
$('#post-box').hide();
}
else{
$('#post-box').show();
}
}
</script>
포스팅박스 열기' 버튼의 글씨 바꿔주기
<script>
function openclose() {
let status = $('#post-box').css('display');
if(status == 'block'){
$('#post-box').hide();
$('#btn-posing-box').text('포스팅박스 열기');
}
else{
$('#post-box').show();
$('#btn-posing-box').text('포스팅박스 닫기');
}
}
</script>
posting-box를 시작부터 감춰두기 (css의 display:none 속성!)
.posting-box{
width:500px;
margin:0px auto 30px auto;
border: 5px solid black;
border-radius:10px;
padding:30px;
display: none;
}
jQuery(라이브러리)와 javascript를 잘 써야된다.
06. Quiz_JQuery 연습하기
1. 빈칸 체크 함수 만들기
입력값을 가져오면 console.log를 하여 콘솔창에 잘 나오는지 직접 확인해본다.
script 안에서 코드를 쓴다.
1-1. 버튼을 눌렀을 때 입력한 글자로 얼럿 띄우기[완성본]1-2. 버튼을 눌렀을 때 칸에 아무것도 없으면 "입력하세요!" 얼럿 띄우기
내가 쓴 코드
function q1() {
// 1. input-q1의 입력값을 가져온다. $('# .... ').val() 이렇게!
let txt = $('#input-q1').val();
// 2. 만약 입력값이 빈칸이면 if(입력값=='')
if(txt =='block'){
alert('입력하세요!')
}
// 3. alert('입력하세요!') 띄우기
else{
alert('txt')
}
// 4. alert(입력값) 띄우기
}정답 코드
function q1() {
// 1. input-q1의 입력값을 가져온다.
let value = $('#input-q1').val();
// 2. 만약 입력값이 빈칸이면 if(입력값=='')
if (value == '') {
// 3. alert('입력하세요!') 띄우기
alert('입력하세요!'); }
else {
// 4. alert(입력값) 띄우기
alert(value); } }
* let txt를 하여 값을 대입 시켜줘야한다.
* if (txt =='') //''가 빈칸을 의미
*alert('txt')가 아닌 alert(txt)
2. 이메일 판별 함수 만들기
2-1. 버튼을 눌렀을 때 입력받은 이메일로 얼럿 띄우기
2-2. 이메일이 아니면(@가 없으면) '이메일이 아닙니다'라는 얼럿 띄우기
[완성본]2-3. 이메일 도메인만 얼럿 띄우기
내가 쓴 코드
function q2() {
// 1. input-q2 값을 가져온다.
let txt2 =$('#input-q2').val();
// 2. 만약 가져온 값에 @가 있으면 (includes 이용하기 - 구글링!)
if(includes('@',txt2)) {
// 3. info.spartacoding@gmail.com -> gmail 만 추출해서 ( .split('@') 을 이용하자!)
txt3 = txt2.split('@')[1].split('.');
// 4. alert(도메인 값);으로 띄우기
alert(txt3)
}
else{
// 5. 만약 이메일이 아니면 '이메일이 아닙니다.' 라는 얼럿 띄우기
alert('이메일이 아닙니다')
}
}
정답 코드
function q2() {
// 1. input-q2 값을 가져온다.
let txt =$('#input-q2').val();
// 2. 만약 가져온 값에 @가 있으면 (includes 이용하기 - 구글링!)
if(txt.includes('@')) {
// 3. info.spartacoding@gmail.com -> gmail 만 추출해서 ( .split('@') 을 이용하자!)
let domain = txt.split('@')[1].split('.')[0];
alert(domain)
// 4. alert(도메인 값);으로 띄우기
alert(txt3)
}
else{
// 5. 만약 이메일이 아니면 '이메일이 아닙니다.' 라는 얼럿 띄우기
alert('이메일이 아닙니다')
}
}검색은 javascript 문자열 포함 체크
구글링 한후 console.log(txt.includes('@'))로 확인
=>콘솔창에 제대로 나온다.
*includes('@',txt2)->txt.includes('@')
*txt3 = txt2.split('@')[1].split('.'); -> let domain = txt.split('@')[1].split('.')[0]; alert(domain)
정의도 안해놓고 txt3을 쓰고 있었다.
ex)sy@naver.com이면
txt.split('@')는
[sy,naver.com]이 나옴
txt.split('@')[1]
naver.com
txt.split('@')[1].split('.')[0]
naver
*함수 안에 쓰는 거라 txt를 또 써도 되는거 같다.
3. HTML 붙이기/지우기 연습
3-1. 이름을 입력하면 아래 나오게 하기[완성본]3-2. 다지우기 버튼을 만들기
내가쓴 코드
function q3() {
let txt =$('#input-q2').val();
let temp_html = '<li>${txt}</li>'
$('#input-q2').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() {
// 1. names-q3의 내부 태그를 모두 비운다.(jQuery의 $('....').empty()를 이용하면 굿!)
txt=$('#input-q2').empty()
}정답코드
function q3() {
let txt =$('#input-q2').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() {
// 1. names-q3의 내부 태그를 모두 비운다.(jQuery의 $('....').empty()를 이용하면 굿!)
$('#names-q3').empty()
}
* $('#input-q2').append(temp_html) -> $('#names-q3').append(temp_html)
<ul id="names-q3">
<li>세종대왕</li>
<li>임꺽정</li>
</ul>names-q3을 이용해야지 그 밑에 추가 시킬수 있음을 알수 있다.
*txt=$('#input-q2').empty() -> $('#names-q3').empty()
txt는 입력을 저장하는 역할을 한다.
input-q2를 지우는게 아니라 names-q3을 지워야한다.
07. 서버-클라이언트 통신 이해하기
서버→클라이언트: "JSON"을 이해하기
Ajax
javascript로 페이지 전환없이 서버에서 값을 받아올수 있는 방법
api를 이해해야한다.
서버에서 클라이언트에게 여기로 요청하라고 열어놓은 창구
클라이언트가 데이터 줄거 없냐고 물으면 서버가 클라이언트한테 데이터를 가져가라고 한다.
이것을 내려줄때 포맷이 있는데 이를 JSON이라고 한다.
JSON은 딕셔너리와 리스트의 생김새와 똑같다.
realtimeCityAir 라는 키에 딕셔너리 하나가 들어있다.
list_total_count라는 키에 25라는 value가
result라는 키에 딕셔너리가
row라는 키에 리스트가
클라이언트→서버: GET 요청 이해하기
클라이언트 요청할때 타입이 다르다
*GET → 통상적으로! 데이터 조회(Read)를 요청할 때 예) 영화 목록 조회
* POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때 예) 회원가입, 회원탈퇴, 비밀번호 수정
나머지 데이터를 바꾸는거
브라우저에 엔터 치는 행위
get의 요청하는 url
https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967
* 서버 주소: https://movie.naver.com/movie/bi/mi/basic.nhn
https://movie.naver.com/ ㅇㅇ은행 ㅇㅇ지점
movie/bi/mi/basic.nhn ㅇㅇ은행 ㅇㅇ지점 안에서의 창구이름정도
* 영화 정보: code=161967
고객이 가지고 가는 데이터
code는 누가 정함?
요청을 하는 클라이언트 프로그래머와 요청을 받는 서버 프로그래머 사이에서 미리 약속
GET 방식으로 데이터를 전달하는 방법 ? :
여기서부터 전달할 데이터가 작성된다는 의미입니다.
& : 전달할 데이터가 더 있다는 뜻입니다.
예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8
위 주소는 google.com의 search 창구에 다음 정보를 전달
q=아이폰 (검색어)
=>아이폰이라는 검색어로 검색 결과 줘
sourceid=chrome (브라우저 정보)
ie=UTF-8 (인코딩 정보)
08. Ajax 시작하기
Ajax는 jQuery를 임포트한 페이지에서만 동작 가능
Ajax 기본 골격
링크에서 내려주는 모든 값이 response로 들어간다.
type은 POST,GET 중에 GET인가보다
data{}는 가져가는 거 없다-post에서 씀
