전체 글126 11. 원페이지 쇼핑페이지에 환율 api 적용 귀여운 곰 인형을 팝니다. 가격:1,0000원/개 1000 미니소에서 팔고 있는 귀여운 곰 인형이에요. 카카오톡 선물하기에도 이렇게 생긴 곰인형이 많더라구요. 제 애착인형이에요. 주문자 이름 옵션 --옵션을 선택하세요-- 브라운 베어 허니 베어 블랙 베어 수량 --수량을 선택하세요-- 1개 2개 3개 전화번호 주문하기 1. 만들어두었던 원페이지 곰 인형 판매 페이지에 달러-원 환율 api를 이용해서 가격 밑에 붙여준다. 2. $(document).ready(function(){ }); 위의 코드를 이용하면 로딩을 하자마자 함수를 띄울 수 있다. 3. GET 방식으로 api 정보를 받아와서 현재의 환율 값을 q1-price에 text()함수를 이용해 적용해준다. 4. 제목과 가격 밑에 id값 q1-pric.. 2021. 8. 27. 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. 6. 부트스트랩을 이용해서 상품페이지 틀 만들어보기 귀여운 곰 인형을 팝니다. 가격:1,0000원/개 미니소에서 팔고 있는 귀여운 곰 인형이에요. 카카오톡 선물하기에도 이렇게 생긴 곰인형이 많더라구요. 제 애착인형이에요. 주문자 이름 옵션 --옵션을 선택하세요-- 브라운 베어 허니 베어 블랙 베어 수량 --수량을 선택하세요-- 1개 2개 3개 전화번호 주문하기 결과 1. 부트스트랩 템플릿 적용 2. 이미지 주소를 넣어주고 margin과 width를 조절함 3. 상품명을 적어주고, 옆에 가격을 적어주는데 가격은 글자 크기를 줄여야 하므로 을 이용한다. 4. 부트스트랩에서 적절한 코드를 찾아와 복붙해준다. 5. 자바스크립트를 이용해서 주문하기 버튼을 누르면 주문이 완료되었다는 알림창이 나타나게 한다. -> 자바스크립트 함수를 만들어서 버튼 클래스 앞에 onc.. 2021. 8. 22. 이전 1 ··· 15 16 17 18 19 20 21 다음
