usop의 개발일지 usop의 개발일지

영화 API 주소 http://spartacodingclub.shop/post 자바스크립트 맛보기 script를 사용하여 '포스팅박스' 버튼 클릭시(onclick) 추가 한 명령이 실행되게한다. 나홀로 링크 메모장! 중요한 링크를 저장해두고, 나중에 볼 수 있는 공간입니다 포스팅박스 열기 아티클 URL 간단 코멘트 기사저장 여기 기사 제목이 들어가죠 기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산... 여기에 코멘트가 들어갑니다. 여기 기사 제목이 들어가죠 기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산... 여기에 코멘트가 들어갑니다. 여기 기사 제목이 들어가죠 기..

* 참고 * 이번 OpenAPI는 list 형식으로 되어있다 고양이 url : https://api.thecatapi.com/v1/images/search 댕댕이 url : https://api.thedogapi.com/v1/images/search * 참고 * 위 img 의 src를 변경하는 방법 $("#img_form_url").attr("src", imgurl); 매우 매우 간단한 랜덤 고양이 사진 띄우기 ! 스타트~ 이미지 url 데이터를 가져와야한다. 이번 API는 앞서 말했듰이 list 형식으로 불러와진다. API 첫번째 데이터인 [0]에 ['url'] 데이터를 imgurl 변수에 담아준 후 attr("src", imgurl); 을 id = img-cat 에 담아주면 끝~ 누를때 마다 랜덤 고..

QUIZ 02 - 따릉이 API를 이용하여 실시간 따릉기 현황 보기 구현 따릉이 url : http://spartacodingclub.shop/sparta_api/seoulbike html 뼈대는 참고. 앞선 QUIZ 01 문제와 유사하니 복습하는 시간이다 생각하고 풀어보자! 우선 뼈대에 url 과 필요한 데이터 값을 변수에 담아주고 잘 담아졌는지 콘솔창에 확인해보자 -필요 데이터- /** 거치대 위치 stationName , 거치대 수 rackTotCnt, 현재 거치된 따릉이 수 parkingBikeTotCnt **/ 이번엔 을 사용했으니 temp_html 에 를 사용하여 값을 담아준다. empty()로 업데이트 버튼 클릭시 초기화 한 후 불러오게 하고 '거치된 따릉이 수' 가 5개 미만인 경우 빨간색..

Ajax - QUIZ 01. 서울시 OpenAPI 를 사용하여 업데이트 버튼을 누를 때마다 실시간으로 미세먼지 데이터 불러오기 OpenAPI 주소 : http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99 기본 html윤곽은 맨 아래 '' 를 참고. 우선 API에서 rows에 값이 잘 들어오는지 콘솔창에 찍어보자 잘 나오는 것을 확인했다. 그렇다면 지역과 미세먼지 값을 다시 불러와 변수 temp_html = ` 지역(gu_name) : 미세먼지값(gu_mise) ` 담아준 후 names-q1 뒤에 담아주자 (append) 정상적으로 업데이트가 되는 것을 확인했다. 다음은 업데이트 버튼이 누르면 기존에 ..

* Ajax를 연습하기 앞서 주의사항 * ## jquery 를 꼭 임포트 해놓아야 Ajax를 사용할 수 있다! - Ajax 의 기본 골격 (참고용) $.ajax({ type: "GET", url: "여기에URL을입력", data: {}, success: function(response){ console.log(response) } }) - 연습하기 (서울시 미세먼지API) type은 GET ( 정보를 가져오기만 할 것이기 때문에 get을 사용해주자) 서울시 미세먼지API 주소를 가져와보았다. http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99 주소를 url 에 복사하여 넣어보자. 정상적으로 데이터를..

jQuery + Javascript의 조합을 연습하자! 1. 빈칸 체크 함수 만들기 1-1. 버튼을 눌렀을 때 입력한 글자로 얼럿 띄우기 [완성본]1-2. 버튼을 눌렀을 때 칸에 아무것도 없으면 "입력하세요!" 얼럿 띄우기 클릭 2. 이메일 판별 함수 만들기 2-1. 버튼을 눌렀을 때 입력받은 이메일로 얼럿 띄우기 2-2. 이메일이 아니면(@가 없으면) '이메일이 아닙니다'라는 얼럿 띄우기 [완성본]2-3. 이메일 도메인만 얼럿 띄우기 클릭 3. HTML 붙이기/지우기 연습 3-1. 이름을 입력하면 아래 나오게 하기 [완성본]3-2. 다지우기 버튼을 만들기 이름 붙이기 다지우기 세종대왕 임꺽정

이번 시간은 quiz 문제를 풀어보았다. # 1번 문제 - 버튼을 눌렀을 때 입력한 글자로 얼럿 띄우기 (버튼을 눌렀을 때 칸에 아무것도 없으면 "입력하세요!" 얼럿 띄우기) 1. 빈칸 체크 함수 만들기 1-1. 버튼을 눌렀을 때 입력한 글자로 얼럿 띄우기 [완성본]1-2. 버튼을 눌렀을 때 칸에 아무것도 없으면 "입력하세요!" 얼럿 띄우기 클릭 우선 문제 내용을 확인해보자 input type = text 의 id 값 'input-q1" 과 onclick 함수 'q1' 이 주어졌다. 먼저 q1 함수를 만들어주고 그 안에 내용을 담아주어야겠다. function q1() { let txt = $('#input-q1').val(); console.log(txt); } txt 라는 함수안에 input-q1의 값..

지난 시간에 hide() , show()를 통해 버튼을 누르면 보였다 사라졌다하는 기능까지 해두었으니 이번 시간에는 포스팅 박스의 열기, 닫기 버튼을 구현해보자! 'btn-posting-box'가 hide() 닫혔을때 버튼에는 '열기'로 표시되어야 하니 위에 코드처럼 적어주면 된다. show()도 마찬가지로 열려있을때 버튼에는 '닫기'로 표시해주었다. 버튼이 잘 작동되는지 확인한 후 마지막으로 포스팅박스(posting-box)에 display : none; 을 주어 처음 들어왔을 때 포스팅박스가 닫혀있는 상태로 만들어주었다. 자바스크립트 맛보기 script를 사용하여 '포스팅박스' 버튼 클릭시(onclick) 추가 한 명령이 실행되게한다. 나홀로 링크 메모장! 중요한 링크를 저장해두고, 나중에 볼 수 있..