Javascript 복습
짝/홀수에 따라 다른 얼럿 띄우는 onclick 함수 만들기
<script>
let count = 1;
function hey() {
if (count % 2 == 0) {
alert('짝수입니다')
} else {
alert('홀수입니다')
}
count += 1;
}
</script>짝/홀 판단 방법
if (count % 2 == 0) // 2로 나눈 나머지가 0 은 짝수, else 는 홀수
JQuery
HTML 요소를 조작하는 편리한 Javascript를 미리 작성해둔 코드. 임포트 안하면 쓸 수 없다. 부트 스트랩과 같은 맥락.
JQuery CDN : 홈페이지에서 구글 CDN 부분을 <head></head> 사이에 복붙
CSS는 class를 쓰듯이 JQuery는 Id 값을 통해서 특정 버튼이나 인풋박스 div 등등을 가리킴. 가리키지 않으면 조작 불가능.
function(response){
let now_rate = response[1]['rate'];
$('#now-rate').text(now_rate);
}>> funtion() {
이 사이에 코드 들어감
}
포스팅 박스 제어하기 코드
function openclose() {
// id 값 post-box의 display 값이 block 이면
if ($('#post-box').css('display') == 'block') {
// post-box를 가리고
$('#post-box').hide();
} else {
// 아니면 post-box를 펴라
$('#post-box').show();
}
}
태그 내 텍스트 입력하기
1. input box의 경우
$('#post-url').val('여기에 텍스트를 입력하면!');
2. 다른 것들 - 예) 버튼의 텍스트 바꾸기 // 가리키고 싶은 버튼에 id 값을 준다음 포스팅 박스 열기
$('#btn-posting-box').text('포스팅 박스 닫기');
5. 태그 내 html 입력하기
태그 내에, 동적으로 html을 넣고 싶을 땐? (예를 들어, 포스팅되면 → 카드 추가) // 사이에 html을 넣고 싶은 태그에 id값을 주기
버튼 온클릭 속성(attribute) 추가
<button type="button" onclick="order()" class="btn btn-primary btn-order">주문하기</button>
서버-클라이언트 통신 이해하기
JSON : Key:Value로 이루어져 있음. 자료형 Dictionary와 아주 유사.
예) RealtimeCityAir 라는 키값 안에 나머지 Value가 들어있음.
클라이언트->서버 GET 요청 이해하기
API는 은행 창구와 같다. 클라이언트가 요청 할 때 "타입"이 존재 한다.
*GET -> 데이터 조회를 요청 할 때
예) 영화 목록 조회, 날씨 자료 조회...
https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967 (네이버 기생충 영화 설명 페이지)
여기서 ?를 기준으로 앞부분이 <서버 주소> 뒷부분이 [영화 번호]
? : 여기서부터 전달할 데이터가 작성된다는 의미
& : 전달할 데이터가 더 있다는 의미
예) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8
위 주소는 구글의 검색창에 다음 정보를 전달합니다.
q=아이폰 (검색어)
sourceid=chrome (브라우저 정보)
ie=UTF-8 (인코딩 정보)
*POST -> 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때
예) 회원가입, 회원탈퇴, 비밀번호 수정...
Ajax 시작하기
Ajax는 jQuery를 임포트한 페이지에서만 동작 가능.
google.com과 같은 화면에서 개발자도구를 열면, jQuery가 임포트 되어있지 않기 때문에 아래와 같은 에러가 뜸
-> Uncaught TypeError:$.ajax is not a function --- ajax라는게 없다는 뜻
Ajax기본 골격
$.ajax({
type: "GET", // GET 방식으로 요청한다.
url: "여기에 URL 입력", //요청할 url
data: {}, //요청하면서 함께 줄 데이터 (GET 요청시엔 비워두기)
success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
console.log(response) // 서버에서 준 결과를 이용해 나머지 코드를 작성
}
})
jQuery 이미지태그 src 바꾸기
<img id="img_form_url">
위 img 의 src를 변경하는 방법
$("#img_form_url").attr("src", imgurl); // 빨간 글씨-> img id값
function q1() {
$.ajax({
type: "GET",
url: "https://api.thecatapi.com/v1/images/search",
data: {},
success: function(response){
let imgurl = response[0]['url']
$('#img-cat').attr('src',imgurl)
}
})
}페이지 로딩 후 실행하기
$(document).ready(function(){
alert('다 로딩됐다')
});
Feedback _ 2주차
개인적인 사정으로 인해 2주차 강의를 3주만에 끝마치게되었다. 거기다 강의 내용도 복잡하고 개념이 생소해서 따라가는데 조금 애를 먹었지만 어찌저찌 끝냈음. 숙제를 할 땐 여전히 해설영상을 참고해야 할 수 있음. 해설 영상 없이도 뚝딱 해 낼 때 까지 반복해서 들어야겠음
'스파르타 코딩클럽 > 웹개발 종합' 카테고리의 다른 글
| TIL) HTML과 mongo DB 연동해서 서버 만들기, Flask, 4주차 숙제! 오류회고! (0) | 2022.07.16 |
|---|---|
| TIL) Python기초문법 (0) | 2022.06.29 |
| TIL) 웹의 동작 원리, HTML 의 구조, CSS기초, 부트스트랩 (0) | 2022.06.07 |
