웹22 10. Ajax 연습 - 버튼을 누를 때마다 역에 배치된 따릉이 수 나타내기 1. 업데이트 버튼을 누를 때마다 역에 배치되어 있는 따릉이 수를 나타내기 2. GET 방식으로 api 정보를 받아온다. 3. 필요한 부분만 가져온다. 4. 반복문을 이용해서 가져온 정보를 나타낸다. 5. 백틱을 이용해서 가져온 정보를 보여지게 한다. 6. 조건문을 이용해서 현재 남아있는 따릉이 수가 5 미만이면 빨간색으로 나오게 표시한다. 7. style에 color: red를 추가 8. 업데이트 버튼을 누를 때마다 기존의 정보들은 empty()를 이용해 모두 삭제한다. 9. append()를 이용해 정보를 붙여준다. jQuery + Ajax의 조합을 연습하자! 2. 서울시 OpenAPI(실시간 따릉이 현황)를 이용하기 모든 위치의 따릉이 현황을 .. 2021. 8. 26. 9. Ajax Ajax(Asynchronous JavaScript and XML): 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 웹 개발 기법 *Ajax는 JQuery를 import한 페이지에서만 동작한다. $.ajax({ type: "GET", url: "여기에URL을입력", data: {}, success: function(response){ console.log(response) } }) 메모메모 페이지에서 개발자도구(F12)를 열어주고, 위의 ajax를 작성 URL 입력 부분에 미세먼지 OpenAPI URL를 붙여 넣어준다. http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99 response에서 ['R.. 2021. 8. 25. 8. 포스팅박스 열고 닫는 기능 추가하기 자바 스크립트 함수로 포스팅박스를 여닫는 기능을 추가해보자. 1. 버튼을 눌렀을 때 포스팅박스를 열고 닫을 수 있게 한다. 2. status라는 변수를 생성해서 현재 포스트박스가 보이는지 안 보이는지 판단을 해주게 된다. 3. 포스트박스가 열려있는 상태라면 block이 반환되므로, 4. 현재 status가 block이라면 버튼을 눌렀을 때 포스트박스를 닫아야 하기 때문에 hide()를 사용 5. 그게 아니라면 버튼을 눌렀을 때 포스트박스를 열어야 하기 때문에 show()를 사용 그리고 페이지를 들어왔을 때 포스팅박스가 닫혀있는 상태로 만들려면 posting-box css부분에 display:none;을 추가 -JQuery 연습- jQuery + Javascript의 조합을 연습하자! 1. 빈칸 체크 함수.. 2021. 8. 24. 7. JQuery jQuery: HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것, 즉 라이브러리라고 할 수 있다. 미리 작성된 Javascript 코드 이기 때문에 쓰기전에 import를 해야 한다. https://www.w3schools.com/jquery/jquery_get_started.asp jQuery Get Started jQuery Get Started Adding jQuery to Your Web Pages There are several ways to start using jQuery on your web site. You can: Download the jQuery library from jQuery.com Include jQuery from a CDN, like Google.. 2021. 8. 23. 이전 1 2 3 4 5 6 다음
