01.
Javascript 연습 - jQuery 랑 Ajax 배울거임
홀짝 판별 함수 만들기
<button onclick="hey()"> </button>
버튼을 누르면 hey라는 함수 실행
숫자를 세는 기능 넣어주기
let count = 0
function hey() {
count += 1 // 1씩 더해준다
if (count % 2 == 0) {
alert ('짝') }
else{'홀'} }
02.
jQuery - HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것. 라이브러리!
하지만 쓰기전에 <head>사이에 주소를 임포트를 해야함
ex)
document.getElementById("element").style.display = "none"; -//Javascript
vs
$('#element').hide(); //jQuery
css에서는 class를 정해서 가져와썼지만
jQuery에서는 id를 정해서 가져온다.
외워서 쓰는거 절대 아니고 필요한거 그때그때 가져와 쓰면 됌.
03.
스파르타 피디아에 JQuery를 이용해 카드를 넣어보기 (콘솔창에서만 해봄)
let temp_html = `` ; //백틱 사이에 html처럼 생겼으나 사실은 그냥 문자열인 내용을 넣어준다)
$('#cards-box). append(temp_html); //해서 백틱 사이의 내용이 html화 되어 나타난다
jquery 쓴거
append // 백틱 내용 넣기
show// 보이기
hide//
val// 넣은 변수 보이기?
포스트 박스 hide, show 하기 전에
<script>에 .mypost에서
display : none; //처음에 들어가서 안 보이게 해줌
포스트박스 <div>에 id 정해줌
실행하고 싶은 버튼이나 input에 onclick-='function이름()'
script에 가서 funtion 이름() {
$('#들어갈곳 id'). 기능()
}
실제로 해보면 연습해보는데, 원리는 맞으나 실행이 안 되는 경우가 많다. 철자, 괄호, 따옴표 실수인 경우 많음
06. 퀴즈로 연습해봄
복잡해보이는 jquery를 일단 txt로 정해둠
let txt = $('# id').val();
만약 칸에 아무것도 없다면
if(txt==''){
}
텍스트가 @를 포함한다면
if(txt.includes(' @ ')){
}
@로 나눠라 (저번에 배움)
txt.split('@')
클릭 눌렀을 때 나타나길 원하는 형식을 temp_html로 정해놓을 수 있다.
let temp_html = `<li>${txt}</li>'
// 여기에서 ${txt}부분은 혼자했을 때 전혀 모르겠어서 강사님 보고 따라함. ${}를 왜 넣는지 모르겠음 걍 외우쟈
jquery 쓴거
empty // 비움
08.
JSONview를 다운받아서
Openapi 정보를 보기 좋게 만듦
클라이언트가 서버의 api에 정보를 요청할 때 2가지 종류 있음
* GET → 통상적으로! 데이터 조회(Read)를 요청할 때
예) 영화 목록 조회
* POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때
예) 회원가입, 회원탈퇴, 비밀번호 수정
서버주소 구성
ex)
https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967
?를 기준으로 앞은 서버주소 뒤는 영화번호
? : 여기서부터 전달할 데이터가 작성된다는 의미입니다.
& : 전달할 데이터가 더 있다는 뜻입니다.
예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8
위 주소는 google.com의 search 창구에 다음 정보를 전달합니다!
q=아이폰 (검색어)
sourceid=chrome (브라우저 정보)
ie=UTF-8 (인코딩 정보)
09.
Ajax 는 jQuery를 임포트 하지 않으면 쓸 수 없음. 서로 같이 쓰는 그런건가봄.
기본 틀 + 설명 (매번 복사해서 쓰면 될 듯)
$.ajax({
type: "GET", // GET 방식으로 요청한다.
url: "http://spartacodingclub.shop/sparta_api/seoulair",
data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
}
})
10. 미세먼지 open api를 이용하여 연습
11. 따릉이 open api를 이용하여 연습
url에 open api주소를 먼저 넣는다
실제 주소에 들어가서 내가 원하는 정보가 어디에 있는지 확인한다.
정보 찾아서 꺼내는 방법
이름을 정해주고 알맞은 카테고리를 순서대로 넣는다
let rows = response['getStationList']['row']
숫자 증가하게 해서 자료를 다 불러온다.
for(let i = 0; i < rows.length; i++){
let name = rows[i]['sationName'] //원하는 상세정보 찾기
}
조건에 따라 다르게 표시하려면 먼저 temp_html를 빈것으로 두고
let temp_html = ' ' ;
조건에 따라 다르게 설정해준다
if (parking < 5) {
temp_html = <tr class= 'bad'> .......... } //하나는 클래스를 넣어 <script>에 가서 red 색상을 넣어 줬다.
else { <tr> ............}
jQuery append 이용해서 나타내줌
12. 랜던 르탄이 api 이용하여 연습
필요한 이미지와 텍스트 정보에 이름을 정해준다
let url = response['url']
let msg = response['msg']
이미지와 텍스트 가져온다.
$('# 위치 id).attr('src', url); //정해진 이름들은 따옴표 없이 가져왔다.
$('# 위치 id).text(msg);
jQuery 쓴것
attr('src', ) //이미지 가져오는
text()//텍스트 가져오는
숙제
온도부분에 뭐를 넣어야하는지 몰라서 처음에는
<input>넣었다가 상자가 생겨서 그 다음에는 <text>를 썼는데 뒤에 도가 자꾸만 앞으로 들어감
나중에 설명보고 따라서 <span> 넣음
로딩후 호출하기
$(document).ready(function(){
});
온도부분에 따로 이름을 지어주고 넣어야하는 줄 알고
let 써서 이름도 따로 지어서 넣었다가 나중에 답보고 단순하게 고침
'개발자 되는 중 > 개발 공부' 카테고리의 다른 글
| 스파르타 코딩 SQL 개발일지 3주차 (1) | 2022.09.22 |
|---|---|
| 스파르타 코딩 SQL 개발일지 2주차 (0) | 2022.09.20 |
| 스파르타 코딩 SQL 개발일지 1주차 (0) | 2022.09.15 |
| 스파르타 코딩 웹 개발 개발일지 3주차 (0) | 2022.08.27 |
| 스파르타 코딩 웹 개발 개발일지 1주차 (0) | 2022.08.22 |