개발이야기

ajax 연습 http://spartacodingclub.shop/ajaxquiz/03 JQuery 연습하고 가기! 3. 랜덤 고양이 사진 API를 이용하기 예쁜 고양이 사진을 보여주세요 업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다. 고양이를 보자 spartacodingclub.shop 고양이 openapi https://api.thecatapi.com/v1/images/search ajax 완성 JQuery+Ajax의 조합을 연습하자! 3. 랜덤 고양이 사진 API를 이용하기 예쁜 고양이 사진을 보여주세요 업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다. 고양이를 보자 https://www.google.com/images/branding/googlelogo/1x/googlelogo..

ajax 연습 jQuery + Ajax의 조합을 연습하자! 2. 서울시 OpenAPI(실시간 따릉이 현황)를 이용하기 모든 위치의 따릉이 현황을 보여주세요 업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다. 업데이트 거치대 위치 거치대 수 현재 거치된 따릉이 수 102. 망원역 1번출구 앞 22 0 103. 망원역 2번출구 앞 16 0 104. 합정역 1번출구 앞 16 0 ajax 완성 jQuery +Ajax의 조합을 연습하자! 2. 서울시 OpenAPI(실시간 따릉이 현황)를 이용하기 모든 위치의 따릉이 현황을 보여주세요 업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다. 업데이트 거치대 위치 거치대 수 현재 거치된 따릉이 수 따릉이 openapi http://spartacodingclu..

ajax 연습 jQuery+Ajax의 조합을 연습하자! 1. 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기 모든 구의 미세먼지를 표기해주세요 업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다. 업데이트 중구 : 82 종로구 : 87 용산구 : 84 은평구 : 82 ajax 보기 http://spartacodingclub.shop/ajaxquiz/01 미세먼지 openapi http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99 ajax기본골격 $.ajax({ type: "GET", url: "여기에URL을입력", data: {}, success: function(response){ co..

Ajax 시작하기 ※절대 이해하려하지말고 갖다쓰기~~~! 크롬 개발자 도구에 다음과 같이 써보세요 참고! Ajax는 jQuery를 임포트한 페이지에서만 동작 가능합니다. 즉, http://google.com/ 과 같은 화면에서 개발자도구를 열면, jQuery가 임포트 되어있지 않기 때문에 아래와 같은 에러가 뜹니다. Uncaught TypeError: $.ajax is not a function → ajax라는 게 없다는 뜻 [코드스니펫] 미세먼지 OpenAPI http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99 [코드스니펫] Ajax 기본 골격 $.ajax({ type: "GET", url: "여..

자바스트립트로 페이지 전환없이 서버에서 값를 받아올수 있는 방법 서버→클라이언트: "JSON"(포멧)을 이해하기 -서울시 OPNEAPI http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99 -JSON(제이슨) https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=ko JSONVue Validate and view JSON documents chrome.google.com JSON은, Key:Value로 이루어져 있습니다. 자료형 Dictionary와 아주- 유사하죠 위 예제에서는 RealtimeCit..

1. let txt=$('#input-q1').val(); console.log(txt) 로 작동하는지 확인 후 if문 넣음 function q1() { let txt=$('#input-q1').val(); if(txt=='') { alert('입력하세요') } else { alert('txt') } ※. 구글링할 때 예) javascript 문자열 포함 체크 2. split과 includes 사용하기 function q2() { let txt=$('#input-q2').val(); if (txt.includes('@')) { let domain = txt.split('@',)[1].split('.')[0] alert(domain) } else { alert('이메일이아닙니다') } 3. `${txt}와..

JQuery 적용하기(나홀로메모장)http://spartacodingclub.shop/ 포스팅박스 열기 script에 fuction 입력 fuction에 if 추가 ※나머지는 다 '' 작은 따음표 posting-box를 시작부터 감춰두기 (css의 display:none 속성!) 이런 것을, inline-style (인라인 스타일) 이라고 부릅니다. 여기저기 쓰면 복잡하겠지만, 이렇게 쓰면 직관적으로 "아 처음부터 안보이는 태그구나!"를 알 수 있겠죠! (물론, class주고, css에서 display:none 속성을 주는 것도 방법이구요!) .posting-box { width: 500px; margin: 0px auto 30px auto; padding: 30px; border: 3px solid b..

※val()은 input값을 바꾸고 text는 문자를 바꿈 버튼의 텍스트 바꾸기 포스팅박스 열기 $('#btn-posting-box').text('랄라') text가 바뀜 태그 내 html 입력하기 ▼id 추가 let temp_html = `나는 버튼이다` ※ backtick(` `) 은 1번의 옆에 있음 backtick을 사용하면 문자 중간에 Javascript 변수를 삽입할 수 있습니다. $('#cards-box').append(temp_html) append 첨부하다 버튼 말고, 카드를 넣어보기 let temp_html = ` http://naver.com/"> 여기 기사 제목이 들어가죠 T기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 ..

jQuery 사용하기 미리 작성된 Javascript 코드를 가져오는 것을 '임포트'라고 부릅니다 [코드스니펫] jQuery CDN jQuery CDN 부분을 참고해서 임포트하기(https://www.w3schools.com/jquery/jquery_get_started.asp) jQuery를 사용하는 방법 css와 마찬가지로, jQuery를 쓸 때에도 "가리켜야" → 조작할 수 있습니다. 예) 특정 인풋박스의 값을 → 가져와줘! 예) 특정 div를 → 안보이게 해줘! css에서는 선택자로 class를 썼지요? jQuery에서는 id 값을 통해 특정 버튼/인풋박스/div/.. 등을 가리키게 됩니다. 백문이불여일견! 자주 쓰는 jQuery들을 함께 다뤄보면서 익혀보죠! 들어가기 전에 - 모든 jQuery를..